/* Loaded after the era themes so their desktop decoration cannot override mobile layout. */
@media (max-width: 980px) {
  body.theme-2001 .layout {
    grid-template-columns: minmax(0, 1fr);
    overflow-x: visible;
  }

  /* The original table rows contain figures and wrappers, whose intrinsic image
     size otherwise expands the entire archive to over 1500px. */
  body.theme-2001 .era-stage-articles,
  body.theme-2001 .era-stage-articles article,
  body.theme-2001 .era-stage-articles h2,
  body.theme-2001 .era-stage-articles time,
  body.theme-2001 .era-stage-articles h3,
  body.theme-2001 .era-stage-articles p,
  body.theme-2001 .era-stage-articles small {
    display: block;
    width: auto;
  }

  body.theme-2001 .era-stage-articles article {
    padding: 12px;
    border-bottom: 2px ridge #c0c0c0;
  }

  body.theme-2001 .era-stage-articles :is(time, h3, p, small) {
    border: 0;
    padding: 4px 0;
    font-size: inherit;
  }

  body.theme-2001 .era-entry-thumb {
    margin: 0 0 12px;
  }

  body.theme-2001 .era-entry-thumb img {
    display: block;
    width: 100%;
    height: auto;
  }
}

@media (max-width: 820px) {
  html { scroll-padding-top: 16px; }
  body { -webkit-text-size-adjust: 100%; }
  body.theme-2015,
  body.theme-2008,
  body.theme-2001 { font-size: 16px; line-height: 1.8; }

  .layout, .content, .brand, .article-body, .era-page-grid,
  .era-stage-articles, .era-entry-body, .modern-subpage-main {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  body.theme-2015 .site-shell,
  body.theme-2008 .site-shell { width: calc(100% - 16px); max-width: none; }
  body.theme-2001 .site-shell { width: calc(100% - 8px); max-width: none; }

  body.theme-2015 .site-header,
  body.theme-2008 .site-header,
  body.theme-2001 .site-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 12px;
    align-items: center;
  }

  body.theme-2015 .brand { padding: 20px 14px 40px; }
  body.theme-2015 .brand-title,
  body.theme-2008 .brand-title,
  body.theme-2001 .brand-title { font-size: clamp(23px, 6vw, 32px); line-height: 1.4; }
  body.theme-2008 .brand-subtitle::before { display: none; }
  .brand-subtitle { font-size: 13px; line-height: 1.6; }

  .menu-button,
  body.theme-2026 .menu-button {
    width: 44px;
    height: 44px;
    border: 1px solid #aaa;
    color: #302d30;
    background: #fff;
  }

  .site-nav a,
  body.theme-2015 .site-nav a,
  body.theme-2008 .site-nav a,
  body.theme-2001 .site-nav a {
    min-height: 44px;
    padding: 10px 12px;
    font-size: 16px;
    line-height: 1.5;
  }
  body.theme-2015 .site-nav a { color: #24527c; text-shadow: none; }
  body.theme-2001 .site-nav::before,
  body.theme-2001 .site-nav a::after { display: none; }

  body.theme-2026:has(.modern-blog-home) .site-header,
  body.theme-2026:has(.modern-blog-home:not(.modern-subpage)) .site-header {
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 12px;
    padding: 18px 16px;
  }
  body.theme-2026:has(.modern-blog-home) .brand-title,
  body.theme-2026:has(.modern-blog-home:not(.modern-subpage)) .brand-title {
    font-size: clamp(22px, 5.8vw, 30px);
    line-height: 1.4;
    letter-spacing: .02em;
  }
  body.theme-2026:has(.modern-blog-home:not(.modern-subpage)) .modern-home-hero {
    min-height: 260px;
    height: auto;
  }
  body.theme-2026:has(.modern-blog-home:not(.modern-subpage)) .modern-hero-copy {
    width: calc(100% - 40px);
    padding: 28px 0;
  }
  body.theme-2026:has(.modern-blog-home:not(.modern-subpage)) .modern-hero-copy h2 {
    font-size: clamp(24px, 7vw, 34px);
    line-height: 1.5;
  }

  body.theme-2015 .layout,
  body.theme-2008 .layout,
  body.theme-2001 .layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 12px 0 96px;
  }
  body.theme-2015 .content,
  body.theme-2008 .content { padding: 14px; }
  body.theme-2001 .content { padding: 6px; }
  .era-page-grid,
  body.theme-2008 .era-page-grid { grid-template-columns: minmax(0, 1fr); }
  .article-body.stage-page { margin: 0; }
  body.theme-2015 .article-body.stage-page,
  body.theme-2008 .article-body.stage-page { padding: 12px; }

  .era-entry-thumb { max-width: 100%; }
  .era-entry-thumb img { max-width: 100%; height: auto; }
  .article-body > img,
  .article-body > figure { max-width: 100%; }
  .master-article-anomaly { width: 100%; margin-inline: 0; }
  .master-article-anomaly img { object-fit: contain; }
  .master-article-anomaly figcaption { max-width: calc(100% - 20px); }
  body.theme-2026 .modern-current-article > .damaged-photo,
  body.theme-2026 .modern-current-article > .article-hero { aspect-ratio: auto; }
  body.theme-2026 .modern-current-article > .article-hero,
  body.theme-2026 .modern-current-article > .damaged-photo > img {
    height: auto;
    max-height: none;
    object-fit: contain;
  }

  /* Keep the old homepage's ridge borders, but stack its menu and content. */
  .era-2001-table,
  .era-2001-table tbody,
  .era-2001-table tr,
  .era-2001-table td { display: block; width: 100%; max-width: 100%; }
  .era-2001-table { overflow-wrap: anywhere; }
  .era-2001-menu { text-align: center; }
  body.theme-2001 .era-frame-2001::before { max-width: 100%; font-size: 12px; }
  body.theme-2001 .era-stage-articles h2,
  body.theme-2008 .era-stage-articles h2 { font-size: 16px; }
  body.theme-2001 .page-lead { font-size: 14px; }

  .plain-button, .read-button, .sidebar-toggle,
  body.theme-2001 .plain-button,
  body.theme-2001 .read-button,
  body.theme-2015 .era-stage-articles article .plain-button,
  .era-archive-column button,
  body.theme-2001 .era-archive-column button {
    min-height: 44px;
    max-width: 100%;
    padding: 10px 12px;
    white-space: normal;
    overflow-wrap: anywhere;
    touch-action: manipulation;
  }
  input, select, textarea,
  .dialogue-input, .era-recovery-form input,
  .era-recovery-form select,
  .archive-record-tools textarea,
  .archive-restore-page textarea { font-size: 16px; max-width: 100%; }
  [data-swipe-master-anomaly] { touch-action: pan-y; }
  .article-native-effect .native-columns > span { min-width: 0; overflow-wrap: anywhere; }

  /* Undo the 2015 desktop-only gutter placement. Keep movement inside the screen. */
  body.theme-2015 .proxy-orb { left: var(--girl-x, calc(100vw - 120px)) !important; }
  .proxy-orb { bottom: max(var(--girl-bottom, 8px), env(safe-area-inset-bottom)); }
  .dialogue { max-width: calc(100vw - 24px); }
  .dialogue-close { width: 44px; height: 44px; top: 0; right: 0; }
  .dialogue-scroll { min-height: 0; overscroll-behavior: contain; }
  .dialogue-answer { flex-shrink: 0; }
  .dialogue-input, .dialogue-submit { min-height: 44px; }

  .debug-side-body { height: 100dvh; }
  .debug-side-toggle { min-height: 44px; }
  .archive-record-tools, .archive-restore-page, .archive-storage-notice {
    margin: 20px 0;
    padding: 14px;
  }
  .runner-ui-layer { grid-template-columns: minmax(0, 1fr) auto; }
  .runner-pause { min-width: 72px; }
  .normal-ending-root { justify-content: safe center; }
  .normal-ending-root, .true-ending-root { padding-bottom: max(20px, env(safe-area-inset-bottom)); }
}

@media (max-width: 360px) {
  body.theme-2015 .content, body.theme-2008 .content { padding: 8px; }
  body.theme-2015 .article-body.stage-page,
  body.theme-2008 .article-body.stage-page { padding: 8px; }
  body.theme-2026 .modern-post-card:not(.is-featured) { grid-template-columns: minmax(0, 1fr); }
  .article-native-effect .native-columns { flex-direction: column; }
}