/* Responsive presentation only. Original pictures and saved colours remain untouched. */
#profileModal { background:#0d0a12; overflow-y:auto !important; overflow-x:hidden; overscroll-behavior:contain; }
#profileModal.open { display:block !important; }
#profileModal .modal-card {
  box-sizing:border-box; width:100% !important; max-width:1740px; min-height:100vh !important;
  height:auto !important; margin:0 auto; padding:64px clamp(20px,3vw,56px) 48px !important;
  display:grid !important; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(260px,.68fr) !important;
  grid-template-rows:auto !important; gap:clamp(22px,2.2vw,38px) !important;
  align-items:start !important; align-content:start !important; justify-content:center !important;
  overflow:visible !important; background:radial-gradient(ellipse at 65% 0,#26132d66,transparent 55%),#0d0a12;
}
#profileModal .modal-close { position:fixed; z-index:2; top:12px; right:16px; width:40px; height:40px; background:#17101fe8; border:1px solid #65516e; cursor:pointer; }
#profileModal .modal-main { grid-column:1 !important; grid-row:1 !important; width:100% !important; min-width:0; }
#profileModal .modal-gallery { display:block !important; width:100% !important; max-width:none !important; margin:0 !important; }
#profileModal .modal-gallery img:first-child { display:block !important; width:100% !important; height:auto !important; max-width:100% !important; max-height:none !important; aspect-ratio:auto !important; object-fit:contain !important; border-radius:12px !important; }
#profileModal .modal-info,#profileModal .modal-info.has-copy {
  display:flex !important; flex-direction:column; gap:0; min-width:0; width:100% !important;
  grid-column:2 !important; grid-row:1 !important; margin:0 !important;
}
#profileModal .modal-info .below-gallery {
  position:static !important; display:grid !important; width:100% !important; min-width:0;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:10px !important; margin:0 0 26px !important;
}
#profileModal .modal-info .below-gallery:empty { display:none !important; }
#profileModal .modal-info .below-gallery img {
  display:block; width:100% !important; min-width:0; min-height:0 !important;
  max-height:clamp(210px,23vw,340px) !important; aspect-ratio:auto !important;
  object-fit:contain !important; object-position:center !important; border-radius:10px !important; background:#17111d !important;
}
#profileModal .modal-info #modalName {
  position:static !important; width:100% !important; margin:0 0 14px !important; padding:0;
  font-size:clamp(36px,3.5vw,58px) !important; font-weight:600; line-height:1.08; letter-spacing:-.025em;
  overflow-wrap:anywhere; text-shadow:0 0 20px #b26dde38 !important;
}
#profileModal .modal-country { font-size:16px; font-weight:500; margin:0 0 22px; line-height:1.5; text-shadow:none !important; }
#profileModal .modal-info .modal-role {
  position:static !important; width:100% !important; max-width:none; margin:0 !important;
  font-size:17px; line-height:1.75 !important; text-shadow:0 0 12px #b56ce329 !important;
}
#profileModal .modal-info .profile-region { display:table; margin:22px 0 0 !important; padding:6px 12px !important; border-radius:5px; font-size:14px !important; line-height:1.5; background:#291b31; border:1px solid #73567b; color:inherit; text-shadow:none !important; box-shadow:none; }
#profileModal .modal-copy { width:100%; box-sizing:border-box; margin:24px 0 0; padding:20px 0 0; border:0; border-top:1px solid #65506c66; background:none; font-size:16px; line-height:1.75; text-shadow:none !important; }
#profileModal .main-under-copy { margin:18px 0 0; padding:16px 0 0; border:0; border-top:1px solid #65506c66; border-radius:0; background:none; font-size:16px; line-height:1.75; text-shadow:0 0 12px #b56ce329 !important; }
#profileModal #modalMainCopy { font-size:20px; }
#profileModal .profile-directory { grid-column:3; grid-row:1; min-width:0; margin:0; padding:0 0 24px 22px; border-left:1px solid #65506c55; }
#profileModal .profile-directory h2 { font-size:18px; font-weight:500; letter-spacing:.08em; margin:0 0 20px; text-shadow:none; }
#profileModal .profile-directory input { min-height:46px; padding:12px; font-size:16px; border:1px solid #66516f; border-radius:6px; background:#17121d; }
#profileModal .directory-regions { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin:12px 0 22px; }
#profileModal .directory-regions button { box-sizing:border-box; min-height:44px; padding:9px 6px; font-size:14px; line-height:1.35; background:#1c1523; border-color:#514058; border-radius:5px; overflow-wrap:anywhere; }
#profileModal .directory-regions button:last-child { grid-column:1 / -1; }
#profileModal .directory-regions button[aria-pressed=true] { background:#48304f; border-color:#bc8cca; }
#profileModal .directory-result-count { font-size:14px; line-height:1.5; margin:0 0 14px; }
#profileModal .directory-result { border:0; border-bottom:1px solid #65506c44; border-radius:0; background:transparent; padding:12px 0; gap:12px; min-width:0; }
#profileModal .directory-result img { width:70px; height:88px; flex:0 0 70px; border-radius:5px; }
#profileModal .directory-result strong { font-size:18px; font-weight:500; text-shadow:none; }
#profileModal .directory-result small { font-size:14px; opacity:.72; }
#profileModal .directory-results > p { padding:20px 0; margin:0; font-size:15px; line-height:1.7; opacity:.7; }
#profileModal .directory-result:hover { background:#23182e; }
#profileModal :is(button,input):focus-visible { outline:2px solid #d4a8df; outline-offset:3px; }
.shell :is(h1,h2,h3,p,a,.role,.meta,.count,.card-country) { text-shadow:0 0 18px #b36ce327 !important; }
.shell .card { border-radius:12px; }
@media (min-width:761px) and (max-width:1199px) {
  #profileModal .modal-card { grid-template-columns:minmax(0,1.12fr) minmax(0,1fr) !important; }
  #profileModal .profile-directory { grid-column:1 / -1; grid-row:2; padding:24px 0 0; border-left:0; border-top:1px solid #65506c55; }
  #profileModal .directory-results { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 28px; }
}
@media (max-width:760px) {
  #profileModal .modal-card { display:flex !important; flex-direction:column; gap:26px !important; padding:62px 18px 32px !important; min-height:100dvh !important; }
  #profileModal .modal-main,#profileModal .modal-info,#profileModal .profile-directory { width:100% !important; min-width:0; box-sizing:border-box; }
  #profileModal .modal-info .below-gallery { display:flex !important; gap:10px !important; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; padding-bottom:12px; margin:0 0 22px !important; }
  #profileModal .modal-info .below-gallery img { flex:0 0 44%; width:44% !important; max-height:300px !important; scroll-snap-align:start; }
  #profileModal .modal-info #modalName { font-size:40px !important; }
  #profileModal .modal-info .modal-role { font-size:16px; }
  #profileModal .profile-directory { padding:24px 0 0; border-left:0; border-top:1px solid #65506c55; }
  .admin-panel { width:calc(100% - 24px) !important; box-sizing:border-box; max-height:90dvh; padding:22px 18px; }
  .admin-panel :is(input,textarea,select) { font-size:16px; }
}
@media (prefers-reduced-motion:reduce) { #profileModal * { transition:none !important; scroll-behavior:auto !important; } }

/* Person first: one photo column, one biography column, discovery afterwards. */
#profileModal .modal-card { max-width:1280px; grid-template-columns:minmax(0,1.12fr) minmax(0,1fr) !important; column-gap:clamp(24px,4vw,56px) !important; }
#profileModal .profile-directory { grid-column:1 / -1; grid-row:2; padding:28px 0 0; border-left:0; border-top:1px solid #65506c55; }
#profileModal #modalBelowGallery { position:static !important; display:grid !important; width:100% !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:10px !important; margin:20px 0 0 !important; }
#profileModal #modalBelowGallery:empty { display:none !important; }
#profileModal #modalBelowGallery img { width:100% !important; min-width:0; min-height:0 !important; max-height:280px !important; aspect-ratio:auto !important; object-fit:contain !important; border-radius:8px !important; background:#17111d !important; }
#profileModal .modal-info .modal-role { line-height:1.7 !important; }
#profileModal .profile-qr { display:flex; align-items:center; gap:20px; width:100%; box-sizing:border-box; margin:28px 0 0; padding:20px; border:1px solid #9570a3; border-radius:12px; background:linear-gradient(120deg,#2c1c37,#16101e); }
#profileModal .profile-qr[hidden] { display:none !important; }
#profileModal .profile-qr img { display:block; width:164px; height:164px; flex:0 0 164px; box-sizing:border-box; padding:12px; background:white; object-fit:contain; border-radius:4px; }
#profileModal .profile-qr div { min-width:0; }
#profileModal .profile-qr h4 { font-size:20px; font-weight:500; margin:0 0 10px; }
#profileModal .profile-qr p { font-size:15px; line-height:1.7; margin:0; white-space:pre-wrap; overflow-wrap:anywhere; }
#profileModal .directory-results { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px 28px; }
#profileModal .discovery-filters { margin:0 0 20px; max-width:620px; }
#profileModal .discovery-filters summary { min-height:44px; line-height:44px; cursor:pointer; font-size:15px; }
#profileModal .discovery-filters summary:focus-visible { outline:2px solid #d4a8df; }
.qr-editor { border-top:1px solid #65506c88; margin:22px 0; padding-top:18px; }
.qr-editor h4 { margin:0 0 10px; font-size:20px; }
.qr-editor p { font-size:14px; line-height:1.6; }
.qr-editor label { display:block; margin-top:14px; }
.qr-editor img { display:block; width:160px; height:160px; padding:12px; background:white; object-fit:contain; margin:12px 0; }
.qr-editor img[hidden] { display:none; }
.qr-editor textarea { box-sizing:border-box; width:100%; font:inherit; padding:12px; margin:8px 0; background:#15101e; color:#f4eaff; border:1px solid #826299; border-radius:8px; }
@media (min-width:761px) and (max-width:1000px) { #profileModal .profile-qr { flex-direction:column; align-items:flex-start; } }
@media (max-width:760px) {
  #profileModal #modalBelowGallery { display:flex !important; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; margin:0 !important; padding-bottom:12px; }
  #profileModal #modalBelowGallery img { flex:0 0 44%; width:44% !important; max-height:300px !important; scroll-snap-align:start; }
  #profileModal .profile-qr { gap:16px; padding:16px; }
  #profileModal .profile-qr img { width:144px; height:144px; flex-basis:144px; }
  #profileModal .directory-results { grid-template-columns:1fr; }
}
@media (max-width:380px) { #profileModal .profile-qr { flex-direction:column; align-items:center; text-align:center; } }

/* Mobile-only reading order; keep the desktop columns and DOM intact. */
@media (max-width:760px) {
  #profileModal .modal-main,
  #profileModal .modal-info,
  #profileModal .modal-info.has-copy { display:contents !important; }
  #profileModal .modal-card { gap:18px !important; }
  #profileModal #modalGallery { order:0; }
  #profileModal #modalBelowGallery { order:1; }
  #profileModal #modalName { order:2; }
  #profileModal .modal-country { order:3; margin:0 !important; }
  #profileModal #modalRole { order:4; }
  #profileModal #modalCopy { order:5; margin:6px 0 0; padding:18px; border:1px solid #73517e; border-radius:10px; background:#201428; }
  #profileModal .profile-qr { order:6; margin:0; }
  #profileModal #modalMainCopy { order:7; width:100%; box-sizing:border-box; }
  #profileModal #modalMainExtra { order:8; width:100%; box-sizing:border-box; }
  #profileModal .profile-directory { order:9; }
  .shell #grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px; }
  .shell #grid > .feature { grid-column:1 / -1 !important; min-width:0; }
  .shell #grid > .card:not(.feature) { min-width:0; width:auto; box-sizing:border-box; padding:12px; }
  .shell #grid .card-photo { width:100%; min-height:0; height:auto; aspect-ratio:3/4; border-radius:8px; }
  .shell #grid .card h3 { font-size:20px; overflow-wrap:anywhere; }
  .shell #grid .card .meta { margin-top:14px; flex-wrap:wrap; }
  .shell #grid .card-country { font-size:14px; flex-wrap:wrap; }
}
@media (max-width:359px) { .shell #grid { grid-template-columns:minmax(0,1fr) !important; } }