/*
 * Final phone-layout guardrail shared by all five concepts.
 * This sheet loads after each theme so desktop composition can never override
 * the single-column reading layout on a narrow screen.
 */

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

  body[data-design] .app {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    padding: 0 !important;
    overflow: clip !important;
  }

  body[data-design] img,
  body[data-design] video,
  body[data-design] iframe {
    max-width: 100%;
  }

  /* Hero */
  body[data-design] .hero {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body[data-design] .hero-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
    min-height: 0 !important;
    padding: 42px 18px 28px !important;
    text-align: left !important;
  }

  body[data-design] .hero-copy {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  body[data-design] .design-badge {
    width: fit-content;
    max-width: 100%;
    margin-right: 0 !important;
    margin-left: 0 !important;
    text-align: left !important;
  }

  body[data-design] h1 {
    width: 100% !important;
    max-width: 9ch !important;
    margin-top: 18px !important;
    font-size: clamp(55px, 16vw, 82px) !important;
    line-height: .86 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  body[data-design] .hero-deck {
    width: 100% !important;
    max-width: 34em !important;
    font-size: clamp(18px, 5.1vw, 22px) !important;
    line-height: 1.46 !important;
  }

  body[data-design] .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    width: 100% !important;
  }

  body[data-design] .hero-actions .button {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    border-left-width: 1px !important;
  }

  body[data-design] .hero-stage {
    width: 100% !important;
    max-width: 430px !important;
    min-height: 285px !important;
    margin: 0 auto !important;
    overflow: hidden !important;
  }

  body[data-design] .hero-book {
    width: 108px !important;
  }

  body[data-design] .hero-book:nth-child(1) {
    --x: -92px;
    transform: translate(-92px, 15px) rotate(-9deg) !important;
  }

  body[data-design] .hero-book:nth-child(2) {
    --x: -46px;
    transform: translate(-46px, 5px) rotate(-5deg) !important;
  }

  body[data-design] .hero-book:nth-child(3) {
    --x: 0px;
    transform: translate(0, -4px) !important;
  }

  body[data-design] .hero-book:nth-child(4) {
    --x: 46px;
    transform: translate(46px, 5px) rotate(5deg) !important;
  }

  body[data-design] .hero-book:nth-child(5) {
    --x: 92px;
    transform: translate(92px, 15px) rotate(9deg) !important;
  }

  /* Statistics and primary navigation */
  body[data-design] .stats {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: auto !important;
    margin-inline: 0 !important;
  }

  body[data-design] .stat {
    min-width: 0 !important;
    min-height: 105px !important;
    padding: 16px 7px !important;
  }

  body[data-design] .stat:nth-child(2) {
    border-right: 0 !important;
  }

  body[data-design] .stat:nth-child(-n + 2) {
    border-bottom-width: 1px !important;
    border-bottom-style: solid !important;
  }

  body[data-design] .stat b {
    font-size: clamp(36px, 11vw, 45px) !important;
  }

  body[data-design] .stat span {
    max-width: none !important;
    font-size: 9px !important;
    line-height: 1.42 !important;
    overflow-wrap: anywhere;
  }

  /* Main reading surface */
  body[data-design] main {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 32px 15px 68px !important;
  }

  body[data-design] .panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
    padding: 0 !important;
  }

  /* The critical collision fix shown in the phone screenshot. */
  body[data-design] #overview > .intro-grid {
    position: static !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 0 32px !important;
    padding: 12px 0 30px !important;
    align-items: start !important;
  }

  body[data-design] #overview > .intro-grid > * {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
    transform: none !important;
  }

  body[data-design] #overview .display-title {
    width: 100% !important;
    max-width: none !important;
    margin: 8px 0 0 !important;
    font-size: clamp(39px, 11.8vw, 55px) !important;
    line-height: .98 !important;
    letter-spacing: -.045em !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  body[data-design] #overview .lead {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    font-size: clamp(18px, 5.2vw, 22px) !important;
    line-height: 1.5 !important;
  }

  body[data-design] .overview-map,
  body[data-design] .overview-marker,
  body[data-design] .section-head,
  body[data-design] .story-path,
  body[data-design] .overview-bottom,
  body[data-design] .copy-list,
  body[data-design] .network-grid,
  body[data-design] .people-grid,
  body[data-design] .people-profile-grid,
  body[data-design] .people-mini-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    min-width: 0 !important;
  }

  body[data-design] .overview-map {
    gap: 0 !important;
    margin: 0 0 42px !important;
  }

  body[data-design] .overview-map a {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 88px !important;
    padding: 18px 15px !important;
    border-right: 0 !important;
    border-bottom-width: 1px !important;
    transform: none !important;
  }

  body[data-design] .overview-section {
    width: 100% !important;
    padding: 46px 0 !important;
    scroll-margin-top: 76px !important;
  }

  body[data-design] .overview-marker {
    gap: 8px !important;
    margin-bottom: 28px !important;
  }

  body[data-design] .overview-marker span {
    padding: 0 !important;
  }

  body[data-design] .overview-marker h2,
  body[data-design] .section-head h2 {
    width: 100% !important;
    max-width: none !important;
    font-size: clamp(31px, 9.4vw, 43px) !important;
    line-height: 1.03 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  body[data-design] .section-head {
    gap: 10px !important;
    align-items: start !important;
    margin: 34px 0 18px !important;
  }

  body[data-design] .section-head p {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  body[data-design] .binding-showcase {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(148px, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 0 1px 12px !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
  }

  body[data-design] .binding-card {
    min-width: 0 !important;
    transform: none !important;
    scroll-snap-align: start;
  }

  body[data-design] .evidence-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: none !important;
    grid-auto-rows: minmax(245px, auto) !important;
    gap: 11px !important;
  }

  body[data-design] .evidence-card,
  body[data-design] .evidence-card:first-child,
  body[data-design] .evidence-card:nth-child(4) {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 245px !important;
  }

  body[data-design] .story-path {
    gap: 10px !important;
  }

  body[data-design] .story-step {
    min-height: 0 !important;
    padding: 22px 18px !important;
    transform: none !important;
  }

  body[data-design] .overview-bottom {
    gap: 12px !important;
  }

  body[data-design] .data-card,
  body[data-design] .callout {
    min-width: 0 !important;
    padding: 21px 17px !important;
  }

  body[data-design] .barrow {
    grid-template-columns: minmax(92px, 112px) minmax(0, 1fr) 24px !important;
    gap: 7px !important;
  }

  /* Census cards */
  body[data-design] .master-status {
    padding: 15px !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
  }

  body[data-design] .filters {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    width: 100% !important;
    margin-bottom: 20px !important;
  }

  body[data-design] .filters label {
    min-width: 0 !important;
    padding: 9px 10px !important;
    border-width: 1px !important;
    font-size: 9px !important;
    text-align: center !important;
  }

  body[data-design] .copy-list {
    gap: 11px !important;
  }

  body[data-design] .copy-card,
  body[data-design] .copy-card[open] {
    grid-column: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
    transform: none !important;
    scroll-margin-top: 76px !important;
  }

  body[data-design] .copy-card summary {
    display: grid !important;
    grid-template-columns: 10px 56px minmax(0, 1fr) 20px !important;
    gap: 8px !important;
    min-height: 82px !important;
    padding: 10px !important;
  }

  body[data-design] .dot {
    width: 10px !important;
    min-width: 10px !important;
  }

  body[data-design] .card-thumb {
    width: 56px !important;
    height: 68px !important;
  }

  body[data-design] .sumtext {
    min-width: 0 !important;
  }

  body[data-design] .sumtext h3 {
    margin: 3px 0 !important;
    font-size: 17px !important;
    line-height: 1.14 !important;
    overflow-wrap: anywhere;
  }

  body[data-design] .sumtext small {
    display: block;
    font-size: 11px !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere;
  }

  body[data-design] .photo-count {
    display: none !important;
  }

  body[data-design] summary em {
    justify-self: center;
    font-size: 18px !important;
  }

  body[data-design] .copy-body {
    width: 100% !important;
    min-width: 0 !important;
    padding: 18px 13px 24px !important;
  }

  body[data-design] .badges {
    display: flex;
    flex-wrap: wrap;
  }

  body[data-design] .fact-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body[data-design] .fact-grid > div,
  body[data-design] .record-block,
  body[data-design] .people-copy-section {
    min-width: 0 !important;
  }

  body[data-design] .gallery {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 9px !important;
  }

  body[data-design] figure img {
    width: 100% !important;
    height: auto !important;
    max-height: 520px !important;
    object-fit: contain !important;
  }

  /* Visual archive, network, people, and sources */
  body[data-design] .archive-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  body[data-design] .archive-item,
  body[data-design] .network-card,
  body[data-design] .person,
  body[data-design] .person-profile {
    min-width: 0 !important;
    transform: none !important;
  }

  body[data-design] .archive-item img {
    width: 100% !important;
    height: 220px !important;
    object-fit: contain !important;
  }

  body[data-design] .network-grid,
  body[data-design] .people-grid,
  body[data-design] .people-profile-grid {
    gap: 11px !important;
  }

  body[data-design] .profile-links .jump-copy {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    font-size: 10px !important;
  }

  body[data-design] .source-list {
    padding-left: 20px !important;
    overflow-wrap: anywhere;
  }

  body[data-design] #sources .callout {
    padding: 21px 17px !important;
  }

  body[data-design] .sumtext,
  body[data-design] .fact-grid p,
  body[data-design] .record-block p,
  body[data-design] .source-list li,
  body[data-design] .person-mini,
  body[data-design] .person-profile,
  body[data-design] .person-profile p {
    min-width: 0 !important;
    overflow-wrap: anywhere;
  }

  body[data-design] footer {
    width: auto !important;
    margin: 0 !important;
    padding: 24px 15px 30px !important;
  }

  body[data-design] .lightbox {
    padding: 12px !important;
  }

  body[data-design] .lightbox-inner {
    width: 100% !important;
    max-width: 100% !important;
  }

  body[data-design] .lightbox-close {
    top: 10px !important;
    right: 10px !important;
  }

  body.design-atlas .cid,
  body.design-atlas .photo-count,
  body.design-atlas .profile-role {
    color: #a93c2d !important;
  }

  /* The graphic Egyptian concept needs slightly more inset room. */
  body.design-egyptian .hero-inner {
    padding-top: 64px !important;
  }

  body.design-egyptian #overview > .intro-grid {
    padding: 22px 18px 27px !important;
  }
}

