/* Overrides layer: responsive breakpoints, reduced-motion, print. */
@layer overrides {
  /* Tablet */
  @media (max-width: 960px) {
    .article-list > li {
      grid-template-columns: 5rem minmax(0, 1fr) 7rem;
      gap: var(--space-4);
      padding-block: var(--space-5);
    }

    .article-list--timeline {
      --timeline-date-column: 5.75rem;
      --timeline-gap: var(--space-4);
      --timeline-date-offset: 1.125rem;
    }

    .article-list--timeline > li {
      grid-template-columns:
        var(--timeline-date-column) var(--timeline-marker-column) minmax(0, 1fr)
        7rem;
      grid-template-areas: 'date marker content thumb';
      column-gap: var(--timeline-gap);
    }

    .starting-points {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  /* Mobile */
  @media (max-width: 700px) {
    .site-header {
      padding-block: var(--space-6) var(--space-4);
    }

    .home-intro {
      padding-block: var(--space-6) var(--space-5);
    }

    .home-section {
      margin-top: var(--space-6);
    }

    .page-shell {
      margin-top: 0;
    }

    .at-a-glance__row,
    .facts dl > div {
      grid-template-columns: 1fr;
      gap: var(--space-1);
    }

    .article-list > li {
      grid-template-columns: clamp(4rem, 22vw, 5rem) minmax(0, 1fr);
      grid-template-areas:
        'thumb content'
        'date content';
      gap: var(--space-2) var(--space-3);
      padding-block: var(--space-4);
    }

    .article-list--timeline {
      --timeline-date-column: clamp(3.75rem, 18vw, 4.75rem);
      --timeline-marker-column: 1rem;
      --timeline-marker-offset: 0.5rem;
      --timeline-gap: var(--space-3);
      --timeline-date-offset: 0.875rem;
      --timeline-dot-top: 2.1875rem;
    }

    .article-list--timeline > li {
      grid-template-columns:
        var(--timeline-date-column) var(--timeline-marker-column)
        minmax(0, 1fr);
      grid-template-areas:
        'date marker content'
        'thumb marker content';
      gap: var(--space-2) var(--timeline-gap);
    }

    .article-list > li > article {
      padding-right: 0;
    }

    .article-list time {
      text-align: start;
      white-space: nowrap;
    }

    .article-list--timeline time {
      align-self: start;
      margin-block-start: var(--space-3);
      font-size: var(--fs-xs);
      text-align: center;
    }

    .article-list .entry-thumbnail {
      aspect-ratio: 1;
    }

    .starting-points {
      display: block;
      padding-top: 0;
    }

    .starting-points > li {
      display: grid;
      grid-template-columns: 4rem minmax(0, 1fr);
      align-items: center;
      gap: var(--space-3);
      padding-block: var(--space-3);
      border-top: 1px solid var(--color-rule);
    }

    .starting-points > li:first-child {
      border-top: 0;
    }

    .starting-point__thumbnail {
      aspect-ratio: 1;
    }

    .starting-point__body {
      padding-block-start: 0;
    }

    .project-list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-3);
    }

    .project-card__summary {
      padding: var(--space-2) var(--space-3);
    }

    .page-header,
    .post-header {
      padding-block: var(--space-6) var(--space-4);
    }

    .post > .prose {
      margin-top: var(--space-6);
    }

    .prose {
      line-height: 1.55;
    }

    .prose code {
      overflow-wrap: anywhere;
    }

    .prose pre {
      overflow-x: hidden;
      scrollbar-gutter: auto;
      white-space: pre-wrap;
    }

    .prose pre code,
    .prose pre .line {
      overflow-wrap: anywhere;
      white-space: pre-wrap;
    }

    .tag-filter {
      display: block;
      margin-bottom: var(--space-5);
      padding-block: var(--space-2);
    }

    .tag-filter .tag-list {
      gap: 0 var(--space-3);
      margin-top: var(--space-2);
    }

    .tag-list {
      gap: 0 var(--space-3);
    }

    :focus-visible {
      outline-offset: 1px;
    }

    /* Preserve the inset outline on <main> so the post-skip-link focus ring
       doesn't escape its container. Repeated here because this layer wins
       over the base rule regardless of selector specificity. */
    main:focus-visible {
      outline-offset: -2px;
    }

    .post-nav__list {
      grid-template-columns: 1fr;
    }

    .post-nav__next {
      justify-self: stretch;
    }

    .post-nav a.next {
      text-align: start;
    }

    .header-actions {
      justify-content: space-between;
      width: 100%;
      gap: var(--space-2) var(--space-4);
    }

    .site-nav {
      gap: var(--space-1) var(--space-6);
    }

    .footer-meta,
    .footer-contact {
      gap: var(--space-2);
    }

    .footer-meta {
      font-size: var(--fs-xs);
    }
  }

  @media (min-width: 430px) and (max-width: 700px) {
    .post > .prose > p,
    .page-shell--full-width > .about-copy > p {
      text-align: justify;
      text-align-last: start;
      text-justify: auto;
      overflow-wrap: normal;
      word-break: normal;
    }
  }

  @media (min-width: 701px) {
    .page-shell--full-width > .about-copy > p {
      text-align: justify;
      text-align-last: start;
      text-justify: auto;
      overflow-wrap: normal;
      word-break: normal;
    }
  }

  @media (max-width: 360px) {
    .site-header {
      position: relative;
    }

    .theme-switcher {
      position: absolute;
      inset-block-start: var(--space-6);
      inset-inline-end: 0;
      margin: 0;
    }

    .header-actions,
    .site-nav {
      column-gap: var(--space-3);
    }

    .footer-name {
      display: none;
    }
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }

    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
      animation: none;
    }
  }

  /* Print */
  @media print {
    :root {
      --color-bg: #fff;
      --color-fg: #000;
      --color-muted: #333;
      --color-link: #000;
      --color-link-hover: #000;
      --color-accent: #000;
      --color-rule: #999;
      --color-rule-medium: #777;
      --color-rule-strong: #333;
      --color-code-bg: #f4f4f4;
      --color-callout-bg: #f8f8f8;
    }

    body {
      font-size: 11pt;
      line-height: 1.4;
    }

    *,
    *::before,
    *::after {
      print-color-adjust: economy;
    }

    .site-header,
    .site-footer,
    .skip-link,
    .theme-switcher,
    .tag-filter,
    .post-nav,
    .related-posts,
    .heading-anchor {
      display: none;
    }

    main {
      padding: 0;
    }

    a,
    a:visited {
      color: var(--color-fg);
      text-decoration: underline;
    }

    .prose a[href]::after {
      content: ' (' attr(href) ')';
      font-size: 0.85em;
      color: var(--color-muted);
    }

    .prose a[href^='#']::after,
    .prose a[href^='/']::after {
      content: '';
    }

    .prose pre,
    .prose code,
    .post-thumbnail img,
    .post-media img {
      page-break-inside: avoid;
    }

    .prose h2,
    .prose h3 {
      page-break-after: avoid;
    }
  }
}
