/* Responsive behaviour: laptop (<=1180), tablet (<=1023), mobile (<=767), small (<=480) */

@media (max-width: 1280px) {
  .nav-actions { gap: var(--s-3); }
  .nav-links { gap: 1.1rem; }
  .directory { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .search-panel { grid-template-columns: 1fr 1fr 1fr; }
  .search-panel .btn { grid-column: 1 / -1; }
}

@media (max-width: 1023px) {
  /* CSS-only navigation */
  .nav-burger { display: grid; }
  .nav-panel { position: absolute; inset: 100% 0 auto; flex-direction: column; align-items: stretch; gap: 0; background: var(--ivory); border-bottom: var(--line); padding: 0 var(--gutter); max-height: 0; overflow: hidden; visibility: hidden; transition: max-height .3s var(--ease), visibility .3s; }
  .nav-toggle:checked ~ .nav-panel { max-height: 85vh; overflow-y: auto; visibility: visible; padding-block: var(--s-3) var(--s-5); }
  .nav-links { flex-direction: column; gap: 0; margin: 0; }
  .nav-links a, .nav-actions a:not(.btn) { padding-block: .95rem; border-bottom: var(--line); font-size: 1rem; }
  .nav-links a::after, .nav-actions a:not(.btn)::after { display: none; }
  .nav-actions { flex-direction: column; align-items: stretch; gap: 0; margin: 0; }
  .nav-actions .btn { margin-top: var(--s-4); }
  .app-header .nav-actions { margin: 0; }

  .hero-grid, .feature-story, .compat, .split, .contact-layout, .register, .profile-top, .stories-list > article { grid-template-columns: 1fr; }
  .hero-grid { min-height: 0; }
  .hero-art { max-width: 640px; }
  .register-aside, .filters, .section-nav, .toc { position: static; }
  .register-aside .img-box { display: none; }
  .stories-list > article:nth-child(even) .frame { order: 0; }
  .principles { grid-template-columns: 1fr; }
  .principle, .principle:first-child, .principle:last-child { padding: var(--s-4) 0; }
  .principle + .principle { border-inline-start: 0; border-top: 1px solid #d6cbb8; }
  .profiles-editorial { grid-template-columns: 1fr 1fr; align-items: start; }
  .biodata-grid { grid-template-columns: 1fr; }
  .profiles-editorial .editorial { grid-column: 1 / -1; }
  .steps, .pillars, .tips { grid-template-columns: 1fr 1fr; }
  .plans-grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .discover-layout { grid-template-columns: 1fr; }
  .filters { border-bottom: var(--line); padding-bottom: var(--s-4); }
  .gallery { max-width: 480px; }
  .profile-sections, .psec { grid-template-columns: 1fr; gap: var(--s-3); }
  .auth { grid-template-columns: 1fr; min-height: 0; }
  .auth-art { min-height: 340px; padding-block: var(--s-6); }
  .edit-layout { grid-template-columns: 1fr; }
  .section-nav { display: flex; flex-wrap: wrap; gap: .4rem 1rem; padding-bottom: var(--s-3); border-bottom: var(--line); }
  .section-nav a { border: 0; padding: .3rem 0; }
  .legal { grid-template-columns: 1fr; gap: var(--s-5); } .toc { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }

  .app { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; padding: .6rem var(--gutter); border-right: 0; border-bottom: var(--line); overflow: visible; }
  .sidebar .who, .sidebar .side-sep { display: none; }
  .sidebar nav { display: flex; gap: .4rem 1.4rem; overflow-x: auto; scrollbar-width: thin; }
  .side-link { margin: 0; flex: none; white-space: nowrap; border-inline-start: 0; border-bottom: 2px solid transparent; padding: .8rem 0; }
  .side-link::before { display: none; }
  .side-link[aria-current] { background: none; border-bottom-color: var(--maroon); }
  .side-link:hover { background: none; }
  .dash-cols { grid-template-columns: 1fr; gap: 0; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .metric:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; }
  .metric:nth-child(n+3) { border-top: var(--line); }
  .chat-shell { grid-template-columns: 250px minmax(0, 1fr); }
}

@media (max-width: 767px) {
  .bcard { grid-template-columns: 1fr; justify-items: center; text-align: center; } .bcard .meta { text-align: left; } .bcard .pcard-actions { justify-content: center; }
  :root { --header-h: 68px; }
  .hero { padding-bottom: var(--s-7); }
  .hero-actions .btn { flex: 1 1 100%; }
  .hero-art { grid-template-columns: minmax(0, 1fr); }
  .hero-art .side { display: none; }
  .search-panel-wrap { margin-top: calc(var(--s-7) * -.3); }
  .search-panel { grid-template-columns: 1fr; padding: var(--s-4); }
  .search-panel .panel-title { flex-direction: column; margin: 0; }
  .section-head.row { flex-direction: column; align-items: flex-start; }
  .profiles-editorial { grid-template-columns: 1fr; }
  .steps, .pillars, .tips { grid-template-columns: 1fr; gap: var(--s-5); }
  .frame::before, .frame.flip::before { inset: 9px -7px -9px 7px; }
  .discover-bar { grid-template-columns: 1fr; }
  .directory { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; }
  .results-head { align-items: flex-start; flex-direction: column; }
  .facts-list { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .prow { grid-template-columns: 72px minmax(0, 1fr); }
  .prow > .img-box { width: 72px; height: 92px; }
  .prow .acts { grid-column: 1 / -1; justify-content: flex-start; }
  .chat-shell { grid-template-columns: 1fr; height: auto; }
  .convos { max-height: 250px; border-right: 0; border-bottom: var(--line); }
  .chat { height: 520px; }
  .bubble { max-width: 88%; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--s-5); }
  .footer-base { flex-direction: column; }
  .mini-profile { grid-template-columns: 56px minmax(0, 1fr); } .mini-profile .btn { grid-column: 1 / -1; }
  .pager { flex-wrap: wrap; gap: var(--s-3); justify-content: center; }
  .section { padding-block: var(--s-7); }
}

@media (max-width: 480px) {
  .wordmark { font-size: 1.6rem; }
  .metrics { grid-template-columns: 1fr; }
  .metric, .metric:first-child { padding-inline: 0; } .metric + .metric { border-inline-start: 0; border-top: var(--line); }
  .pcard-actions { flex-direction: column; align-items: stretch; }
  .pcard-actions .btn { width: 100%; }
  .form-foot .btn { width: 100%; }
}

@media (min-width: 1600px) {
  :root { --container: 1360px; }
  .hero-grid { min-height: 820px; }
}

@media (max-width: 1023px) {
  .people-split { grid-template-columns: 1fr; }
  .people-photo { min-height: 0; aspect-ratio: 4 / 3; }
  .people-text { max-width: none; padding: var(--s-7) var(--gutter); }
}
@media (max-width: 560px) {
  .person { grid-template-columns: 1fr; } .person .acts { flex-direction: row; align-items: center; justify-content: flex-start; }
}