@media (max-width: 520px) {
  body[data-design] main {
    padding-inline: 12px !important;
  }

  body[data-design] .hero-inner {
    padding-inline: 15px !important;
  }

  body[data-design] .fact-grid,
  body[data-design] .people-mini-grid,
  body[data-design] .archive-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-design] .binding-showcase {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body[data-design] .binding-card:last-child {
    grid-column: 1 / -1 !important;
    width: calc(50% - 5px) !important;
    justify-self: center !important;
  }

  body[data-design] .hero-stage {
    min-height: 238px !important;
  }

  body[data-design] .hero-book {
    width: 92px !important;
  }

  body[data-design] .hero-book:nth-child(1) {
    --x: -76px;
    transform: translate(-76px, 13px) rotate(-9deg) !important;
  }

  body[data-design] .hero-book:nth-child(2) {
    --x: -38px;
    transform: translate(-38px, 4px) rotate(-5deg) !important;
  }

  body[data-design] .hero-book:nth-child(3) {
    transform: translate(0, -4px) !important;
  }

  body[data-design] .hero-book:nth-child(4) {
    --x: 38px;
    transform: translate(38px, 4px) rotate(5deg) !important;
  }

  body[data-design] .hero-book:nth-child(5) {
    --x: 76px;
    transform: translate(76px, 13px) rotate(9deg) !important;
  }

  body[data-design] .copy-card summary {
    grid-template-columns: 54px minmax(0, 1fr) 20px !important;
    gap: 9px !important;
  }

  body[data-design] .copy-card summary .dot {
    display: none !important;
  }

  body[data-design] .card-thumb {
    width: 54px !important;
    height: 66px !important;
  }

  body[data-design] .evidence-grid {
    grid-auto-rows: auto !important;
    grid-template-rows: 300px repeat(3, 205px) !important;
  }

  body[data-design] .evidence-card,
  body[data-design] .evidence-card:first-child,
  body[data-design] .evidence-card:nth-child(4) {
    min-height: 205px !important;
  }

  body[data-design] .evidence-card:first-child {
    min-height: 300px !important;
  }

  body[data-design] .archive-item img {
    height: 245px !important;
  }

  body[data-design] .overview-marker h2,
  body[data-design] .section-head h2 {
    font-size: clamp(30px, 9.5vw, 40px) !important;
  }

  body[data-design] .lightbox {
    padding: max(12px, env(safe-area-inset-top))
             max(12px, env(safe-area-inset-right))
             max(12px, env(safe-area-inset-bottom))
             max(12px, env(safe-area-inset-left)) !important;
  }

  body[data-design] .lightbox-inner {
    max-height: calc(100dvh - 24px) !important;
  }

  body[data-design] .lightbox-close {
    top: max(12px, env(safe-area-inset-top)) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
  }

  body[data-design] .lightbox-caption {
    padding: 10px 48px 11px 12px !important;
  }

  /* Keep the design selector comfortable on the same phones. */
  .shell {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .masthead {
    padding-inline: 20px !important;
  }

  .concepts {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .concept,
  .concept:nth-child(4),
  .concept:nth-child(5) {
    width: 100%;
    min-width: 0;
    grid-column: 1 !important;
  }
}