/* --------------------------------------------------------------------------
   v5.8.1 — mobile stability pass
   The phone layout is deliberately quieter than the desktop edition. Cards
   never rely on overlapping art direction; every path, image and reading aid
   becomes a complete, tappable unit before it becomes decorative.
   -------------------------------------------------------------------------- */

@media (max-width: 782px) {
  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }

  :is(.dm-site-header, main, .dm-site-footer, .dm-reading-layout, .dm-article-content) {
    min-width: 0;
  }

  :is(.dm-site-header, main, .dm-site-footer) :is(img, svg, video, canvas) {
    max-inline-size: 100%;
  }

  /* Header: a short, useful top bar with search on its own reliable row. */
  .dm-human-warmth .dm-site-header .dm-brand-row {
    display: grid !important;
    width: min(100% - 32px, 1280px) !important;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) 44px !important;
    gap: .55rem .75rem;
    align-items: center;
    padding: .78rem 0 .62rem;
  }

  .dm-human-warmth .dm-site-header .dm-brand-lockup {
    min-width: 0;
  }

  .dm-human-warmth .dm-site-header .dm-brand-signature {
    min-width: 0;
    gap: .55rem;
  }

  .dm-human-warmth .dm-site-header .dm-logo-mark {
    width: 2.35rem;
    height: 2.35rem;
    flex: 0 0 2.35rem;
  }

  .dm-human-warmth .dm-site-header .dm-brand-name {
    max-width: 100%;
    overflow: hidden;
    font-size: clamp(1.35rem, 7vw, 1.72rem);
    line-height: .92;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dm-human-warmth .dm-site-header .dm-brand-tagline {
    margin-top: .2rem;
    font-size: .62rem;
    line-height: 1.25;
  }

  .dm-human-warmth .dm-site-header .dm-header-desk {
    display: none !important;
  }

  .dm-human-warmth .dm-site-header .dm-brand-tools {
    display: contents !important;
  }

  .dm-human-warmth .dm-site-header .dm-theme-toggle {
    width: 44px;
    min-width: 44px;
    height: 44px;
    grid-column: 2;
    grid-row: 1;
    margin: 0;
  }

  .dm-human-warmth .dm-site-header .dm-header-search {
    width: 100% !important;
    min-width: 0;
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0;
  }

  .dm-human-warmth .dm-site-header .dm-header-search .wp-block-search__inside-wrapper {
    min-height: 46px;
  }

  .dm-human-warmth .dm-site-header .dm-header-search :is(input, button) {
    min-height: 46px;
  }

  .dm-human-warmth .dm-site-header .dm-nav-inner,
  .dm-context-trail__inner {
    width: min(100% - 32px, 1280px);
  }

  .dm-nav-mobile-toggle {
    min-height: 52px;
    padding-inline: 0 !important;
  }

  /* The opening introduces one room and one next step. The three practical
     routes stay available as a native swipe row instead of stretching the
     first visit into three consecutive screens. */
  .dm-grounded-hero__mast h1 {
    max-width: 11.4ch;
    font-size: clamp(2.8rem, 11.5vw, 3.75rem);
    line-height: .93;
  }

  .dm-grounded-hero__scene img {
    aspect-ratio: 4 / 3;
  }

  .dm-grounded-hero__routes {
    display: grid;
    width: 100%;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(78vw, 320px);
    gap: .7rem;
    margin-top: 1.35rem;
    padding: .7rem 0 1rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: 0;
    scroll-snap-type: x mandatory;
    touch-action: pan-x pan-y;
  }

  .dm-grounded-hero__routes a,
  .dm-grounded-hero__routes a + a {
    min-height: 8.8rem;
    padding: 1rem !important;
    border: 1px solid rgba(63, 57, 47, .2) !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .dm-grounded-hero__routes small {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  html[data-dm-theme="dark"] .dm-grounded-hero__routes a,
  html[data-dm-theme="dark"] .dm-grounded-hero__routes a + a {
    border-color: rgba(247, 238, 227, .22) !important;
  }

  .dm-nav-drawer,
  .dm-reading-sheet {
    max-width: 100vw;
  }

  .dm-nav-drawer__surface,
  .dm-reading-sheet__surface {
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
  }

  .dm-nav-drawer__surface {
    width: min(100vw, 470px);
    padding-inline: 1rem;
  }

  .dm-nav-drawer details ul {
    grid-template-columns: minmax(0, 1fr);
  }

  .dm-nav-drawer details a {
    min-height: 48px;
    padding-block: .58rem;
  }

  /* A sidebar is helpful on a wide screen; on a phone it belongs in the flow. */
  body.single-post .dm-reading-layout,
  body.dm-article-edition .dm-reading-layout {
    width: min(100% - 32px, 900px) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1.2rem !important;
  }

  body.single-post .dm-reading-layout .dm-guide-experience,
  body.dm-article-edition .dm-reading-layout .dm-guide-experience {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Stop viewport-driven reveal effects from leaving a partially visible
     chapter, while keeping the page's ordinary interaction transitions. */
  body.dm-article-edition :is(
    .dm-article-opening,
    .dm-article-title-group,
    .dm-article-intro,
    .dm-edition-opening,
    .dm-edition-chapter,
    .dm-edition-diagram,
    .dm-edition-board,
    .dm-edition-detail-group,
    .dm-edition-detail,
    .dm-saveable-plate,
    .dm-mid-route,
    .dm-visual-journey,
    .dm-field-notes,
    .dm-guide-experience
  ) {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  body.dm-article-edition :is(
    .dm-article-opening *,
    .dm-edition-opening *,
    .dm-edition-chapter *,
    .dm-edition-diagram *,
    .dm-edition-board *,
    .dm-saveable-plate *,
    .dm-mid-route *
  ) {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  body.dm-article-edition .dm-edition-detail-group,
  body.dm-article-edition .dm-edition-detail-group--single,
  body.dm-article-edition .dm-edition-detail-group--pair,
  body.dm-article-edition .dm-edition-detail {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    transform: none !important;
  }

  body.dm-article-edition .dm-edition-detail {
    padding: .42rem !important;
  }

  body.dm-article-edition .dm-edition-detail__media {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 3 !important;
  }

  body.dm-article-edition .dm-edition-detail--portrait .dm-edition-detail__media,
  body.dm-article-edition .dm-edition-detail[data-dm-detail-layout="row-5"] .dm-edition-detail__media {
    aspect-ratio: 4 / 5 !important;
  }

  body.dm-article-edition .dm-edition-detail__image {
    position: static !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    object-fit: cover !important;
    transform: none !important;
  }

  body.dm-article-edition .dm-edition-detail__caption {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: .45rem !important;
    padding: .82rem .62rem .6rem !important;
  }

  /* Every diagram has a true one-column phone version. This prevents the
     70/20/10 and route graphics from compressing their labels into each other. */
  body.dm-article-edition .dm-edition-diagram__head {
    display: block !important;
    margin-bottom: 1.1rem !important;
  }

  body.dm-article-edition .dm-edition-diagram__head > * {
    grid-column: auto !important;
    grid-row: auto !important;
    margin-inline: 0 !important;
  }

  body.dm-article-edition .dm-edition-diagram__head h3 {
    margin-top: .35rem !important;
    font-size: clamp(1.85rem, 9vw, 2.55rem) !important;
  }

  body.dm-article-edition .dm-edition-diagram__head > p:last-child {
    margin-top: .72rem !important;
  }

  body.dm-article-edition .dm-edition-diagram__plot,
  body.dm-article-edition .dm-edition-diagram--route .dm-edition-diagram__plot,
  body.dm-article-edition .dm-edition-diagram--timeline .dm-edition-diagram__plot,
  body.dm-article-edition .dm-edition-diagram--plans .dm-edition-diagram__plot,
  body.dm-article-edition .dm-edition-diagram--compare .dm-edition-diagram__plot,
  body.dm-article-edition .dm-edition-diagram--matrix .dm-edition-diagram__plot,
  body.dm-article-edition .dm-edition-diagram--decision .dm-edition-diagram__plot {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1px !important;
    padding: 0 !important;
    overflow: hidden;
    background: var(--dm-edition-line) !important;
  }

  body.dm-article-edition .dm-edition-diagram__plot::before,
  body.dm-article-edition .dm-edition-diagram__plot::after,
  body.dm-article-edition .dm-edition-diagram--route .dm-edition-diagram__plot::before,
  body.dm-article-edition .dm-edition-diagram--timeline .dm-edition-diagram__plot::before,
  body.dm-article-edition .dm-edition-diagram--decision .dm-edition-diagram__plot::before,
  body.dm-article-edition .dm-edition-diagram--decision .dm-edition-diagram__plot::after {
    display: none !important;
  }

  body.dm-article-edition .dm-edition-diagram__plot > li,
  body.dm-article-edition .dm-edition-diagram--route .dm-edition-diagram__plot > li,
  body.dm-article-edition .dm-edition-diagram--timeline .dm-edition-diagram__plot > li,
  body.dm-article-edition .dm-edition-diagram--plans .dm-edition-diagram__plot > li,
  body.dm-article-edition .dm-edition-diagram--compare .dm-edition-diagram__plot > li,
  body.dm-article-edition .dm-edition-diagram--matrix .dm-edition-diagram__plot > li,
  body.dm-article-edition .dm-edition-diagram--decision .dm-edition-diagram__plot > li {
    display: grid !important;
    min-height: 0 !important;
    grid-template-columns: 1.45rem minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: .55rem .68rem !important;
    align-items: start !important;
    padding: .9rem .75rem !important;
    border: 0 !important;
    background: var(--dm-edition-paper) !important;
    text-align: left !important;
  }

  body.dm-article-edition .dm-edition-diagram__mark,
  body.dm-article-edition .dm-edition-diagram--route .dm-edition-diagram__mark,
  body.dm-article-edition .dm-edition-diagram--timeline .dm-edition-diagram__mark,
  body.dm-article-edition .dm-edition-diagram--decision .dm-edition-diagram__mark {
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    margin: 0 !important;
    padding-top: .22rem;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  body.dm-article-edition .dm-edition-diagram__copy,
  body.dm-article-edition .dm-edition-diagram--route .dm-edition-diagram__copy,
  body.dm-article-edition .dm-edition-diagram--timeline .dm-edition-diagram__copy,
  body.dm-article-edition .dm-edition-diagram--plans .dm-edition-diagram__copy,
  body.dm-article-edition .dm-edition-diagram--compare .dm-edition-diagram__copy,
  body.dm-article-edition .dm-edition-diagram--matrix .dm-edition-diagram__copy,
  body.dm-article-edition .dm-edition-diagram--decision .dm-edition-diagram__copy {
    display: grid !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: .24rem .7rem !important;
    margin: 0 !important;
  }

  body.dm-article-edition .dm-edition-diagram__copy strong {
    grid-column: 1 !important;
    margin: 0 !important;
  }

  body.dm-article-edition .dm-edition-diagram__copy em {
    grid-column: 2 !important;
    margin: 0 !important;
    justify-self: end;
    white-space: nowrap;
  }

  body.dm-article-edition .dm-edition-diagram__copy small {
    grid-column: 1 / -1 !important;
    margin: 0 !important;
  }

  body.dm-article-edition .dm-edition-diagram__shape,
  body.dm-article-edition .dm-edition-diagram--route .dm-edition-diagram__shape,
  body.dm-article-edition .dm-edition-diagram--timeline .dm-edition-diagram__shape,
  body.dm-article-edition .dm-edition-diagram--compare .dm-edition-diagram__shape,
  body.dm-article-edition .dm-edition-diagram--plans .dm-edition-diagram__shape {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: .72rem !important;
    min-width: 0 !important;
    grid-column: 2 !important;
    grid-row: 2 !important;
    margin: 0 !important;
  }

  /* Rails are intentional horizontal browsing, never a set of accidental
     slivers. Touch remains native and each card is a whole reading choice. */
  :is(
    .dm-atmosphere-portal__grid,
    .dm-visual-journey__grid,
    .dm-field-notes__rail,
    .dm-desk-stream__grid,
    .dm-next-moves__rail,
    [data-dm-scroll-rail],
    [data-dm-controlled-rail]
  ) {
    display: grid !important;
    width: auto !important;
    max-width: none !important;
    grid-template-columns: none !important;
    grid-auto-flow: column !important;
    grid-auto-columns: min(84vw, 340px) !important;
    gap: .85rem !important;
    padding: .2rem 1rem 1rem !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: 1rem;
    scroll-snap-type: x mandatory;
    touch-action: pan-x pan-y;
  }

  :is(
    .dm-atmosphere-portal__grid,
    .dm-visual-journey__grid,
    .dm-field-notes__rail,
    .dm-desk-stream__grid,
    .dm-next-moves__rail,
    [data-dm-scroll-rail],
    [data-dm-controlled-rail]
  ) > * {
    width: auto !important;
    min-width: 0 !important;
    grid-column: auto !important;
    grid-row: auto !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    transform: none !important;
  }

  .dm-field-notes__rail .dm-field-note-card,
  .dm-atmosphere-portal__grid .dm-atmosphere-portal__card,
  .dm-visual-journey__grid .dm-experience-card {
    min-height: 100%;
  }

  /* The final navigation should close the page calmly, not turn into a dense
     directory of tiny links. */
  .dm-human-warmth .dm-site-footer .dm-footer-lead {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1.4rem;
  }

  .dm-human-warmth .dm-site-footer .dm-footer-route {
    min-height: 0;
  }

  .dm-human-warmth .dm-site-footer .dm-footer-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1.35rem !important;
  }

  .dm-human-warmth .dm-site-footer .dm-footer-grid > nav,
  .dm-human-warmth .dm-site-footer .dm-footer-grid > nav:nth-child(n),
  .dm-human-warmth .dm-site-footer .dm-footer-grid > nav.dm-footer-practical:nth-child(n) {
    grid-column: 1 !important;
    padding-bottom: 1rem;
  }

  .dm-human-warmth .dm-site-footer .dm-footer-grid > nav ul,
  .dm-human-warmth .dm-site-footer .dm-footer-grid > nav:nth-child(3) ul,
  .dm-human-warmth .dm-site-footer .dm-footer-grid > nav.dm-footer-practical ul {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: .1rem !important;
  }

  .dm-human-warmth .dm-site-footer .dm-footer-grid a,
  .dm-human-warmth .dm-site-footer .dm-back-to-top {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
  }
}

@media (max-width: 380px) {
  .dm-human-warmth .dm-site-header .dm-brand-row,
  .dm-human-warmth .dm-site-header .dm-nav-inner,
  .dm-context-trail__inner,
  body.single-post .dm-reading-layout,
  body.dm-article-edition .dm-reading-layout {
    width: min(100% - 24px, 900px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dm-nav-drawer[open],
  .dm-reading-sheet[open],
  .dm-theme-toggle svg,
  .dm-theme-toggle__ring {
    animation: none !important;
    transition: none !important;
  }
}