:root{
  --bg:#000;
  --panel:#070707;
  --line:#171717;
  --text:#f4f4f4;
  --muted:#666;
  --font:"Bodoni Moda", Georgia, serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font)}
body{min-height:100vh}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
button{cursor:pointer}

.site-header{
  text-align:center;
  padding:92px 20px 62px;
}
.brand{
  display:inline-block;
  font-size:42px;
  font-weight:500;
  letter-spacing:.16em;
}
.nav{
  position:relative;
  margin-top:30px;
  display:flex;
  justify-content:center;
  gap:22px;
  flex-wrap:wrap;
}
.nav a,.nav-button{
  padding:0;
  border:0;
  background:none;
  color:#747474;
  font-size:10px;
  letter-spacing:.12em;
}
.nav a:hover,.nav-button:hover{color:#fff}

.mood-popover{
  position:absolute;
  top:30px;
  left:50%;
  width:min(300px,88vw);
  transform:translateX(-50%) translateY(-7px);
  background:#080808;
  border:1px solid #1b1b1b;
  border-radius:18px;
  padding:18px 20px;
  opacity:0;
  pointer-events:none;
  transition:.16s ease;
  z-index:20;
  box-shadow:0 20px 60px rgba(0,0,0,.85);
}
.mood-popover.open{
  opacity:1;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.mood-popover::before{
  content:"";
  position:absolute;
  width:12px;height:12px;
  top:-7px;left:50%;
  transform:translateX(-50%) rotate(45deg);
  background:#080808;
  border-left:1px solid #1b1b1b;
  border-top:1px solid #1b1b1b;
}
.mood-kicker{
  color:#4c4c4c;
  font-size:8px;
  letter-spacing:.14em;
  margin-bottom:8px;
}
.mood-text{
  font-size:19px;
  line-height:1.35;
}

.feed{
  width:min(1650px,calc(100% - 44px));
  margin:0 auto;
  columns:5 260px;
  column-gap:24px;
  padding-bottom:100px;
}
.post{
  break-inside:avoid;
  margin:0 0 26px;
}
.post-media,
.post-video{
  display:block;
  width:100%;
  height:auto;
  background:#050505;
}
.post-text,
.post-quote{
  min-height:220px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  border:1px solid #101010;
  padding:28px;
  line-height:1.55;
  background:#020202;
}
.post-text{font-size:19px}
.post-quote{font-size:24px}
.post-date{
  margin-top:10px;
  text-align:center;
  color:#5d5d5d;
  font-size:9px;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.empty-state{
  text-align:center;
  color:#444;
  padding:100px 20px;
}
.footer{
  text-align:center;
  color:#2f2f2f;
  font-size:9px;
  letter-spacing:.1em;
  padding:30px 20px 60px;
  border-top:1px solid #0b0b0b;
}

/* ADMIN */
.admin-body{background:#000}
.admin-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:min(1000px,calc(100% - 32px));
  margin:0 auto;
  padding:40px 0 20px;
  color:#666;
  font-size:10px;
  letter-spacing:.12em;
}
.admin-header .brand{
  color:#fff;
  font-size:24px;
}
.admin-shell{
  width:min(1000px,calc(100% - 32px));
  margin:0 auto;
  padding-bottom:80px;
}
.panel{
  background:var(--panel);
  border:1px solid var(--line);
  padding:24px;
  margin:18px 0;
}
.panel h1,.panel h2{margin:0 0 18px;font-weight:500}
.panel h1{font-size:30px}
.panel h2{font-size:24px}
.muted,.message{color:var(--muted);font-size:13px}
.form-grid{display:grid;gap:16px}
label{
  display:grid;
  gap:7px;
  color:#777;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
input,textarea,select{
  width:100%;
  background:#020202;
  color:#eee;
  border:1px solid #1d1d1d;
  padding:12px 13px;
  outline:none;
}
input:focus,textarea:focus,select:focus{border-color:#444}
.primary,.ghost{
  border:1px solid #272727;
  padding:11px 14px;
  letter-spacing:.1em;
  font-size:10px;
}
.primary{
  background:#eee;
  color:#000;
  border-color:#eee;
}
.ghost{
  background:#070707;
  color:#888;
}
.dashboard-top,.dashboard-actions,.panel-heading-row,.counter-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.dashboard-top h1{font-size:34px;font-weight:500}
.counter-row span{color:#555;font-size:10px}
.admin-posts{display:grid;gap:12px}
.admin-post{
  display:grid;
  grid-template-columns:80px 1fr auto;
  gap:14px;
  align-items:center;
  border-top:1px solid #141414;
  padding-top:12px;
}
.admin-thumb{
  width:80px;
  height:80px;
  object-fit:cover;
  background:#020202;
  border:1px solid #111;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:8px;
  color:#777;
  font-size:10px;
  overflow:hidden;
}
.admin-thumb video,.admin-thumb img{width:100%;height:100%;object-fit:cover}
.admin-meta{color:#aaa;font-size:13px}
.admin-meta small{display:block;color:#555;margin-top:5px}
.admin-edit{
  display:flex;
  gap:8px;
  align-items:center;
}
.admin-edit input{width:145px;padding:8px}
.danger{
  background:none;
  border:1px solid #3a1818;
  color:#9a5151;
  padding:8px 10px;
  font-size:9px;
  letter-spacing:.08em;
}
.save-date{
  background:none;
  border:1px solid #272727;
  color:#888;
  padding:8px 10px;
  font-size:9px;
  letter-spacing:.08em;
}

@media(max-width:700px){
  .site-header{padding:64px 16px 42px}
  .brand{font-size:28px}
  .feed{width:calc(100% - 24px);columns:2 150px;column-gap:12px}
  .post{margin-bottom:18px}
  .admin-post{grid-template-columns:64px 1fr}
  .admin-thumb{width:64px;height:64px}
  .admin-edit{grid-column:1/-1}
}
@media(max-width:460px){
  .feed{columns:1}
}


/* TEXT + QUOTE UPDATE */
.post-text{
  min-height:0;
  display:block;
  padding:8px 2px 2px;
  border:0;
  background:transparent;
  color:#d8d8d8;
  font-size:18px;
  line-height:1.65;
  text-align:left;
}
.post-text p{margin:0 0 1.15em}
.post-text p:last-child{margin-bottom:0}

.post-quote{
  min-height:190px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:center;
  padding:28px 18px 18px;
  border:0;
  background:transparent;
}
.quote-copy{
  font-size:27px;
  line-height:1.4;
  color:#f0f0f0;
}
.quote-author{
  margin-top:18px;
  color:#777;
  font-size:14px;
}


/* CLICKABLE POSTS */
.post{
  cursor:pointer;
}
.post:focus{
  outline:1px solid #2a2a2a;
  outline-offset:5px;
}

/* INDIVIDUAL POST PAGE */
.detail-header{
  width:min(1100px,calc(100% - 36px));
  margin:0 auto;
  padding:42px 0 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.detail-brand{
  font-size:24px;
  letter-spacing:.14em;
}
.detail-back{
  color:#666;
  font-size:9px;
  letter-spacing:.12em;
}
.detail-back:hover{color:#fff}

.post-detail{
  width:min(760px,calc(100% - 32px));
  margin:40px auto 100px;
  text-align:center;
}
.detail-media{
  display:block;
  width:100%;
  max-height:78vh;
  object-fit:contain;
  background:#000;
}
.detail-description{
  margin:26px auto 0;
  max-width:650px;
  text-align:center;
  color:#d4d4d4;
  font-size:17px;
  line-height:1.7;
}
.detail-description p{
  margin:0 0 1em;
}
.detail-date{
  margin-top:22px;
  color:#666;
  font-size:10px;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.detail-text{
  max-width:650px;
  margin:0 auto;
  text-align:left;
  color:#ddd;
  font-size:21px;
  line-height:1.7;
}
.detail-text p{
  margin:0 0 1.2em;
}
.detail-quote{
  max-width:700px;
  margin:80px auto 0;
  font-size:38px;
  line-height:1.4;
}
.detail-quote-author{
  margin-top:22px;
  color:#777;
  font-size:16px;
}
.detail-loading,.detail-error{
  padding:100px 0;
  color:#555;
  font-size:14px;
}
@media(max-width:700px){
  .detail-header{padding-top:28px}
  .detail-brand{font-size:19px}
  .post-detail{margin-top:22px}
  .detail-description{font-size:16px}
  .detail-quote{font-size:29px;margin-top:40px}
}


/* EDIT POST */
.edit-button{
  background:none;
  border:1px solid #383838;
  color:#d3d3d3;
  padding:8px 10px;
  font-size:9px;
  letter-spacing:.08em;
}
.edit-button:hover{
  border-color:#777;
  color:#fff;
}

.edit-dialog{
  width:min(680px,calc(100% - 28px));
  max-height:90vh;
  overflow:auto;
  padding:0;
  border:1px solid #222;
  background:#050505;
  color:#eee;
}
.edit-dialog::backdrop{
  background:rgba(0,0,0,.82);
}
.edit-post-form{
  display:grid;
  gap:16px;
  padding:28px;
}
.edit-dialog-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid #151515;
  padding-bottom:18px;
}
.edit-dialog-head h2{
  margin:4px 0 0;
  font-size:30px;
  font-weight:500;
}
.edit-kicker{
  color:#555;
  font-size:9px;
  letter-spacing:.13em;
}
.edit-close{
  background:none;
  border:0;
  color:#777;
  font-size:28px;
  line-height:1;
  padding:0 4px;
}
.edit-close:hover{color:#fff}
.edit-note{
  color:#454545;
  font-size:9px;
  text-transform:none;
  letter-spacing:0;
}
.edit-dialog-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:4px;
}


/* INDIVIDUAL POST NAVIGATION ARROWS */
.post-nav-arrow{
  position:fixed;
  top:50%;
  transform:translateY(-50%);
  z-index:30;
  width:42px;
  height:60px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.5);
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.12);
  text-decoration:none;
  font-family:Arial,Helvetica,sans-serif;
  font-size:40px;
  line-height:1;
  transition:color .15s ease,border-color .15s ease,background .15s ease;
}
.post-nav-arrow:hover{
  color:#fff;
  border-color:rgba(255,255,255,.3);
  background:rgba(255,255,255,.03);
}
.post-nav-left{left:22px}
.post-nav-right{right:22px}

@media(max-width:760px){
  .post-nav-arrow{
    width:34px;
    height:48px;
    font-size:32px;
  }
  .post-nav-left{left:6px}
  .post-nav-right{right:6px}
}


/* ASK + SUBMIT PUBLIC PAGES */
.form-page-header{
  width:min(980px,calc(100% - 32px));
  margin:0 auto;
  padding:42px 0 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.form-page-brand{
  font-size:26px;
  letter-spacing:.14em;
}
.form-page-back{
  color:#666;
  font-size:9px;
  letter-spacing:.11em;
}
.visitor-form-shell{
  width:min(700px,calc(100% - 32px));
  margin:45px auto 100px;
}
.visitor-form-card{
  border:1px solid #171717;
  padding:30px;
  background:#030303;
}
.visitor-kicker{
  color:#555;
  font-size:9px;
  letter-spacing:.15em;
}
.visitor-form-card h1{
  font-size:36px;
  font-weight:500;
  margin:8px 0 10px;
}
.visitor-form-card > p{
  color:#777;
  line-height:1.6;
  font-size:14px;
}
.visitor-form{
  display:grid;
  gap:18px;
  margin-top:28px;
}
.visitor-form label{
  font-size:10px;
  letter-spacing:.08em;
  color:#777;
}
.choice-row{
  display:flex !important;
  grid-template-columns:none !important;
  align-items:center;
  gap:10px;
}
.choice-row input{
  width:auto;
}
.visitor-counter{
  margin-top:-12px;
  text-align:right;
  color:#444;
  font-size:9px;
}
.visitor-submit{
  background:#eee;
  color:#000;
  border:1px solid #eee;
  padding:13px;
  font-size:10px;
  letter-spacing:.12em;
}
.visitor-message{
  min-height:20px;
  color:#8a8a8a;
  font-size:13px;
}
.permission-fieldset{
  border:1px solid #1b1b1b;
  padding:16px;
  display:grid;
  gap:10px;
}
.permission-fieldset legend{
  color:#777;
  font-size:10px;
  letter-spacing:.08em;
  padding:0 7px;
}
.permission-option{
  display:flex !important;
  grid-template-columns:none !important;
  gap:11px;
  align-items:flex-start;
  padding:12px;
  border:1px solid #121212;
  cursor:pointer;
}
.permission-option input{
  width:auto;
  margin-top:3px;
}
.permission-option span{
  display:grid;
  gap:3px;
}
.permission-option strong{
  color:#ddd;
  font-size:12px;
  font-weight:500;
  text-transform:none;
  letter-spacing:0;
}
.permission-option small{
  color:#555;
  font-size:11px;
  line-height:1.45;
  text-transform:none;
  letter-spacing:0;
}

/* ADMIN INBOX */
.inbox-tabs{
  display:flex;
  gap:8px;
  margin:20px 0;
}
.inbox-tab{
  background:#050505;
  border:1px solid #1b1b1b;
  color:#666;
  padding:9px 12px;
  font-size:9px;
  letter-spacing:.1em;
}
.inbox-tab.active{
  color:#fff;
  border-color:#444;
}
.inbox-list{
  display:grid;
  gap:16px;
}
.inbox-empty{
  color:#555;
  padding:18px 0;
  font-size:13px;
}
.inbox-card{
  border:1px solid #151515;
  padding:18px;
  background:#020202;
}
.inbox-card-top{
  display:flex;
  justify-content:space-between;
  gap:15px;
  margin-bottom:15px;
}
.inbox-person{
  color:#ddd;
  font-size:15px;
}
.inbox-time{
  color:#4e4e4e;
  font-size:10px;
}
.inbox-question{
  font-size:21px;
  line-height:1.5;
  margin-bottom:16px;
}
.inbox-answer{
  width:100%;
  background:#000;
  border:1px solid #1d1d1d;
  color:#eee;
  padding:12px;
}
.inbox-actions{
  margin-top:14px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.submission-preview{
  display:block;
  max-width:360px;
  max-height:360px;
  object-fit:contain;
  margin:0 0 14px;
  background:#000;
}
.submission-caption{
  color:#ccc;
  line-height:1.6;
  margin-bottom:12px;
}
.submission-permission{
  display:inline-block;
  padding:7px 9px;
  border:1px solid #222;
  font-size:9px;
  letter-spacing:.08em;
}
.submission-permission.private{color:#a56a6a}
.submission-permission.public_normal,
.submission-permission.public_submission{color:#7a997a}

/* PUBLISHED ASK + SUBMISSION POSTS */
.feed-ask-post{
  padding:14px 4px;
}
.feed-asker{
  color:#666;
  font-size:11px;
  margin-bottom:10px;
}
.feed-question{
  font-size:20px;
  line-height:1.45;
  margin-bottom:18px;
}
.feed-answer{
  color:#ddd;
  font-size:17px;
  line-height:1.6;
}
.feed-submission-label,
.detail-submission-label{
  margin-top:10px;
  text-align:center;
  color:#555;
  font-size:9px;
  letter-spacing:.12em;
}
.detail-ask{
  max-width:680px;
  margin:70px auto 0;
}
.detail-asker{
  color:#666;
  font-size:13px;
  margin-bottom:15px;
}
.detail-question{
  font-size:30px;
  line-height:1.4;
  margin-bottom:28px;
}
.detail-answer{
  color:#ddd;
  font-size:20px;
  line-height:1.7;
}


/* CLEAN SUBMISSION ATTRIBUTION */
.feed-submission-meta{
  margin-top:12px;
  text-align:center;
}
.feed-submission-label{
  margin-top:0;
  color:#666;
  font-size:9px;
  letter-spacing:.15em;
}
.feed-submission-caption{
  margin-top:9px;
  color:#ddd;
  font-size:15px;
  line-height:1.5;
  font-style:italic;
}
.feed-submission-by{
  margin-top:5px;
  color:#777;
  font-size:11px;
}
.detail-submission-meta{
  max-width:680px;
  margin:18px auto 0;
  text-align:center;
}
.detail-submission-label{
  margin-top:0;
  color:#666;
  font-size:9px;
  letter-spacing:.15em;
}
.detail-submission-caption{
  margin-top:12px;
  color:#ddd;
  font-size:18px;
  line-height:1.6;
  font-style:italic;
}
.detail-submission-by{
  margin-top:6px;
  color:#777;
  font-size:12px;
}


/* ARCHIVE */
.archive-header{
  width:min(1180px,calc(100% - 40px));
  margin:0 auto;
  padding:46px 0 24px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
}
.archive-brand{
  color:#eee;
  text-decoration:none;
  font-size:30px;
  letter-spacing:.14em;
}
.archive-nav{
  display:flex;
  gap:22px;
}
.archive-nav a{
  color:#777;
  text-decoration:none;
  font-size:9px;
  letter-spacing:.12em;
}
.archive-nav a:hover{color:#fff}
.archive-shell{
  width:min(1180px,calc(100% - 40px));
  margin:46px auto 110px;
}
.archive-title-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  padding-bottom:22px;
  border-bottom:1px solid #151515;
}
.archive-kicker{
  color:#555;
  font-size:9px;
  letter-spacing:.16em;
}
.archive-title-row h1{
  margin:5px 0 0;
  font-size:42px;
  font-weight:500;
}
.archive-count{
  color:#555;
  font-size:9px;
  letter-spacing:.12em;
  padding-bottom:7px;
}
.archive-loading{
  padding:40px 0;
  color:#666;
}
.archive-month{
  margin-top:48px;
}
.archive-month-heading{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:14px;
}
.archive-month-heading h2{
  margin:0;
  font-size:16px;
  font-weight:500;
  letter-spacing:.08em;
}
.archive-month-heading span{
  color:#444;
  font-size:8px;
  letter-spacing:.12em;
}
.archive-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
}
.archive-tile{
  position:relative;
  display:block;
  aspect-ratio:1 / 1;
  overflow:hidden;
  background:#080808;
  border:1px solid #111;
  color:#eee;
  text-decoration:none;
}
.archive-tile img,
.archive-tile video{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .22s ease,opacity .22s ease;
}
.archive-tile:hover img,
.archive-tile:hover video{
  transform:scale(1.025);
  opacity:.82;
}
.archive-tile-date{
  position:absolute;
  left:8px;
  bottom:7px;
  z-index:2;
  padding:4px 5px;
  background:rgba(0,0,0,.72);
  color:#aaa;
  font-family:Arial,Helvetica,sans-serif;
  font-size:7px;
  letter-spacing:.08em;
}
.archive-tile-badge{
  position:absolute;
  left:8px;
  top:8px;
  z-index:2;
  padding:4px 5px;
  background:rgba(0,0,0,.76);
  color:#bbb;
  font-family:Arial,Helvetica,sans-serif;
  font-size:7px;
  letter-spacing:.11em;
}
.archive-text-tile{
  height:100%;
  padding:17px 15px 28px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.archive-text-type{
  margin-bottom:9px;
  color:#555;
  font-family:Arial,Helvetica,sans-serif;
  font-size:7px;
  letter-spacing:.14em;
}
.archive-text-main{
  font-size:16px;
  line-height:1.35;
}
.archive-text-secondary{
  margin-top:9px;
  color:#777;
  font-size:11px;
  line-height:1.4;
}
.archive-quote-preview{
  text-align:center;
  font-style:italic;
}
.archive-tile:hover .archive-text-main{color:#fff}

@media(max-width:900px){
  .archive-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:650px){
  .archive-header{
    align-items:flex-start;
    flex-direction:column;
    padding-top:28px;
  }
  .archive-brand{font-size:23px}
  .archive-shell{margin-top:25px}
  .archive-title-row h1{font-size:34px}
  .archive-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:5px;
  }
  .archive-text-tile{padding:10px 9px 24px}
  .archive-text-main{font-size:12px}
  .archive-text-secondary{font-size:9px}
}


/* ABOUT PAGE */
.about-header{
  width:min(1180px,calc(100% - 40px));
  margin:0 auto;
  padding:46px 0 24px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
}
.about-brand{
  color:#eee;
  text-decoration:none;
  font-size:30px;
  letter-spacing:.14em;
}
.about-nav{
  display:flex;
  gap:22px;
}
.about-nav a{
  color:#777;
  text-decoration:none;
  font-size:9px;
  letter-spacing:.12em;
}
.about-nav a:hover{color:#fff}
.about-shell{
  width:min(820px,calc(100% - 40px));
  min-height:68vh;
  margin:120px auto 100px;
}
.about-kicker{
  color:#555;
  font-size:9px;
  letter-spacing:.17em;
  margin-bottom:20px;
}
.about-shell h1{
  max-width:760px;
  margin:0;
  font-size:52px;
  font-weight:400;
  line-height:1.12;
}
.about-shell p{
  max-width:650px;
  margin:42px 0 0;
  color:#8a8a8a;
  font-size:18px;
  line-height:1.75;
}
.about-credit{
  margin-top:80px;
  color:#5f5f5f;
  font-size:13px;
  font-style:italic;
}
.about-admin-form{
  display:grid;
  gap:16px;
  margin-top:20px;
}
.about-admin-form label{
  display:grid;
  gap:7px;
  color:#777;
  font-size:10px;
  letter-spacing:.08em;
}
.about-admin-form textarea,
.about-admin-form input{
  width:100%;
  background:#000;
  border:1px solid #1d1d1d;
  color:#eee;
  padding:12px;
  font:inherit;
  line-height:1.5;
}
@media(max-width:650px){
  .about-header{
    align-items:flex-start;
    flex-direction:column;
    padding-top:28px;
  }
  .about-brand{font-size:23px}
  .about-shell{margin-top:70px}
  .about-shell h1{font-size:38px}
  .about-shell p{font-size:16px;margin-top:32px}
  .about-credit{margin-top:60px}
}


/* =========================================================
   HOUSE OF ZELAYA — MOBILE POLISH
   Keeps desktop intact; improves phones/tablets.
   ========================================================= */

html{
  -webkit-text-size-adjust:100%;
}
img,video{
  max-width:100%;
}
button,a,input,textarea,select{
  -webkit-tap-highlight-color:transparent;
}

/* Tablet */
@media(max-width:900px){
  body{
    overflow-x:hidden;
  }

  /* Main site header/navigation */
  .site-header,
  header.site-header{
    width:calc(100% - 32px);
    margin-left:auto;
    margin-right:auto;
  }

  /* Individual post page */
  .detail-shell,
  .post-detail,
  .post-detail-shell{
    max-width:calc(100vw - 44px);
  }

  /* Admin */
  .admin-shell,
  .admin-wrap,
  .dashboard{
    width:calc(100% - 28px);
    max-width:none;
  }
}

/* Phones */
@media(max-width:650px){
  body{
    min-width:0;
  }

  /* General form controls: prevent iPhone auto-zoom */
  input,
  textarea,
  select{
    font-size:16px !important;
  }

  button{
    min-height:42px;
  }

  /* Main public header */
  .site-header,
  header.site-header{
    width:calc(100% - 28px);
    padding-top:28px;
    padding-bottom:18px;
  }

  .site-title,
  .brand,
  .logo{
    max-width:100%;
    line-height:1.05;
  }

  nav,
  .nav,
  .site-nav{
    flex-wrap:wrap;
    row-gap:10px;
    column-gap:15px;
  }

  nav a,
  .nav a,
  .site-nav a{
    padding:4px 0;
  }

  /* Home masonry/feed */
  .feed,
  #feed{
    width:calc(100% - 24px);
    margin-left:auto;
    margin-right:auto;
  }

  .post,
  .post-card{
    max-width:100%;
  }

  .post-media{
    width:100%;
    height:auto;
  }

  .feed-ask-post{
    padding-left:2px;
    padding-right:2px;
  }

  .feed-question{
    font-size:18px;
  }

  .feed-answer{
    font-size:15px;
  }

  .feed-submission-caption{
    font-size:14px;
  }

  /* Individual post */
  .detail-shell,
  .post-detail,
  .post-detail-shell{
    width:calc(100% - 34px);
    max-width:none;
    margin-left:auto;
    margin-right:auto;
  }

  .detail-media,
  .detail-shell img,
  .post-detail img,
  .detail-shell video,
  .post-detail video{
    max-width:100%;
    height:auto;
  }

  .detail-description{
    padding-left:8px;
    padding-right:8px;
    line-height:1.65;
  }

  .detail-ask{
    width:calc(100% - 22px);
    margin-top:48px;
  }

  .detail-question{
    font-size:25px;
  }

  .detail-answer{
    font-size:18px;
  }

  /* Keep arrows easy to tap without dominating the image */
  .post-nav-arrow{
    width:36px;
    height:52px;
    font-size:31px;
    background:rgba(0,0,0,.48);
    backdrop-filter:blur(3px);
  }
  .post-nav-left{left:4px}
  .post-nav-right{right:4px}

  /* Ask + Submit */
  .form-page-header{
    width:calc(100% - 28px);
    padding-top:28px;
    align-items:flex-start;
    gap:18px;
  }

  .form-page-brand{
    font-size:21px;
    line-height:1.1;
  }

  .visitor-form-shell{
    width:calc(100% - 24px);
    margin-top:24px;
    margin-bottom:70px;
  }

  .visitor-form-card{
    padding:22px 17px;
  }

  .visitor-form-card h1{
    font-size:31px;
  }

  .visitor-form-card > p{
    font-size:13px;
  }

  .permission-fieldset{
    padding:12px;
  }

  .permission-option{
    padding:12px 10px;
  }

  .visitor-submit{
    width:100%;
    min-height:48px;
  }

  /* Archive */
  .archive-header{
    width:calc(100% - 28px);
    gap:18px;
  }

  .archive-nav{
    flex-wrap:wrap;
    gap:15px;
  }

  .archive-shell{
    width:calc(100% - 24px);
    margin-bottom:75px;
  }

  .archive-title-row{
    align-items:flex-end;
  }

  .archive-title-row h1{
    font-size:33px;
  }

  .archive-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:4px;
  }

  .archive-tile-date{
    left:5px;
    bottom:5px;
    font-size:6px;
  }

  .archive-tile-badge{
    left:5px;
    top:5px;
    font-size:6px;
  }

  .archive-text-type{
    font-size:6px;
    margin-bottom:6px;
  }

  .archive-text-main{
    font-size:11px;
    line-height:1.25;
  }

  .archive-text-secondary{
    display:none;
  }

  /* About */
  .about-header{
    width:calc(100% - 28px);
    gap:18px;
  }

  .about-nav{
    flex-wrap:wrap;
    gap:15px;
  }

  .about-shell{
    width:calc(100% - 34px);
    min-height:62vh;
    margin-top:58px;
    margin-bottom:70px;
  }

  .about-shell h1{
    font-size:36px;
    line-height:1.14;
  }

  .about-shell p{
    font-size:16px;
    line-height:1.7;
  }

  /* Admin dashboard */
  .panel{
    padding-left:15px;
    padding-right:15px;
  }

  .panel-heading-row{
    align-items:flex-start;
    gap:10px;
    flex-wrap:wrap;
  }

  .inbox-card{
    padding:14px;
  }

  .inbox-card-top{
    align-items:flex-start;
  }

  .inbox-question{
    font-size:18px;
  }

  .submission-preview{
    width:100%;
    max-width:100%;
    max-height:none;
  }

  .inbox-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .inbox-actions button{
    width:100%;
  }

  .inbox-tabs{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  .inbox-tab{
    white-space:nowrap;
  }

  .about-admin-form button{
    width:100%;
  }

  dialog{
    width:calc(100% - 24px) !important;
    max-width:none !important;
    max-height:90vh;
    overflow:auto;
  }
}

/* Small phones */
@media(max-width:390px){
  .archive-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .visitor-form-card{
    padding-left:14px;
    padding-right:14px;
  }

  .about-shell h1{
    font-size:32px;
  }
}


/* MOBILE NAV + VIDEO PREVIEW FIX */
.post-video,
.detail-media{
  object-fit:contain;
}

@media(max-width:650px){
  .site-header{
    padding-top:38px;
    padding-bottom:34px;
  }

  .brand{
    font-size:clamp(29px,8.5vw,38px);
    letter-spacing:.12em;
    white-space:nowrap;
  }

  .nav{
    width:min(370px,100%);
    margin:27px auto 0;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px 8px;
    align-items:center;
    justify-items:center;
  }

  .nav a,
  .nav-button{
    width:100%;
    min-height:0;
    padding:3px 0;
    text-align:center;
    font-size:9px;
    line-height:1.25;
    letter-spacing:.105em;
    white-space:nowrap;
  }

  .mood-popover{
    position:fixed;
    top:auto;
    left:16px;
    right:16px;
    bottom:24px;
    width:auto;
    transform:translateY(12px);
    border-radius:16px;
    padding:18px 19px;
  }

  .mood-popover.open{
    transform:translateY(0);
  }

  .mood-popover::before{
    display:none;
  }

  .mood-text{
    font-size:18px;
  }

  .post-video{
    width:100%;
    min-height:240px;
    max-height:78vh;
    background:#050505;
  }
}

@media(max-width:390px){
  .brand{
    font-size:clamp(27px,8.2vw,33px);
    letter-spacing:.105em;
  }

  .nav{
    gap:13px 5px;
  }

  .nav a,
  .nav-button{
    font-size:8.3px;
    letter-spacing:.085em;
  }
}


/* MENU ORDER + EDITABLE CURRENT MOOD COLOR */
.mood-nav-button{
  color:var(--mood-button-color,#fff) !important;
  transition:color .18s ease,text-shadow .18s ease,opacity .18s ease;
}
.mood-nav-button:hover{
  color:var(--mood-button-color,#fff) !important;
  opacity:1;
}

.mood-color-editor{
  margin:14px 0 17px;
  padding:14px;
  border:1px solid #171717;
  background:#020202;
}
.mood-color-editor > label{
  display:block;
  margin-bottom:9px;
  color:#777;
  font-size:10px;
  letter-spacing:.08em;
}
.mood-color-row{
  display:grid;
  grid-template-columns:50px minmax(110px,170px) auto;
  gap:8px;
  align-items:center;
}
#moodColor{
  width:50px;
  height:42px;
  padding:2px;
  border:1px solid #222;
  background:#000;
  cursor:pointer;
}
#moodColorHex{
  width:100%;
  height:42px;
  background:#000;
  border:1px solid #222;
  color:#eee;
  padding:0 10px;
  font-family:Arial,Helvetica,sans-serif;
}
.mood-color-preview-row{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:12px;
}
.mood-color-preview{
  font-size:10px;
  letter-spacing:.12em;
}

@media(max-width:650px){
  /* Exact requested mobile order:
     HOME | ABOUT | ASK
     SUBMIT | ARCHIVE | CURRENT MOOD */
  .nav{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .mood-color-row{
    grid-template-columns:50px 1fr;
  }

  .mood-color-row #resetMoodColor{
    grid-column:1 / -1;
    width:100%;
  }
}


/* CENTER CURRENT MOOD BUBBLE ON MOBILE */
@media(max-width:650px){
  .mood-popover{
    position:fixed;
    top:50%;
    left:50%;
    right:auto;
    bottom:auto;
    width:min(360px,calc(100vw - 36px));
    margin:0;
    transform:translate(-50%,-50%) scale(.97);
    z-index:1000;
  }

  .mood-popover.open{
    transform:translate(-50%,-50%) scale(1);
  }
}


/* VIDEO CAPTIONS + CENTERED PLAY BUTTON */
.video-preview-wrap{
  position:relative;
  width:100%;
  overflow:hidden;
  background:#050505;
}
.video-preview-wrap .post-video,
.video-preview-wrap .detail-media{
  display:block;
  width:100%;
  height:auto;
}

.video-center-play{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:8;
  width:72px;
  height:72px;
  min-height:0;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(20,20,20,.78);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  cursor:pointer;
  backdrop-filter:blur(4px);
  transition:opacity .16s ease,transform .16s ease,background .16s ease;
}
.video-center-play span{
  display:block;
  margin-left:4px;
  font-family:Arial,Helvetica,sans-serif;
  font-size:28px;
  line-height:1;
}
.video-center-play:hover{
  background:rgba(35,35,35,.9);
  transform:translate(-50%,-50%) scale(1.04);
}
.video-center-play.is-hidden{
  opacity:0;
  pointer-events:none;
}

.feed-video-description{
  margin-top:13px;
  text-align:center;
  color:#cfcfcf;
  font-size:14px;
  line-height:1.55;
  white-space:pre-line;
}

.detail-video-wrap{
  max-width:100%;
  margin:0 auto;
}

@media(max-width:650px){
  .video-center-play{
    width:64px;
    height:64px;
  }
  .video-center-play span{
    font-size:25px;
  }
  .feed-video-description{
    padding:0 8px;
    font-size:13px;
    line-height:1.55;
  }
}


/* =========================================================
   PASSWORD-LOCKED PRIVATE POSTS
   ========================================================= */

/* Admin */
.private-post-box{
  border:1px solid #1b1b1b;
  padding:15px;
  background:#020202;
}
.private-post-toggle{
  display:flex !important;
  grid-template-columns:none !important;
  align-items:flex-start;
  gap:11px;
  cursor:pointer;
}
.private-post-toggle input{
  width:auto;
  margin-top:4px;
}
.private-post-toggle span{
  display:grid;
  gap:4px;
}
.private-post-toggle strong{
  color:#ddd;
  font-size:11px;
  letter-spacing:.1em;
  font-weight:500;
}
.private-post-toggle small{
  color:#666;
  font-size:11px;
  line-height:1.45;
  text-transform:none;
  letter-spacing:0;
}
#privatePasswordField{
  margin-top:15px;
}
.admin-private-thumb{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  color:#aaa;
  background:#070707;
}
.admin-private-thumb span{
  font-size:22px;
}
.admin-private-thumb small{
  font-size:8px;
  letter-spacing:.12em;
}

/* Home feed locked cards */
.locked-post-card{
  cursor:pointer;
}
.locked-post-inner{
  width:100%;
  min-height:245px;
  border:1px solid #151515;
  background:
    linear-gradient(145deg,rgba(255,255,255,.025),transparent 45%),
    #050505;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:30px 18px;
}
.locked-image .locked-post-inner,
.locked-video .locked-post-inner{
  aspect-ratio:4 / 5;
  min-height:0;
}
.locked-post-lock{
  color:#555;
  font-family:Arial,Helvetica,sans-serif;
  font-size:28px;
  margin-bottom:15px;
}
.locked-post-symbol{
  color:#b8b8b8;
  font-size:26px;
  line-height:1;
  margin-bottom:16px;
}
.locked-post-type{
  color:#ddd;
  font-size:13px;
  letter-spacing:.13em;
}
.locked-post-note{
  margin-top:8px;
  color:#4f4f4f;
  font-family:Arial,Helvetica,sans-serif;
  font-size:7px;
  letter-spacing:.13em;
}

/* Individual locked page */
.private-unlock-shell{
  width:min(600px,calc(100% - 30px));
  min-height:470px;
  margin:55px auto 20px;
  border:1px solid #171717;
  background:
    radial-gradient(circle at 50% 35%,rgba(255,255,255,.035),transparent 34%),
    #040404;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:44px 34px;
}
.private-unlock-icon{
  color:#666;
  font-family:Arial,Helvetica,sans-serif;
  font-size:35px;
  margin-bottom:20px;
}
.private-unlock-eyebrow{
  color:#555;
  font-size:8px;
  letter-spacing:.17em;
}
.private-unlock-shell h1{
  margin:9px 0 12px;
  font-size:35px;
  font-weight:400;
}
.private-unlock-shell > p{
  max-width:430px;
  margin:0;
  color:#777;
  font-size:14px;
  line-height:1.6;
}
.private-unlock-form{
  width:min(380px,100%);
  margin-top:28px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
}
.private-unlock-form input{
  min-width:0;
  background:#000;
  border:1px solid #232323;
  color:#fff;
  padding:12px 13px;
}
.private-unlock-button{
  border:1px solid #ddd;
  background:#ddd;
  color:#000;
  padding:0 18px;
  font-size:9px;
  letter-spacing:.12em;
}
.private-unlock-message{
  grid-column:1 / -1;
  min-height:18px;
  color:#9b6666;
  font-size:12px;
  text-align:left;
}

/* Archive */
.archive-locked-tile{
  background:#050505;
}
.archive-locked-inner{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:12px;
}
.archive-locked-icon{
  color:#555;
  font-family:Arial,Helvetica,sans-serif;
  font-size:19px;
  margin-bottom:10px;
}
.archive-locked-label{
  color:#bbb;
  font-size:9px;
  letter-spacing:.11em;
}
.archive-locked-note{
  margin-top:6px;
  color:#444;
  font-family:Arial,Helvetica,sans-serif;
  font-size:6px;
  letter-spacing:.09em;
}

@media(max-width:650px){
  .locked-post-inner{
    min-height:205px;
  }

  .locked-image .locked-post-inner,
  .locked-video .locked-post-inner{
    aspect-ratio:4 / 5;
  }

  .private-unlock-shell{
    width:calc(100% - 28px);
    min-height:420px;
    margin-top:28px;
    padding:34px 20px;
  }

  .private-unlock-shell h1{
    font-size:30px;
  }

  .private-unlock-form{
    grid-template-columns:1fr;
  }

  .private-unlock-button{
    min-height:46px;
  }

  .private-unlock-message{
    grid-column:1;
    text-align:center;
  }

  .archive-locked-label{
    font-size:7px;
  }
  .archive-locked-note{
    display:none;
  }
}


/* DEFINITIVE CENTER FIX FOR UNLOCKED PRIVATE TEXT + QUOTE POSTS */
.post-detail > .detail-text{
  width:100%;
  max-width:650px;
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center !important;
}

.post-detail > .detail-text p{
  width:100%;
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center !important;
}

.post-detail > .detail-quote,
.post-detail > .detail-quote-author{
  width:100%;
  max-width:700px;
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center !important;
}

@media(max-width:650px){
  .post-detail > .detail-text,
  .post-detail > .detail-quote,
  .post-detail > .detail-quote-author{
    width:100%;
    max-width:none;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:14px;
    padding-right:14px;
    box-sizing:border-box;
    text-align:center !important;
  }

  .post-detail > .detail-text p{
    text-align:center !important;
  }
}


/* =========================================================
   HOUSE OF ZELAYA APP NAVIGATION
   ========================================================= */

.app-view-site-button{
  text-decoration:none;
}

/* ADMIN return control:
   hidden on the normal Safari/public website so it never overlaps the logo.
   It appears only when House of Zelaya is opened from the installed Home Screen app. */
.app-admin-return{
  display:none;
}

@media (display-mode: standalone){
  .app-admin-return{
    position:fixed;
    right:14px;
    bottom:max(18px,calc(env(safe-area-inset-bottom) + 12px));
    z-index:1400;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:64px;
    height:34px;
    padding:0 12px;
    border:1px solid rgba(255,255,255,.15);
    background:rgba(0,0,0,.78);
    color:#8d8d8d;
    text-decoration:none;
    font-family:Arial,Helvetica,sans-serif;
    font-size:8px;
    letter-spacing:.14em;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
  }

  .app-admin-return:hover,
  .app-admin-return:focus{
    color:#fff;
    border-color:rgba(255,255,255,.32);
  }
}

@media(max-width:650px) and (display-mode: standalone){
  .app-admin-return{
    right:12px;
    bottom:max(16px,calc(env(safe-area-inset-bottom) + 10px));
    min-width:58px;
    height:31px;
    padding:0 9px;
    font-size:7px;
  }
}

/* =========================================================
   ADMIN — MOBILE FEED LAYOUT CONTROL
   ========================================================= */

.mobile-layout-form{
  display:grid;
  gap:16px;
}

.mobile-layout-options{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

.mobile-layout-option{
  position:relative;
  display:block;
  cursor:pointer;
}

.mobile-layout-option input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.mobile-layout-option span{
  min-height:82px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:13px 10px;
  border:1px solid #242424;
  background:#070707;
  color:#777;
  text-align:center;
  transition:border-color .15s ease,color .15s ease,background .15s ease;
}

.mobile-layout-option strong{
  font-size:9px;
  letter-spacing:.12em;
  font-weight:500;
}

.mobile-layout-option small{
  color:#555;
  font-size:9px;
  line-height:1.35;
}

.mobile-layout-option input:checked + span{
  border-color:#666;
  background:#0d0d0d;
  color:#fff;
}

.mobile-layout-option input:checked + span small{
  color:#999;
}

/* =========================================================
   PUBLIC HOME — ADMIN-CONTROLLED MOBILE MASONRY
   ========================================================= */

@media(max-width:650px){
  .feed,
  #feed{
    column-count:var(--hoz-mobile-feed-columns, 2) !important;
    column-width:auto !important;
    column-gap:10px !important;
    width:calc(100% - 20px) !important;
  }

  .post{
    margin-bottom:12px !important;
  }

  /* Keep media posts compact enough for 2–3 column layouts. */
  .feed-video-description{
    font-size:11px;
    line-height:1.4;
  }

  .post-text,
  .post-quote{
    font-size:clamp(10px,2.7vw,15px);
    line-height:1.45;
  }

  .feed-question{
    font-size:clamp(12px,3vw,17px);
  }

  .feed-answer,
  .feed-submission-caption{
    font-size:clamp(10px,2.7vw,14px);
  }
}

@media(max-width:650px){
  .mobile-layout-options{
    grid-template-columns:1fr;
  }

  .mobile-layout-option span{
    min-height:64px;
    align-items:flex-start;
    text-align:left;
    padding-left:16px;
  }
}

/* HOZ CONTROL CENTER PHASE 1 */
.control-center-hero{margin:0 0 22px;padding:26px;border:1px solid #1b1b1b;background:#050505}
.control-center-eyebrow{color:#666;font:8px Arial;letter-spacing:.22em}.control-center-hero h1{margin:6px 0 2px;font-family:"Bodoni Moda",Georgia,serif;font-size:42px;font-weight:400}.control-center-hero>p{margin:0 0 22px;color:#777;font-size:12px}
.quick-post-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.quick-post-grid button{min-height:94px;padding:13px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;border:1px solid #222;background:#090909;color:#fff}.quick-post-grid small{color:#555}.quick-post-grid strong{font:11px Arial;letter-spacing:.12em}
.control-center-today{margin-top:10px;display:grid;grid-template-columns:1fr 1fr 2fr;border:1px solid #181818}.control-center-today>div{min-height:66px;padding:11px 13px;display:flex;flex-direction:column;justify-content:center;border-right:1px solid #181818}.control-center-today>div:last-child{border-right:0}.control-center-today b{font-family:"Bodoni Moda",Georgia,serif;font-size:22px;font-weight:400}.control-center-today span{margin-top:5px;color:#555;font:7px Arial;letter-spacing:.13em}.today-mood b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px}
.museum-display-fieldset{margin:18px 0;padding:0;border:0}.museum-display-options{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.museum-display-options label{position:relative}.museum-display-options input{position:absolute;opacity:0}.museum-display-options span{min-height:58px;padding:10px;display:flex;box-sizing:border-box;flex-direction:column;justify-content:center;border:1px solid #222;background:#080808}.museum-display-options b{font:9px Arial;letter-spacing:.1em}.museum-display-options small{margin-top:4px;color:#666;font-size:8px}.museum-display-options input:checked+span{border-color:#888;background:#101010}
@media(max-width:650px){.control-center-hero{padding:18px 14px}.control-center-hero h1{font-size:34px}.quick-post-grid{grid-template-columns:repeat(2,1fr)}.quick-post-grid button{min-height:88px}.control-center-today{grid-template-columns:1fr 1fr}.today-mood{grid-column:1/-1;border-top:1px solid #181818}.museum-display-options{grid-template-columns:repeat(2,1fr)}}


/* =========================================================
   HOZ CONTROL CENTER PHASE 1.1 — PHONE POLISH
   ========================================================= */
.composer-intro{
  margin:-2px 0 14px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
}
.composer-kicker{
  color:#666;
  font:8px Arial,Helvetica,sans-serif;
  letter-spacing:.18em;
}
.composer-intro p{
  margin:4px 0 0;
  color:#777;
  font-size:11px;
}
.composer-type-badge{
  flex:0 0 auto;
  padding:7px 9px;
  border:1px solid #2a2a2a;
  color:#aaa;
  font:8px Arial,Helvetica,sans-serif;
  letter-spacing:.12em;
}

.composer-type-tabs{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:6px;
}
.composer-type-tabs button{
  min-height:42px;
  border:1px solid #222;
  background:#080808;
  color:#666;
  font:9px Arial,Helvetica,sans-serif;
  letter-spacing:.1em;
}
.composer-type-tabs button.active{
  border-color:#8a8a8a;
  background:#111;
  color:#fff;
}
.native-post-type{
  display:none !important;
}

/* More visual museum sizing */
.museum-display-options span{
  min-height:90px;
  align-items:flex-start;
}
.museum-size-preview{
  display:block;
  margin:0 0 10px;
  border:1px solid #666;
  background:#111;
}
.museum-size-small{width:24%;height:14px}
.museum-size-standard{width:46%;height:20px}
.museum-size-large{width:72%;height:25px}
.museum-size-feature{width:100%;height:31px}
.museum-display-options input:checked + span .museum-size-preview{
  background:#ddd;
  border-color:#ddd;
}

/* Sticky phone posting control */
.mobile-post-dock{display:none}
@media(max-width:650px){
  #newPostPanel{
    scroll-margin-top:12px;
  }

  .control-center-hero{
    margin-bottom:10px;
  }

  .composer-intro{
    align-items:flex-start;
  }

  .composer-type-tabs{
    grid-template-columns:repeat(4,1fr);
    gap:5px;
  }
  .composer-type-tabs button{
    min-height:44px;
    padding:0 4px;
    font-size:8px;
  }

  .museum-display-options span{
    min-height:92px;
    padding:11px;
  }

  .mobile-post-dock{
    position:fixed;
    right:14px;
    bottom:max(16px,calc(env(safe-area-inset-bottom) + 10px));
    z-index:1200;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:7px;
    transition:opacity .16s ease,transform .16s ease;
  }
  .mobile-post-dock.keyboard-away{
    opacity:0;
    pointer-events:none;
    transform:translateY(12px);
  }
  .mobile-post-toggle{
    min-width:72px;
    height:42px;
    padding:0 15px;
    border:1px solid #ddd;
    border-radius:999px;
    background:#f3f3f3;
    color:#050505;
    box-shadow:0 8px 28px rgba(0,0,0,.4);
    font:9px Arial,Helvetica,sans-serif;
    font-weight:700;
    letter-spacing:.12em;
  }
  .mobile-post-actions{
    width:112px;
    padding:6px;
    border:1px solid #292929;
    border-radius:12px;
    background:rgba(7,7,7,.97);
    box-shadow:0 12px 34px rgba(0,0,0,.48);
    backdrop-filter:blur(14px);
  }
  .mobile-post-actions[hidden]{display:none}
  .mobile-post-actions button{
    width:100%;
    min-height:38px;
    padding:0 10px;
    border:0;
    border-bottom:1px solid #1b1b1b;
    background:transparent;
    color:#ddd;
    text-align:left;
    font:8px Arial,Helvetica,sans-serif;
    letter-spacing:.12em;
  }
  .mobile-post-actions button:last-child{border-bottom:0}

  /* Composer now sits immediately below the Control Center */
  #newPostPanel{
    margin-top:0;
  }
}


/* =========================================================
   HOZ CONTROL CENTER CLEANUP + THE LITTLE CURATOR
   ========================================================= */
.quick-post-grid,.mobile-post-dock{display:none !important}
.control-center-hero>p{margin-bottom:14px}
.control-center-today{margin-top:0}

/* Admin-only pixel companion */
.hoz-pet{
 position:fixed;right:16px;bottom:max(17px,calc(env(safe-area-inset-bottom) + 11px));
 z-index:1400;display:flex;flex-direction:column;align-items:flex-end;gap:9px;
}
.hoz-pet-button{
 width:58px;height:58px;padding:0;border:0;background:transparent;cursor:pointer;
 -webkit-tap-highlight-color:transparent;
}
.hoz-pet-sprite{
 position:relative;display:block;width:52px;height:52px;margin:auto;
 image-rendering:pixelated;animation:hozPetBob 2.8s steps(2,end) infinite;
}
.pet-head{position:absolute;left:11px;top:8px;width:30px;height:25px;background:#d8d8d8;box-shadow:4px 0 #d8d8d8,-4px 0 #d8d8d8,0 4px #d8d8d8}
.pet-ear{position:absolute;top:4px;width:10px;height:12px;background:#d8d8d8}
.pet-ear-left{left:8px;clip-path:polygon(0 0,100% 35%,100% 100%,30% 100%)}
.pet-ear-right{right:8px;clip-path:polygon(100% 0,0 35%,0 100%,70% 100%)}
.pet-eye{position:absolute;top:9px;width:4px;height:5px;background:#090909;animation:hozPetBlink 5.4s steps(1,end) infinite}
.pet-eye-left{left:7px}.pet-eye-right{right:7px}
.pet-mouth{position:absolute;left:13px;top:17px;width:4px;height:3px;background:#777}
.pet-body{position:absolute;left:15px;top:34px;width:22px;height:12px;background:#aaa;box-shadow:4px 0 #aaa,-4px 0 #aaa}
.pet-foot{position:absolute;top:46px;width:10px;height:4px;background:#d8d8d8}
.pet-foot-left{left:10px}.pet-foot-right{right:10px}
.hoz-pet:hover .hoz-pet-sprite{transform:translateY(-2px)}
.hoz-pet.talking .hoz-pet-sprite{animation:hozPetTalk .42s steps(2,end) 3,hozPetBob 2.8s steps(2,end) 1.3s infinite}

.hoz-pet-bubble{
 position:relative;width:min(220px,calc(100vw - 94px));padding:11px 13px;
 border:1px solid #444;background:rgba(8,8,8,.97);color:#e5e5e5;
 box-shadow:0 10px 30px rgba(0,0,0,.4);font:11px/1.4 Arial,Helvetica,sans-serif;
 letter-spacing:.02em;text-align:left;
}
.hoz-pet-bubble[hidden]{display:none}
.hoz-pet-bubble-tail{
 position:absolute;right:19px;bottom:-6px;width:10px;height:10px;
 border-right:1px solid #444;border-bottom:1px solid #444;background:#080808;
 transform:rotate(45deg);
}

@keyframes hozPetBob{
 0%,100%{transform:translateY(0)}
 50%{transform:translateY(-3px)}
}
@keyframes hozPetBlink{
 0%,46%,48%,100%{height:5px}
 47%{height:1px}
}
@keyframes hozPetTalk{
 0%,100%{transform:translateY(0)}
 50%{transform:translateY(-5px)}
}

@media(max-width:650px){
 .hoz-pet{right:11px}
 .hoz-pet-button{width:54px;height:54px}
 .hoz-pet-sprite{transform-origin:bottom right}
 .control-center-hero{padding-bottom:14px}
}
@media(prefers-reduced-motion:reduce){
 .hoz-pet-sprite,.hoz-pet.talking .hoz-pet-sprite,.pet-eye{animation:none}
}


/* =========================================================
   HOZ ADMIN POLISH — QUICK MOOD + CLEAN COMPOSER + FALL PET
   ========================================================= */

/* Force irrelevant composer fields completely out of the layout. */
#mediaField[hidden],
#mediaDescriptionField[hidden],
#contentField[hidden],
#quoteAuthorField[hidden]{
  display:none !important;
}

/* Current Mood is now a compact top-level control. */
.quick-mood-panel{
  margin-top:10px;
  margin-bottom:10px;
  padding-top:18px;
  padding-bottom:18px;
}
.quick-mood-panel h2{
  margin-bottom:12px;
}
.quick-mood-panel #moodInput{
  min-height:58px;
  resize:none;
}
.quick-mood-actions{
  display:flex;
  gap:8px;
  align-items:center;
}
.quick-mood-actions .primary{
  flex:1 1 auto;
}
.mood-clear-button{
  flex:0 0 auto;
}

/* Keep advanced color controls visually secondary. */
.quick-mood-panel .mood-color-editor{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid #171717;
}

/* Fall wardrobe for The Little Curator. */
.pet-body{
  background:#c96617 !important;
  box-shadow:4px 0 #c96617,-4px 0 #c96617 !important;
}
.pet-body::before{
  content:"";
  position:absolute;
  left:7px;
  top:3px;
  width:8px;
  height:7px;
  background:
    linear-gradient(135deg,transparent 0 36%,#ece3c4 37% 58%,transparent 59%) 0 0/5px 5px no-repeat,
    linear-gradient(45deg,transparent 0 38%,#ece3c4 39% 61%,transparent 62%) 4px 2px/5px 5px no-repeat;
  image-rendering:pixelated;
}
.pet-body::after{
  content:"";
  position:absolute;
  left:10px;
  top:2px;
  width:2px;
  height:7px;
  background:#ece3c4;
  transform:rotate(-22deg);
  transform-origin:bottom center;
}

/* Little sweater sleeves */
.pet-head::before,
.pet-head::after{
  content:"";
  position:absolute;
  top:25px;
  width:6px;
  height:9px;
  background:#c96617;
}
.pet-head::before{left:1px;transform:rotate(12deg)}
.pet-head::after{right:1px;transform:rotate(-12deg)}

@media(max-width:650px){
  .quick-mood-panel{
    padding:16px 14px;
  }
  .quick-mood-actions{
    display:grid;
    grid-template-columns:1fr auto;
  }
}


/* =========================================================
   PRE-PHASE 2 POLISH
   centered post details + seamless navigation + quick mood clear
   ========================================================= */

/* Mood clear lives exactly where you're typing. */
.mood-input-wrap{
  position:relative;
}
.mood-input-wrap #moodInput{
  width:100%;
  box-sizing:border-box;
  padding-right:74px;
}
.mood-inline-clear{
  position:absolute;
  right:10px;
  top:10px;
  z-index:2;
  padding:6px 8px;
  border:1px solid #2c2c2c;
  background:rgba(0,0,0,.88);
  color:#777;
  font:7px Arial,Helvetica,sans-serif;
  letter-spacing:.12em;
  cursor:pointer;
}
.mood-inline-clear:hover,
.mood-inline-clear:focus-visible{
  color:#fff;
  border-color:#666;
}
.quick-mood-actions .primary{
  width:100%;
}

/* Individual posts stay centered no matter the media proportions. */
.post-detail{
  width:min(820px,calc(100% - 40px)) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center !important;
}
.post-detail > *{
  margin-left:auto;
  margin-right:auto;
}
.detail-media{
  width:auto !important;
  max-width:100% !important;
  height:auto !important;
  max-height:78vh !important;
  margin-left:auto !important;
  margin-right:auto !important;
  object-fit:contain !important;
}

/* Dates are always centered beneath the post. */
.detail-date{
  width:100% !important;
  display:block !important;
  margin:22px auto 0 !important;
  padding:0 !important;
  box-sizing:border-box;
  text-align:center !important;
}

/* Navigation now belongs below the work instead of sitting over it. */
.post-sequence-nav{
  width:min(820px,calc(100% - 40px));
  margin:-66px auto 92px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  pointer-events:none;
}
.post-sequence-nav .post-nav-arrow{
  position:static !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;
  transform:none !important;
  width:42px;
  height:42px;
  border:0 !important;
  background:transparent !important;
  color:rgba(255,255,255,.34);
  font-size:34px;
  line-height:1;
  pointer-events:auto;
  opacity:.9;
}
.post-sequence-nav .post-nav-arrow:hover,
.post-sequence-nav .post-nav-arrow:focus-visible{
  color:#fff;
  background:transparent !important;
}

/* If only one arrow exists, each still remains at its natural side. */
.post-sequence-nav .post-nav-left{margin-right:auto}
.post-sequence-nav .post-nav-right{margin-left:auto}

/* Ask/text/quote posts get a little more intentional vertical balance. */
.post-detail > .detail-text,
.post-detail > .detail-quote,
.post-detail > .detail-quote-author,
.post-detail > .ask-post,
.post-detail > .answer-post{
  margin-left:auto !important;
  margin-right:auto !important;
}

@media(max-width:760px){
  .post-detail{
    width:calc(100% - 32px) !important;
    margin-top:28px !important;
    margin-bottom:74px !important;
  }

  .detail-media{
    max-height:none !important;
  }

  .detail-date{
    margin-top:20px !important;
  }

  .post-sequence-nav{
    width:calc(100% - 32px);
    margin:-46px auto 82px;
  }

  .post-sequence-nav .post-nav-arrow{
    width:34px;
    height:34px;
    font-size:30px;
  }

  .mood-inline-clear{
    right:8px;
    top:8px;
  }
}


/* =========================================================
   ADMIN PUBLIC DATE ALIGNMENT FIX
   ========================================================= */
#postForm label:has(#displayDate),
#postForm .date-field,
#postForm .public-date-field{
  width:100%;
  box-sizing:border-box;
}

#displayDate{
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
  box-sizing:border-box !important;
  display:block !important;
}

/* iOS date inputs sometimes size themselves oddly. Force them to match form width. */
input[type="date"]#displayDate{
  -webkit-appearance:none;
  appearance:none;
  min-width:0 !important;
}

@media(max-width:650px){
  #displayDate{
    width:100% !important;
    max-width:100% !important;
  }
}

/* HOZ VIEWPORT EDGE NAVIGATION */
.edge-post-nav{position:fixed!important;inset:0!important;width:100%!important;height:100%!important;margin:0!important;z-index:850;pointer-events:none}
.edge-post-nav .post-nav-arrow{position:absolute!important;top:50%!important;transform:translateY(-50%)!important;width:64px!important;height:120px!important;margin:0!important;padding:0!important;display:flex;align-items:center;justify-content:center;border:0!important;background:transparent!important;color:rgba(255,255,255,.34)!important;text-decoration:none!important;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:color .18s ease,background .18s ease}
.edge-post-nav .post-nav-left{left:0!important;right:auto!important}.edge-post-nav .post-nav-right{right:0!important;left:auto!important}
.edge-post-nav .post-nav-arrow span{font:200 42px/1 Arial,Helvetica,sans-serif}
.edge-post-nav .post-nav-arrow:hover,.edge-post-nav .post-nav-arrow:focus-visible{color:#fff!important;outline:none}
.edge-post-nav .post-nav-left:hover,.edge-post-nav .post-nav-left:focus-visible{background:linear-gradient(to right,rgba(255,255,255,.045),transparent)!important}
.edge-post-nav .post-nav-right:hover,.edge-post-nav .post-nav-right:focus-visible{background:linear-gradient(to left,rgba(255,255,255,.045),transparent)!important}
@media(max-width:760px){.edge-post-nav .post-nav-arrow{width:48px!important;height:112px!important;color:rgba(255,255,255,.48)!important}.edge-post-nav .post-nav-arrow span{font-size:38px}.edge-post-nav .post-nav-left{background:linear-gradient(to right,rgba(0,0,0,.30),transparent)!important}.edge-post-nav .post-nav-right{background:linear-gradient(to left,rgba(0,0,0,.30),transparent)!important}}


/* Preserve endpoint behavior: no arrow when there is nowhere to go. */
.edge-post-nav .post-nav-arrow[hidden]{
  display:none !important;
}


/* =========================================================
   HOUSE OF ZELAYA — DESKTOP MUSEUM PHASE 2.1
   Curator-controlled scale + editorial negative space
   ========================================================= */

/*
  Desktop only.
  Mobile keeps the existing Admin-controlled 1 / 2 / 3 column Tumblr feed.
*/
@media(min-width:901px){
  .feed,
  #feed{
    width:min(1680px,calc(100% - 72px)) !important;
    margin:0 auto !important;
    padding:18px 0 150px !important;

    /* Replace rigid masonry columns with a 12-column exhibition wall. */
    columns:auto !important;
    column-count:auto !important;
    column-width:auto !important;

    display:grid !important;
    grid-template-columns:repeat(12,minmax(0,1fr));
    gap:54px 24px;
    align-items:start;
    grid-auto-flow:row dense;
  }

  .feed .post,
  #feed .post{
    width:auto !important;
    max-width:none !important;
    margin:0 !important;
    align-self:start;
    break-inside:auto;
  }

  /*
    CURATOR SCALE
    Small = quiet artifact
    Standard = Tumblr DNA
    Large = stronger visual presence
    Feature = exhibition piece
  */
  .museum-small{
    grid-column:span 2;
  }

  .museum-standard{
    grid-column:span 3;
  }

  .museum-large{
    grid-column:span 5;
  }

  .museum-feature{
    grid-column:3 / span 8;
    margin-top:28px !important;
    margin-bottom:40px !important;
  }

  /* Let feature media breathe like a gallery installation. */
  .museum-feature .post-media,
  .museum-feature .post-video{
    width:100%;
  }

  .museum-feature .post-text,
  .museum-feature .post-quote,
  .museum-feature .feed-ask-post{
    min-height:440px;
    padding-left:clamp(44px,6vw,110px);
    padding-right:clamp(44px,6vw,110px);
  }

  .museum-feature .post-text{
    font-size:clamp(25px,2.1vw,38px);
  }

  .museum-feature .post-quote{
    font-size:clamp(31px,2.8vw,52px);
  }

  .museum-large .post-text,
  .museum-large .post-quote,
  .museum-large .feed-ask-post{
    min-height:320px;
  }

  .museum-small .post-text,
  .museum-small .post-quote{
    min-height:150px;
    padding:20px 16px;
  }

  .museum-small .post-text{
    font-size:14px;
  }

  .museum-small .post-quote{
    font-size:17px;
  }

  /* Museum-like asymmetry. It is deterministic, not random. */
  .museum-placement-2:not(.museum-feature){
    transform:translateY(34px);
  }

  .museum-placement-4:not(.museum-feature){
    transform:translateY(72px);
  }

  .museum-placement-6:not(.museum-feature){
    transform:translateY(18px);
  }

  /*
    Center LARGE pieces a little more intentionally depending on where
    they land in the sequence, while still allowing dense editorial packing.
  */
  .museum-large.museum-placement-1,
  .museum-large.museum-placement-5{
    grid-column-start:2;
  }

  .museum-large.museum-placement-3{
    grid-column-start:7;
  }

  /* FEATURE always resets placement so the artwork, not the algorithm, leads. */
  .museum-feature{
    transform:none !important;
  }

  /*
    Metadata becomes quieter as scale increases.
    The artwork should be the first thing the eye reads.
  */
  .museum-post .post-date{
    margin-top:12px;
    opacity:.7;
  }

  .museum-small .post-date{
    font-size:8px;
    opacity:.58;
  }

  .museum-feature .post-date{
    margin-top:16px;
    font-size:9px;
  }

  /* Captions retain readability without turning into cards. */
  .museum-large .feed-video-description,
  .museum-feature .feed-video-description,
  .museum-large .feed-submission-meta,
  .museum-feature .feed-submission-meta{
    max-width:760px;
    margin-left:auto;
    margin-right:auto;
  }

  /* Very restrained interaction: like approaching an object in a gallery. */
  .museum-post{
    transition:opacity .22s ease, transform .28s ease;
  }

  .museum-post:hover{
    opacity:.96;
  }
}

/* Mid-size laptops: keep the exhibition composition usable. */
@media(min-width:901px) and (max-width:1180px){
  .feed,
  #feed{
    grid-template-columns:repeat(10,minmax(0,1fr));
    width:calc(100% - 48px) !important;
    gap:42px 18px;
  }

  .museum-small{grid-column:span 2}
  .museum-standard{grid-column:span 3}
  .museum-large{grid-column:span 5}

  .museum-feature{
    grid-column:2 / span 8;
  }

  .museum-large.museum-placement-1,
  .museum-large.museum-placement-5,
  .museum-large.museum-placement-3{
    grid-column-start:auto;
  }
}

/* Never let the desktop museum rules alter the phone/tablet feed. */
@media(max-width:900px){
  .museum-post{
    transform:none !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .museum-post{
    transition:none !important;
  }
}


/* =========================================================
   PHASE 2.1B — STRUCTURED MUSEUM MASONRY
   Grid discipline first; museum scale second.
   Eliminates the odd empty black spaces from equal-height CSS grid rows.
   ========================================================= */

@media(min-width:901px){
  .feed,
  #feed{
    width:min(1540px,calc(100% - 64px)) !important;
    margin:0 auto !important;
    padding:12px 0 110px !important;

    display:grid !important;
    grid-template-columns:repeat(12,minmax(0,1fr)) !important;
    grid-auto-flow:row dense !important;
    grid-auto-rows:8px !important;

    column-count:auto !important;
    column-width:auto !important;
    columns:auto !important;

    column-gap:16px !important;
    row-gap:14px !important;
    align-items:start !important;
  }

  .feed .museum-post,
  #feed .museum-post{
    margin:0 !important;
    width:auto !important;
    max-width:none !important;
    align-self:start !important;
    transform:none !important;
  }

  /* A cleaner, more predictable hierarchy. */
  .museum-small{
    grid-column:span 3 !important;
  }

  .museum-standard{
    grid-column:span 4 !important;
  }

  .museum-large{
    grid-column:span 6 !important;
  }

  .museum-feature{
    grid-column:1 / -1 !important;
    width:min(1120px,100%) !important;
    justify-self:center !important;
    margin:18px auto 28px !important;
    transform:none !important;
  }

  /* Remove all forced placement rules from the earlier experimental wall. */
  .museum-large.museum-placement-1,
  .museum-large.museum-placement-3,
  .museum-large.museum-placement-5,
  .museum-small,
  .museum-standard,
  .museum-large{
    grid-column-start:auto !important;
  }

  .museum-feature{
    grid-column:1 / -1 !important;
  }

  /* Bring oversized text pieces back into the same visual rhythm. */
  .museum-feature .post-text,
  .museum-feature .post-quote,
  .museum-feature .feed-ask-post{
    min-height:0 !important;
    padding-left:clamp(28px,4vw,72px) !important;
    padding-right:clamp(28px,4vw,72px) !important;
  }

  .museum-large .post-text,
  .museum-large .post-quote,
  .museum-large .feed-ask-post,
  .museum-small .post-text,
  .museum-small .post-quote{
    min-height:0 !important;
  }

  .museum-post .post-date{
    margin-top:8px !important;
  }
}

/* Laptops: use the same disciplined wall, just with fewer effective columns. */
@media(min-width:901px) and (max-width:1180px){
  .feed,
  #feed{
    width:calc(100% - 40px) !important;
    column-gap:14px !important;
    row-gap:12px !important;
  }

  .museum-small{grid-column:span 3 !important}
  .museum-standard{grid-column:span 4 !important}
  .museum-large{grid-column:span 6 !important}
  .museum-feature{grid-column:1 / -1 !important}
}

/* Phone/tablet remains exactly on the existing mobile feed rules. */
@media(max-width:900px){
  .museum-post{
    grid-row-end:auto !important;
    transform:none !important;
  }
}


/* =========================================================
   HOUSE OF ZELAYA — TUMBLR STACK
   Tight vertical masonry + fine museum borders.
   This intentionally replaces the experimental desktop grid.
   ========================================================= */

@media(min-width:901px){

  .feed,
  #feed{
    width:min(1480px,calc(100% - 54px)) !important;
    margin:0 auto !important;
    padding:12px 0 110px !important;

    /* True Tumblr/Pinterest-style vertical stacking. */
    display:block !important;
    columns:4 !important;
    column-gap:12px !important;

    grid-template-columns:none !important;
    grid-auto-rows:auto !important;
    grid-auto-flow:initial !important;
    row-gap:0 !important;
  }

  .feed .museum-post,
  #feed .museum-post,
  .feed .post,
  #feed .post{
    display:inline-block !important;
    width:100% !important;
    max-width:none !important;
    margin:0 0 12px !important;
    box-sizing:border-box !important;

    break-inside:avoid !important;
    -webkit-column-break-inside:avoid !important;
    page-break-inside:avoid !important;

    /* Kill all previous museum-grid positioning. */
    grid-column:auto !important;
    grid-row:auto !important;
    grid-row-end:auto !important;
    grid-column-start:auto !important;
    justify-self:auto !important;
    align-self:auto !important;
    transform:none !important;

    /* Fine gallery frame — enough separation without becoming a card. */
    border:1px solid rgba(255,255,255,.13) !important;
    background:rgba(255,255,255,.012) !important;
    padding:6px !important;
    border-radius:1px !important;

    transition:border-color .18s ease, background .18s ease, opacity .18s ease !important;
  }

  .feed .museum-post:hover,
  #feed .museum-post:hover{
    border-color:rgba(255,255,255,.28) !important;
    background:rgba(255,255,255,.022) !important;
    opacity:1 !important;
  }

  /* Media sits cleanly inside the thin frame. */
  .museum-post img,
  .museum-post video,
  .museum-post .post-media,
  .museum-post .post-video{
    max-width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  /* Text / quote / Ask pieces get just enough inner air to read as objects. */
  .museum-post .post-text,
  .museum-post .post-quote,
  .museum-post .feed-ask-post{
    min-height:0 !important;
    padding:18px 16px !important;
    box-sizing:border-box !important;
  }

  .museum-post .post-date{
    margin:7px 2px 2px !important;
    opacity:.62 !important;
  }

  /*
    Keep the curator choices, but make them subtle so the wall stays tightly stacked.
    Scale now behaves as emphasis instead of forcing empty spatial holes.
  */
  .museum-small{
    opacity:.88;
  }

  .museum-small .post-text{
    font-size:13px !important;
  }

  .museum-small .post-quote{
    font-size:16px !important;
  }

  .museum-large{
    border-color:rgba(255,255,255,.18) !important;
  }

  .museum-large .post-text{
    font-size:clamp(17px,1.3vw,22px) !important;
  }

  .museum-large .post-quote{
    font-size:clamp(20px,1.7vw,28px) !important;
  }

  .museum-feature{
    border-color:rgba(255,255,255,.24) !important;
    background:rgba(255,255,255,.018) !important;
  }

  .museum-feature .post-text{
    font-size:clamp(19px,1.5vw,25px) !important;
  }

  .museum-feature .post-quote{
    font-size:clamp(23px,1.9vw,31px) !important;
  }
}

/* A little more breathing room on smaller laptops without losing the stack. */
@media(min-width:901px) and (max-width:1180px){
  .feed,
  #feed{
    width:calc(100% - 38px) !important;
    columns:3 !important;
    column-gap:11px !important;
  }

  .feed .museum-post,
  #feed .museum-post,
  .feed .post,
  #feed .post{
    margin-bottom:11px !important;
  }
}

/* Larger desktop = 5 dense columns, matching the Tumblr reference more closely. */
@media(min-width:1500px){
  .feed,
  #feed{
    width:min(1640px,calc(100% - 70px)) !important;
    columns:5 !important;
    column-gap:12px !important;
  }
}

/* Phone/tablet stays exactly as the current mobile system. */
@media(max-width:900px){
  .feed,
  #feed{
    columns:auto !important;
  }

  .museum-post{
    border:0 !important;
    background:transparent !important;
    padding:0 !important;
  }
}


/* =========================================================
   HOUSE OF ZELAYA — PHASE 2.2 MUSEUM VIEWER
   The feed is the wall. The individual post is the close view.
   ========================================================= */

/* Quiet architectural header */
.detail-header{
  width:100% !important;
  padding:22px 26px !important;
  box-sizing:border-box !important;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:#000;
}

.detail-brand,
.detail-back{
  letter-spacing:.12em;
}

.detail-back{
  opacity:.58;
  transition:opacity .18s ease;
}
.detail-back:hover{opacity:1}

/* Individual object */
.post-detail{
  width:min(1180px,calc(100% - 96px)) !important;
  max-width:1180px !important;
  margin:72px auto 100px !important;
  padding:0 !important;
  text-align:center;
}

/* Media is treated like an exhibited object, not a card. */
.post-detail > img,
.post-detail > video,
.post-detail .detail-media,
.post-detail .detail-video{
  display:block !important;
  width:auto !important;
  max-width:min(100%,1040px) !important;
  max-height:78vh !important;
  height:auto !important;
  margin-left:auto !important;
  margin-right:auto !important;
  object-fit:contain !important;
  border:1px solid rgba(255,255,255,.14);
  box-sizing:border-box;
}

/* Landscape work can breathe wider while still staying inside the room. */
.post-detail img[width][height],
.post-detail video{
  object-fit:contain;
}

/* Museum plaque: date + caption/meta become one quiet information layer. */
.post-detail .detail-date{
  width:100% !important;
  margin:18px auto 0 !important;
  padding-top:12px !important;
  border-top:1px solid rgba(255,255,255,.10);
  max-width:680px;
  text-align:center !important;
  font-size:9px !important;
  letter-spacing:.14em;
  opacity:.58;
}

.post-detail .detail-description,
.post-detail .detail-caption,
.post-detail .detail-submission-meta,
.post-detail .detail-answer-meta{
  width:min(680px,100%) !important;
  margin:12px auto 0 !important;
  text-align:center !important;
  line-height:1.65;
  opacity:.84;
}

/* Text pieces become their own framed artifacts. */
.post-detail > .detail-text,
.post-detail > .detail-quote,
.post-detail > .detail-ask,
.post-detail > .detail-answer{
  width:min(760px,100%) !important;
  max-width:760px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding:clamp(36px,6vw,78px) clamp(26px,5vw,64px) !important;
  box-sizing:border-box !important;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.012);
  text-align:center !important;
}

.post-detail > .detail-text p{
  text-align:center !important;
  line-height:1.72;
}

.post-detail > .detail-quote{
  font-size:clamp(27px,3vw,44px);
  line-height:1.32;
}

/* Keep quote author outside the "art" but visually attached like a credit line. */
.post-detail > .detail-quote-author{
  width:min(680px,100%) !important;
  margin:14px auto 0 !important;
  padding:0 !important;
  border:0 !important;
  text-align:center !important;
  opacity:.66;
  letter-spacing:.08em;
}

/* Existing edge navigation becomes even quieter and more gallery-like. */
.edge-post-nav .post-nav-arrow{
  color:rgba(255,255,255,.34) !important;
}
.edge-post-nav .post-nav-arrow span{
  font-size:34px !important;
  font-weight:200 !important;
}
.edge-post-nav .post-nav-arrow:hover,
.edge-post-nav .post-nav-arrow:focus-visible{
  color:rgba(255,255,255,.92) !important;
}

/* Soft entrance: enough to feel intentional, never flashy. */
@keyframes hozMuseumReveal{
  from{opacity:0;transform:translateY(7px)}
  to{opacity:1;transform:translateY(0)}
}
.post-detail > *{
  animation:hozMuseumReveal .38s ease both;
}

/* Mobile: same visual language, scaled for the phone. */
@media(max-width:760px){
  .detail-header{
    padding:18px 16px !important;
  }

  .post-detail{
    width:calc(100% - 28px) !important;
    margin:42px auto 76px !important;
  }

  .post-detail > img,
  .post-detail > video,
  .post-detail .detail-media,
  .post-detail .detail-video{
    max-width:100% !important;
    max-height:none !important;
  }

  .post-detail > .detail-text,
  .post-detail > .detail-quote,
  .post-detail > .detail-ask,
  .post-detail > .detail-answer{
    width:100% !important;
    padding:32px 22px !important;
  }

  .post-detail .detail-date{
    max-width:calc(100% - 24px);
    margin-top:14px !important;
    padding-top:10px !important;
  }

  .post-detail .detail-description,
  .post-detail .detail-caption,
  .post-detail .detail-submission-meta,
  .post-detail .detail-answer-meta{
    width:calc(100% - 24px) !important;
  }

  .edge-post-nav .post-nav-arrow{
    width:44px !important;
  }
  .edge-post-nav .post-nav-arrow span{
    font-size:32px !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .post-detail > *{animation:none !important}
}


/* =========================================================
   HOUSE OF ZELAYA — PHASE 2.3 COLLECTION INDEX
   The archive becomes the museum catalog.
   ========================================================= */

.archive-collection-shell{
  width:min(1500px,calc(100% - 64px)) !important;
  max-width:none !important;
  margin:54px auto 120px !important;
}

.collection-intro{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:42px;
  align-items:end;
  padding:0 0 30px;
  border-bottom:1px solid rgba(255,255,255,.14);
}

.collection-intro-copy h1{
  margin:8px 0 8px;
  font-size:clamp(42px,5vw,78px);
  line-height:.98;
  font-weight:400;
  letter-spacing:-.035em;
}

.collection-deck{
  margin:0;
  max-width:650px;
  font-size:13px;
  line-height:1.65;
  color:rgba(255,255,255,.58);
}

.collection-stats{
  display:flex;
  align-items:flex-end;
  gap:30px;
}

.collection-stat{
  min-width:66px;
  text-align:right;
}

.collection-stat-number{
  display:block;
  font-size:26px;
  line-height:1;
}

.collection-stat-label{
  display:block;
  margin-top:6px;
  font-size:8px;
  letter-spacing:.16em;
  color:rgba(255,255,255,.48);
}

.collection-controls{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  padding:12px 0;
  margin-bottom:44px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.94);
  backdrop-filter:blur(12px);
}

.collection-filters,
.collection-years{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:5px 14px;
}

.collection-filter{
  appearance:none;
  border:0;
  background:transparent;
  padding:5px 0;
  color:rgba(255,255,255,.38);
  font:inherit;
  font-size:9px;
  letter-spacing:.12em;
  cursor:pointer;
  border-bottom:1px solid transparent;
}

.collection-filter:hover{
  color:rgba(255,255,255,.78);
}

.collection-filter.is-active{
  color:#fff;
  border-bottom-color:rgba(255,255,255,.7);
}

.collection-year-link{
  color:rgba(255,255,255,.38);
  font-size:9px;
  letter-spacing:.12em;
  text-decoration:none;
}

.collection-year-link:hover{
  color:#fff;
}

.collection-year{
  scroll-margin-top:62px;
  margin:0 0 76px;
}

.collection-year-heading{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:20px;
  padding-bottom:14px;
  margin-bottom:18px;
  border-bottom:1px solid rgba(255,255,255,.16);
}

.collection-year-heading h2{
  margin:0;
  font-size:clamp(38px,4vw,62px);
  font-weight:400;
  line-height:1;
}

.collection-year-heading span{
  font-size:8px;
  letter-spacing:.14em;
  color:rgba(255,255,255,.42);
}

.collection-month{
  margin:0 0 42px !important;
}

.collection-month-heading{
  margin:0 0 10px !important;
  padding:0 !important;
  border:0 !important;
}

.collection-month-heading h3{
  margin:0;
  font-size:11px;
  font-weight:400;
  letter-spacing:.16em;
}

.collection-month-heading span{
  min-width:22px;
  text-align:right;
  font-size:9px;
  color:rgba(255,255,255,.36);
}

/* Dense museum contact sheet */
.collection-grid{
  display:grid !important;
  grid-template-columns:repeat(8,minmax(0,1fr)) !important;
  gap:8px !important;
}

.collection-tile{
  position:relative;
  aspect-ratio:1 / 1;
  display:block;
  min-width:0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12) !important;
  background:#050505 !important;
  color:#fff;
  text-decoration:none;
  box-sizing:border-box;
  transition:border-color .18s ease, opacity .18s ease;
}

.collection-tile:hover{
  border-color:rgba(255,255,255,.38) !important;
  opacity:1;
}

.collection-tile > img,
.collection-video-wrap,
.collection-video-wrap video{
  width:100%;
  height:100%;
}

.collection-tile > img,
.collection-video-wrap video{
  display:block;
  object-fit:cover;
}

.collection-video-wrap{
  position:relative;
}

.collection-video-mark{
  position:absolute;
  inset:50% auto auto 50%;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border:1px solid rgba(255,255,255,.42);
  border-radius:50%;
  background:rgba(0,0,0,.32);
  font-family:Arial,sans-serif;
  font-size:9px;
  padding-left:2px;
}

.collection-tile-topline{
  position:absolute;
  z-index:3;
  top:0;
  left:0;
  right:0;
  display:flex;
  justify-content:space-between;
  gap:8px;
  padding:7px;
  font-size:7px;
  letter-spacing:.12em;
  color:rgba(255,255,255,.76);
  text-shadow:0 1px 6px rgba(0,0,0,.9);
  pointer-events:none;
}

.collection-tile-type,
.collection-tile-date{
  font-size:inherit;
}

.collection-text-tile{
  height:100%;
  min-height:0 !important;
  padding:30px 13px 12px !important;
  display:flex;
  flex-direction:column;
  justify-content:center;
  box-sizing:border-box;
  background:#080808;
}

.collection-text-tile .archive-text-main{
  font-size:11px !important;
  line-height:1.45;
  color:rgba(255,255,255,.88);
}

.collection-text-tile .archive-text-secondary{
  margin-top:10px;
  font-size:8px !important;
  line-height:1.45;
  color:rgba(255,255,255,.42);
}

.collection-quote .collection-text-tile{
  background:#0b0b0b;
}

.collection-quote .archive-text-main{
  font-family:"Bodoni Moda",serif;
  font-size:14px !important;
  line-height:1.35;
}

.collection-submission-mark{
  position:absolute;
  z-index:3;
  left:7px;
  bottom:7px;
  font-size:7px;
  letter-spacing:.13em;
  color:rgba(255,255,255,.7);
  text-shadow:0 1px 6px #000;
}

.collection-locked-inner{
  width:100%;
  height:100%;
  min-height:0 !important;
  padding:28px 10px 12px !important;
  justify-content:center;
  box-sizing:border-box;
  background:
    linear-gradient(rgba(255,255,255,.018),rgba(255,255,255,.018)),
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 8px,
      rgba(255,255,255,.018) 8px,
      rgba(255,255,255,.018) 9px
    );
}

.collection-empty{
  min-height:220px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.10);
}

/* Tablet */
@media(max-width:1100px){
  .archive-collection-shell{
    width:calc(100% - 40px) !important;
  }

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

  .collection-intro{
    grid-template-columns:1fr;
  }

  .collection-stats{
    justify-content:flex-start;
  }

  .collection-stat{
    text-align:left;
  }
}

/* Phone: compact, thumb-friendly collection index */
@media(max-width:650px){
  .archive-collection-shell{
    width:calc(100% - 24px) !important;
    margin-top:30px !important;
  }

  .collection-intro{
    gap:24px;
    padding-bottom:22px;
  }

  .collection-intro-copy h1{
    font-size:42px;
  }

  .collection-deck{
    font-size:11px;
  }

  .collection-stats{
    gap:22px;
  }

  .collection-stat-number{
    font-size:21px;
  }

  .collection-controls{
    position:relative;
    display:block;
    padding:11px 0 14px;
    margin-bottom:30px;
    overflow:hidden;
  }

  .collection-filters{
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:7px;
    scrollbar-width:none;
  }

  .collection-filters::-webkit-scrollbar{
    display:none;
  }

  .collection-years{
    margin-top:8px;
  }

  .collection-year{
    margin-bottom:56px;
  }

  .collection-year-heading h2{
    font-size:40px;
  }

  .collection-month{
    margin-bottom:30px !important;
  }

  .collection-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:5px !important;
  }

  .collection-tile-topline{
    padding:5px;
    font-size:6px;
  }

  .collection-text-tile{
    padding:24px 8px 8px !important;
  }

  .collection-text-tile .archive-text-main{
    font-size:8px !important;
  }

  .collection-text-tile .archive-text-secondary{
    display:none;
  }

  .collection-video-mark{
    width:24px;
    height:24px;
    font-size:7px;
  }

  .collection-submission-mark{
    display:none;
  }

  .collection-locked-inner{
    padding:22px 6px 7px !important;
  }

  .collection-locked-inner .archive-locked-icon{
    font-size:18px;
  }

  .collection-locked-inner .archive-locked-label{
    font-size:6px !important;
  }

  .collection-locked-inner .archive-locked-note{
    display:none;
  }
}


/* Phase 2.3 filter interaction polish */
.collection-filter{
  position:relative;
  z-index:2;
  pointer-events:auto !important;
  touch-action:manipulation;
}

.collection-filter.is-active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-2px;
  height:1px;
  background:rgba(255,255,255,.78);
}


/* =========================================================
   HOUSE OF ZELAYA — MULTI-PHOTO POSTS
   Up to 5 images, one post, stacked like sequential panels.
   ========================================================= */

.post-image-stack{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:0;
  overflow:hidden;
}

.post-image-stack .post-media{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-width:100% !important;
  margin:0 !important;
}

.post-image-stack.is-multi-photo .post-media + .post-media{
  border-top:3px solid #000;
}

/* Keep the homepage's fine outer post border as the frame for the full set. */
@media(min-width:901px){
  .museum-post .post-image-stack{
    margin:-6px -6px 0;
    width:calc(100% + 12px);
  }
}

/* Individual viewer: one continuous vertical piece. */
.detail-image-stack{
  width:min(100%,1040px);
  margin:0 auto !important;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
  box-sizing:border-box;
}

.post-detail > .detail-image-stack{
  max-width:min(100%,1040px) !important;
}

.detail-image-stack .detail-media{
  display:block !important;
  width:auto !important;
  max-width:100% !important;
  height:auto !important;
  max-height:none !important;
  margin:0 auto !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-sizing:border-box;
}

.detail-image-stack.is-multi-photo .detail-media + .detail-media{
  border-top:4px solid #000 !important;
}

/* Archive quietly tells viewers a tile contains a sequence. */
.collection-multi-photo-mark{
  position:absolute;
  z-index:4;
  right:7px;
  bottom:7px;
  padding:3px 5px;
  border:1px solid rgba(255,255,255,.24);
  background:rgba(0,0,0,.58);
  font-size:6px;
  letter-spacing:.12em;
  color:rgba(255,255,255,.82);
  pointer-events:none;
}

/* Admin multi-photo feedback */
#mediaSelectionHint.media-hint-error{
  color:#ff9c9c;
}

.admin-thumb{
  position:relative;
}
.admin-photo-count{
  position:absolute;
  right:4px;
  bottom:4px;
  padding:2px 4px;
  background:rgba(0,0,0,.78);
  border:1px solid rgba(255,255,255,.22);
  font-size:6px;
  letter-spacing:.08em;
  color:#fff;
}

@media(max-width:760px){
  .post-image-stack.is-multi-photo .post-media + .post-media{
    border-top-width:2px;
  }

  .detail-image-stack{
    width:100%;
  }

  .detail-image-stack.is-multi-photo .detail-media + .detail-media{
    border-top-width:3px !important;
  }

  .collection-multi-photo-mark{
    right:5px;
    bottom:5px;
    font-size:5px;
  }
}


/* =========================================================
   HOUSE OF ZELAYA — VERTICAL PHOTO VIEWER FIT
   Portrait images should sit inside the viewport, not dominate it.
   ========================================================= */

@media(min-width:761px){
  .post-detail > .detail-image-stack:not(.is-multi-photo){
    width:auto !important;
    max-width:720px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .post-detail > .detail-image-stack:not(.is-multi-photo) .detail-media{
    display:block !important;
    width:auto !important;
    max-width:min(720px,62vw) !important;
    max-height:60vh !important;
    height:auto !important;
    object-fit:contain !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .post-detail > .detail-image-stack.is-multi-photo{
    width:min(780px,68vw) !important;
    max-width:780px !important;
  }

  .post-detail > .detail-image-stack.is-multi-photo .detail-media{
    width:auto !important;
    max-width:100% !important;
    height:auto !important;
    max-height:none !important;
    object-fit:contain !important;
  }
}

@media(min-width:1400px){
  .post-detail > .detail-image-stack:not(.is-multi-photo) .detail-media{
    max-width:660px !important;
    max-height:58vh !important;
  }
}

@media(max-width:760px){
  .post-detail > .detail-image-stack:not(.is-multi-photo){
    width:100% !important;
    max-width:100% !important;
  }

  .post-detail > .detail-image-stack:not(.is-multi-photo) .detail-media{
    width:auto !important;
    max-width:90vw !important;
    max-height:68vh !important;
    height:auto !important;
    object-fit:contain !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}


/* =========================================================
   HOUSE OF ZELAYA — MAX 3 COLUMNS ON DESKTOP
   Keep the Tumblr-style tight stack, but never shrink posts
   into 4–5 thumbnail-like columns on larger displays.
   ========================================================= */

@media(min-width:901px){
  .feed,
  #feed{
    columns:3 !important;
    column-count:3 !important;
    column-width:auto !important;

    width:min(1280px,calc(100% - 56px)) !important;
    max-width:1280px !important;

    column-gap:14px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}

/* Keep 3 columns even on very large desktop monitors. */
@media(min-width:1500px){
  .feed,
  #feed{
    columns:3 !important;
    column-count:3 !important;
    column-width:auto !important;

    width:min(1340px,calc(100% - 80px)) !important;
    max-width:1340px !important;

    column-gap:16px !important;
  }
}

/* Smaller laptop screens can still use 3 columns, just a tighter wall. */
@media(min-width:901px) and (max-width:1100px){
  .feed,
  #feed{
    columns:3 !important;
    column-count:3 !important;
    width:calc(100% - 34px) !important;
    max-width:none !important;
    column-gap:11px !important;
  }
}

/* Mobile/tablet continue using the existing Admin-controlled mobile system. */
@media(max-width:900px){
  .feed,
  #feed{
    columns:auto !important;
    column-count:auto !important;
  }
}


/* =========================================================
   HOUSE OF ZELAYA — MOBILE COLUMN CONTROL FIX
   The late desktop-3-column patch was resetting mobile to one column.
   This final rule restores the Admin-selected 1 / 2 / 3 columns.
   ========================================================= */
@media(max-width:900px){
  .feed,
  #feed{
    display:block !important;
    columns:var(--hoz-mobile-feed-columns, 2) !important;
    column-count:var(--hoz-mobile-feed-columns, 2) !important;
    column-width:auto !important;
    column-gap:10px !important;
  }

  .feed .post,
  #feed .post{
    width:100% !important;
    max-width:100% !important;
    break-inside:avoid !important;
    -webkit-column-break-inside:avoid !important;
    page-break-inside:avoid !important;
  }
}

/* =========================================================
   ADMIN — HIDDEN POST STATE
   ========================================================= */
.admin-post.is-hidden-post{
  opacity:.58;
  border-color:rgba(255,255,255,.10) !important;
}

.admin-post.is-hidden-post .admin-thumb{
  filter:grayscale(.45);
}

.admin-hidden-badge{
  display:inline-flex;
  align-items:center;
  margin-top:7px;
  padding:3px 6px;
  border:1px solid rgba(255,255,255,.22);
  font-size:7px;
  letter-spacing:.14em;
  color:rgba(255,255,255,.7);
}

.toggle-visibility{
  border:1px solid rgba(255,255,255,.26) !important;
}

.toggle-visibility.is-show-action{
  border-color:rgba(255,255,255,.52) !important;
  color:#fff !important;
}


/* =========================================================
   HOUSE OF ZELAYA — LOCATION + GTA-INSPIRED DIGITAL MAP
   ========================================================= */

/* Home nav: add MAP cleanly without breaking the mobile menu. */
.map-nav-link.is-active{color:#fff!important}
@media(max-width:650px){
  .nav{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    width:min(390px,100%) !important;
    gap:14px 4px !important;
  }
  .nav .mood-nav-button{
    grid-column:3 / 5;
  }
  .nav a,.nav-button{
    font-size:8.1px !important;
    letter-spacing:.075em !important;
  }
}

/* Admin location editor */
.post-location-editor{
  border:1px solid #1b1b1b;
  background:#020202;
  padding:14px;
  display:grid;
  gap:12px;
}
.location-editor-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
.location-editor-head p{margin:5px 0 0}
.location-editor-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.location-editor-grid label{
  display:grid;
  gap:7px;
}
.location-pin-status{
  white-space:nowrap;
  padding:5px 7px;
  border:1px solid #222;
  color:#555;
  font-size:7px;
  letter-spacing:.12em;
}
.location-pin-status.has-pin{
  color:#ff6b27;
  border-color:rgba(255,107,39,.42);
}
.location-current-button{
  width:100%;
}
.location-coordinates summary{
  cursor:pointer;
  color:#666;
  font-size:8px;
  letter-spacing:.12em;
  padding:4px 0;
}
.location-coordinates[open] summary{margin-bottom:10px}
@media(max-width:650px){
  .location-editor-grid{grid-template-columns:1fr}
  .location-editor-head{display:block}
  .location-pin-status{display:inline-flex;margin-top:8px}
}

/* Public location labels */
.post-location,
.detail-location{
  text-align:center;
  text-transform:uppercase;
  color:rgba(255,255,255,.52);
  font-size:8px;
  letter-spacing:.16em;
}
.post-location{
  margin:9px 4px 0;
}
.detail-location{
  width:min(680px,100%);
  margin:16px auto 0;
  padding-bottom:1px;
}
.post-location + .post-date{margin-top:5px!important}

/* Map page */
.map-page-body{
  background:#000;
  min-height:100vh;
}
.map-site-header{
  padding-bottom:40px;
}
.hoz-map-shell{
  width:min(1560px,calc(100% - 44px));
  margin:0 auto 100px;
}
.map-intro{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:30px;
  padding:18px 0 22px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.map-intro h1{
  margin:7px 0 7px;
  font-size:clamp(38px,5vw,72px);
  font-weight:400;
  line-height:1;
}
.map-intro p{
  margin:0;
  max-width:620px;
  color:#666;
  font-size:12px;
}
.map-stat-strip{
  display:flex;
  gap:28px;
}
.map-stat-strip > div{
  min-width:78px;
  text-align:right;
}
.map-stat-strip strong{
  display:block;
  font-size:24px;
  font-weight:400;
}
.map-stat-strip span{
  display:block;
  margin-top:5px;
  color:#555;
  font-size:7px;
  letter-spacing:.13em;
}
.map-stage{
  position:relative;
  height:min(72vh,760px);
  min-height:560px;
  margin-top:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  background:#08090a;
}
.hoz-map{
  position:absolute;
  inset:0;
}
.hoz-map::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 120px rgba(0,0,0,.62);
}
.map-hud{
  position:absolute;
  z-index:5;
  pointer-events:none;
}
.map-hud-left{
  top:18px;
  left:18px;
  width:250px;
  padding:12px;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(0,0,0,.62);
  backdrop-filter:blur(8px);
}
.map-hud-kicker{
  color:#ff6b27;
  font-size:7px;
  letter-spacing:.16em;
}
.map-hud-title{
  margin-top:5px;
  font-size:20px;
}
.map-hud-copy{
  margin-top:7px;
  color:#797979;
  font-family:Arial,Helvetica,sans-serif;
  font-size:9px;
  line-height:1.45;
}
.map-hud-right{
  top:18px;
  right:18px;
  display:flex;
  gap:6px;
  pointer-events:auto;
}
.map-hud-right button{
  border:1px solid rgba(255,255,255,.15);
  background:rgba(0,0,0,.68);
  color:#aaa;
  padding:9px 11px;
  font-size:7px;
  letter-spacing:.12em;
  backdrop-filter:blur(8px);
}
.map-hud-right button:hover{
  color:#fff;
  border-color:rgba(255,107,39,.55);
}
.map-unlocked-panel{
  position:absolute;
  z-index:5;
  left:18px;
  bottom:18px;
  width:220px;
  max-height:34%;
  overflow:auto;
  padding:11px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.66);
  backdrop-filter:blur(8px);
}
.map-panel-title{
  margin-bottom:8px;
  color:#666;
  font-size:7px;
  letter-spacing:.16em;
}
.map-unlocked-states{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;
}
.map-unlocked-state-button{
  border:1px solid rgba(255,255,255,.08);
  background:#080808;
  color:#777;
  padding:7px;
  text-align:left;
}
.map-unlocked-state-button strong{
  display:block;
  color:#ff6b27;
  font-size:11px;
}
.map-unlocked-state-button span{
  display:block;
  margin-top:2px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:6px;
  letter-spacing:.04em;
}
.map-empty{
  position:absolute;
  z-index:6;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(360px,calc(100% - 40px));
  padding:18px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.76);
  color:#777;
  text-align:center;
  font-size:11px;
}
.map-legend{
  display:flex;
  gap:22px;
  flex-wrap:wrap;
  padding:12px 2px 0;
  color:#4f4f4f;
  font-family:Arial,Helvetica,sans-serif;
  font-size:7px;
  letter-spacing:.1em;
}
.map-legend span{
  display:inline-flex;
  align-items:center;
  gap:7px;
}
.legend-state,.legend-pin{
  display:inline-block;
  width:9px;height:9px;
}
.legend-state{
  border:1px solid #ff6b27;
  border-radius:50%;
}
.legend-pin{
  background:#fff;
  transform:rotate(45deg);
}

/* MapLibre visual treatment */
.maplibregl-ctrl-group{
  background:rgba(0,0,0,.72)!important;
  border:1px solid rgba(255,255,255,.12)!important;
}
.maplibregl-ctrl button span{
  filter:invert(1);
  opacity:.65;
}
.maplibregl-ctrl-attrib{
  background:rgba(0,0,0,.65)!important;
  color:#666!important;
  font-size:8px!important;
}
.maplibregl-ctrl-attrib a{color:#888!important}
.maplibregl-popup-content{
  padding:0!important;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
  border-radius:0!important;
  background:#080808!important;
  color:#fff!important;
  box-shadow:0 14px 50px rgba(0,0,0,.65)!important;
}
.maplibregl-popup-tip{border-top-color:#080808!important}
.hoz-map-popup{
  display:block;
  width:230px;
  color:#fff;
  text-decoration:none;
}
.hoz-map-popup img,
.map-popup-media-placeholder{
  display:block;
  width:100%;
  height:130px;
  object-fit:cover;
  background:#111;
}
.map-popup-media-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  color:#666;
  font-size:9px;
  letter-spacing:.14em;
}
.map-popup-copy{
  padding:11px;
}
.map-popup-copy strong{
  display:block;
  font-size:12px;
  font-weight:400;
}
.map-popup-copy span{
  display:block;
  margin-top:3px;
  color:#666;
  font-size:7px;
  letter-spacing:.1em;
}
.map-popup-copy p{
  margin:8px 0 0;
  color:#9a9a9a;
  font-size:10px;
  line-height:1.4;
}
.map-popup-copy b{
  display:block;
  margin-top:10px;
  color:#ff6b27;
  font-size:7px;
  letter-spacing:.12em;
}

/* GTA-ish unlocked nodes + exact pins */
.unlock-state-marker,
.hoz-map-post-pin{
  border:0;
  padding:0;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.unlock-state-marker{
  width:31px;
  height:31px;
  border:1px solid rgba(255,107,39,.8);
  border-radius:50%;
  background:rgba(0,0,0,.76);
  color:#ff6b27;
  box-shadow:0 0 0 6px rgba(255,107,39,.07),0 0 24px rgba(255,107,39,.22);
}
.unlock-state-marker span{
  font-family:Arial,Helvetica,sans-serif;
  font-size:8px;
  font-weight:700;
}
.unlock-state-marker.is-current{
  border-color:#fff;
  color:#fff;
  box-shadow:0 0 0 7px rgba(255,255,255,.07),0 0 28px rgba(255,107,39,.30);
}
.hoz-map-post-pin{
  width:14px;
  height:14px;
  background:#f4f4f4;
  box-shadow:0 0 0 4px rgba(255,255,255,.10),0 0 20px rgba(255,107,39,.55);
}
.hoz-map-post-pin:hover{
  background:#ff6b27;
}

@media(max-width:760px){
  .map-site-header{padding-bottom:24px}
  .hoz-map-shell{
    width:calc(100% - 20px);
    margin-bottom:70px;
  }
  .map-intro{
    grid-template-columns:1fr;
    gap:18px;
  }
  .map-intro h1{font-size:42px}
  .map-stat-strip{
    gap:18px;
    justify-content:flex-start;
  }
  .map-stat-strip > div{text-align:left;min-width:0}
  .map-stage{
    height:68vh;
    min-height:520px;
  }
  .map-hud-left{
    top:10px;
    left:10px;
    width:190px;
    padding:9px;
  }
  .map-hud-copy{display:none}
  .map-hud-right{
    top:10px;
    right:10px;
    display:grid;
  }
  .map-hud-right button{
    padding:7px 8px;
    font-size:6px;
  }
  .map-unlocked-panel{
    left:10px;
    bottom:10px;
    width:175px;
    max-height:29%;
    padding:8px;
  }
  .map-unlocked-states{grid-template-columns:1fr 1fr}
  .map-legend{gap:12px;font-size:6px}
}


/* =========================================================
   HOUSE OF ZELAYA — CHRONOLOGICAL WALL
   Strict date sequence is assigned left-to-right:
   1 → left, 2 → middle, 3 → right, 4 → left, etc.
   Each lane still stacks tightly with no masonry holes.
   ========================================================= */
.feed,
#feed{
  columns:auto !important;
  column-count:auto !important;
  display:block !important;
}

.chronological-wall{
  width:100%;
  display:grid;
  grid-template-columns:repeat(var(--wall-columns,3),minmax(0,1fr));
  gap:14px;
  align-items:start;
}

.chronological-wall-column{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.chronological-wall-column .post{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  display:block !important;
  break-inside:auto !important;
}

@media(min-width:901px){
  .feed,
  #feed{
    width:min(1340px,calc(100% - 56px)) !important;
    max-width:1340px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}

@media(max-width:900px){
  .chronological-wall{
    gap:10px;
  }
  .chronological-wall-column{
    gap:10px;
  }
}

/* =========================================================
   GTA-STYLE MAP COMPLETION HUD
   ========================================================= */
.map-progress-card{
  margin-top:18px;
  padding:15px 16px 13px;
  border:1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(90deg,rgba(255,107,39,.045),transparent 38%),
    #030405;
}

.map-progress-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:20px;
}

.map-progress-kicker{
  display:block;
  color:#686868;
  font-size:7px;
  letter-spacing:.16em;
}

.map-progress-head strong{
  display:block;
  margin-top:3px;
  font-family:Arial,Helvetica,sans-serif;
  font-size:28px;
  font-weight:700;
  letter-spacing:-.04em;
  color:#f3f3f3;
}

.map-progress-head > span{
  color:#888;
  font-family:Arial,Helvetica,sans-serif;
  font-size:8px;
  letter-spacing:.12em;
}

.map-progress-track{
  height:8px;
  margin-top:11px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background:#0b0d0f;
}

.map-progress-fill{
  position:relative;
  height:100%;
  background:linear-gradient(90deg,#9e3515,#ff6b27 58%,#ff9b70);
  box-shadow:0 0 18px rgba(255,107,39,.40);
}

.map-progress-fill::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.28;
  background:repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent 12px,
    rgba(0,0,0,.55) 12px,
    rgba(0,0,0,.55) 13px
  );
}

.map-progress-sub{
  margin-top:7px;
  color:#4f4f4f;
  font-family:Arial,Helvetica,sans-serif;
  font-size:7px;
  letter-spacing:.06em;
}

.map-stage{
  background:#030405 !important;
}

/* Push the digital-map look darker and flatter from above. */
.hoz-map{
  background:#030405;
}

.map-hud-left{
  border-color:rgba(255,107,39,.24) !important;
}

.map-hud-title::after{
  content:" / TRAVEL LOG";
  color:#ff6b27;
  font-size:8px;
  letter-spacing:.12em;
}

.unlock-state-marker{
  display:none !important;
}

/* Exact/city post pins: crisp modern GTA-like nodes. */
.hoz-map-post-pin{
  width:12px !important;
  height:12px !important;
  border:2px solid #050607 !important;
  border-radius:50% !important;
  background:#ff6b27 !important;
  box-shadow:
    0 0 0 2px rgba(255,107,39,.24),
    0 0 14px rgba(255,107,39,.72) !important;
}

.hoz-map-post-pin:hover{
  background:#fff !important;
  box-shadow:
    0 0 0 3px rgba(255,255,255,.16),
    0 0 18px rgba(255,107,39,.9) !important;
}

@media(max-width:760px){
  .map-progress-card{
    padding:12px;
  }
  .map-progress-head strong{
    font-size:24px;
  }
  .map-progress-head > span{
    max-width:130px;
    text-align:right;
  }
  .map-progress-track{
    height:7px;
  }
}


/* =========================================================
   HOUSE OF ZELAYA — FEED POLISH V3
   Newest → oldest in the DOM, tightly packed with no forced
   left/middle/right holes.
   ========================================================= */
.feed,
#feed{
  display:block !important;
  column-count:3 !important;
  column-gap:14px !important;
  column-width:auto !important;
}

.feed > .post,
#feed > .post{
  width:100% !important;
  max-width:100% !important;
  margin:0 0 12px !important;
  break-inside:avoid !important;
  -webkit-column-break-inside:avoid !important;
  page-break-inside:avoid !important;
}

.chronological-wall,
.chronological-wall-column{
  display:contents !important;
}

@media(max-width:900px){
  .feed,
  #feed{
    column-count:var(--hoz-mobile-feed-columns,2) !important;
    column-gap:10px !important;
  }
  .feed > .post,
  #feed > .post{
    margin-bottom:10px !important;
  }
}

/* =========================================================
   MAP POLISH V3
   Cleaner orange language + stronger dark-outside-US feel
   ========================================================= */
.map-stage{
  border-color:rgba(255,107,39,.16) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.02),
    0 22px 70px rgba(0,0,0,.34);
}

.map-progress-card{
  border-color:rgba(255,107,39,.18) !important;
}

.map-progress-track{
  border-color:rgba(255,107,39,.18) !important;
}

.map-unlocked-state-button{
  border-color:rgba(255,107,39,.10) !important;
}

.map-unlocked-state-button:hover{
  border-color:rgba(255,107,39,.42) !important;
  background:rgba(255,107,39,.055) !important;
}

.hoz-map-post-pin{
  width:13px !important;
  height:13px !important;
  border:2px solid #090a0b !important;
  background:#ff6b27 !important;
  box-shadow:
    0 0 0 2px rgba(255,107,39,.18),
    0 0 13px rgba(255,107,39,.48) !important;
}

.hoz-map-post-pin::after{
  content:"";
  position:absolute;
  width:3px;
  height:3px;
  left:3px;
  top:3px;
  border-radius:50%;
  background:#fff4ed;
  opacity:.9;
}

.map-hud-left{
  border-color:rgba(255,107,39,.20) !important;
}

.map-hud-kicker,
.map-panel-title{
  color:#ff6b27 !important;
}

.maplibregl-canvas{
  filter:saturate(.72) brightness(.70) contrast(1.12);
}

.maplibregl-popup-content{
  border-color:rgba(255,107,39,.24) !important;
}


/* =========================================================
   HOUSE OF ZELAYA — CHRONOLOGY FIX V4
   Explicitly prioritizes visual newest -> oldest.
   ========================================================= */
.feed,
#feed{
  columns:auto !important;
  column-count:auto !important;
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
  width:min(760px,calc(100% - 28px)) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.feed > .post,
#feed > .post{
  width:100% !important;
  max-width:760px !important;
  margin:0 !important;
  break-inside:auto !important;
}

@media(max-width:900px){
  .feed,
  #feed{
    width:calc(100% - 18px) !important;
    gap:10px !important;
  }
}

/* =========================================================
   MAP V4 — ABOVE-THE-FOLD / CURRENT LOCATION EXPERIENCE
   ========================================================= */
.hoz-map-shell{
  width:min(1560px,calc(100% - 28px)) !important;
  margin-top:0 !important;
}

.map-stage-primary{
  height:min(78vh,820px) !important;
  min-height:620px !important;
  margin-top:0 !important;
  border-color:rgba(255,107,39,.18) !important;
}

.map-site-header{
  padding-bottom:18px !important;
}

.map-map-title{
  position:absolute;
  z-index:6;
  left:18px;
  top:18px;
  padding:10px 12px;
  background:rgba(0,0,0,.70);
  border:1px solid rgba(255,107,39,.18);
  backdrop-filter:blur(9px);
  pointer-events:none;
}

.map-map-title strong{
  display:block;
  margin-top:4px;
  font-size:15px;
  font-weight:400;
  letter-spacing:.05em;
}

.map-current-location-card{
  position:absolute;
  z-index:7;
  left:50%;
  top:18px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:11px;
  min-width:250px;
  padding:10px 13px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.76);
  backdrop-filter:blur(10px);
  box-shadow:0 10px 34px rgba(0,0,0,.3);
}

.map-current-location-card small,
.map-current-location-card span{
  display:block;
  font-family:Arial,Helvetica,sans-serif;
}

.map-current-location-card small{
  color:#747474;
  font-size:7px;
  letter-spacing:.15em;
}

.map-current-location-card strong{
  display:block;
  margin-top:2px;
  font-size:15px;
  font-weight:400;
  color:#f5f2ec;
}

.map-current-location-card > div:last-child > span{
  margin-top:2px;
  color:#ff6b27;
  font-size:7px;
  letter-spacing:.10em;
}

.current-location-signal{
  width:26px;
  height:26px;
  position:relative;
  flex:0 0 26px;
}

.current-location-signal span{
  position:absolute;
  inset:50% auto auto 50%;
  width:6px;
  height:6px;
  margin:-3px;
  border:1px solid #ff6b27;
  border-radius:50%;
}

.current-location-signal span:nth-child(2){
  width:15px;height:15px;margin:-7.5px;
  opacity:.55;
}

.current-location-signal span:nth-child(3){
  width:25px;height:25px;margin:-12.5px;
  opacity:.22;
}

.map-current-location-card.is-locating .current-location-signal span{
  animation:hozLocationPulse 1.15s ease-out infinite;
}

.map-current-location-card.is-locating .current-location-signal span:nth-child(2){
  animation-delay:.15s;
}
.map-current-location-card.is-locating .current-location-signal span:nth-child(3){
  animation-delay:.3s;
}

@keyframes hozLocationPulse{
  0%{transform:scale(.72);opacity:.9}
  80%,100%{transform:scale(1.22);opacity:.08}
}

.map-current-location-card.is-locked{
  border-color:rgba(255,107,39,.30);
  box-shadow:0 0 28px rgba(255,107,39,.08),0 10px 34px rgba(0,0,0,.3);
}

.map-progress-overlay{
  position:absolute;
  z-index:6;
  left:18px;
  right:18px;
  bottom:18px;
  padding:10px 12px;
  border:1px solid rgba(255,107,39,.18);
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(9px);
}

.map-progress-overlay-top,
.map-progress-overlay-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  font-family:Arial,Helvetica,sans-serif;
}

.map-progress-overlay-top span,
.map-progress-overlay-bottom{
  color:#707070;
  font-size:7px;
  letter-spacing:.12em;
}

.map-progress-overlay-top strong{
  color:#f4f4f4;
  font-size:18px;
}

.map-progress-overlay .map-progress-track{
  height:6px;
  margin:8px 0 7px;
}

.map-progress-overlay-bottom b{
  color:#ff6b27;
  font-weight:700;
}

.map-after-panel{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:30px;
  padding:26px 2px 20px;
  border-bottom:1px solid rgba(255,255,255,.09);
}

.map-after-panel h1{
  margin:6px 0 5px;
  font-size:clamp(34px,4vw,62px);
  font-weight:400;
}

.map-after-panel p{
  max-width:620px;
  margin:0;
  color:#626262;
  font-size:11px;
}

.hoz-current-base-marker{
  width:30px;
  height:30px;
  border:1px solid rgba(255,255,255,.78);
  border-radius:50%;
  box-shadow:
    0 0 0 6px rgba(255,255,255,.05),
    0 0 22px rgba(255,107,39,.22);
  pointer-events:none;
}

.hoz-current-base-marker::before,
.hoz-current-base-marker::after{
  content:"";
  position:absolute;
  background:#f4f0e8;
  opacity:.78;
}

.hoz-current-base-marker::before{
  width:1px;height:38px;left:14px;top:-5px;
}
.hoz-current-base-marker::after{
  width:38px;height:1px;left:-5px;top:14px;
}

.hoz-current-base-marker span{
  position:absolute;
  width:6px;height:6px;
  left:11px;top:11px;
  border-radius:50%;
  background:#ff6b27;
  box-shadow:0 0 12px rgba(255,107,39,.8);
}

.legend-current{
  display:inline-block;
  width:9px;
  height:9px;
  border:1px solid #f2eee8;
  border-radius:50%;
  box-shadow:0 0 8px rgba(255,107,39,.22);
}

@media(max-width:760px){
  .hoz-map-shell{
    width:calc(100% - 14px) !important;
  }

  .map-stage-primary{
    height:72vh !important;
    min-height:540px !important;
  }

  .map-map-title{
    left:9px;
    top:9px;
    padding:8px;
  }

  .map-map-title strong{
    font-size:11px;
  }

  .map-current-location-card{
    top:58px;
    min-width:0;
    width:calc(100% - 108px);
    max-width:270px;
    padding:8px 10px;
  }

  .map-hud-right{
    top:9px !important;
    right:9px !important;
  }

  .map-unlocked-panel{
    display:none !important;
  }

  .map-progress-overlay{
    left:9px;
    right:9px;
    bottom:9px;
  }

  .map-after-panel{
    grid-template-columns:1fr;
    gap:18px;
    padding-top:20px;
  }

  .map-after-panel .map-stat-strip{
    justify-content:flex-start;
  }
}


/* HOUSE OF ZELAYA — V6 DEFINITIVE HOME + MAP FIX */
.feed,#feed{
  display:flex !important; flex-direction:column !important; columns:auto !important; column-count:auto !important;
  width:min(1340px,calc(100% - 44px)) !important; max-width:1340px !important;
  margin-left:auto !important; margin-right:auto !important; gap:14px !important;
}
.chronological-row{
  display:grid !important; grid-template-columns:repeat(var(--row-columns,3),minmax(0,1fr)) !important;
  width:100% !important; gap:14px !important; align-items:start !important;
}
.chronological-row > .post{width:100% !important; min-width:0 !important; max-width:none !important; margin:0 !important;}

/* About 40 percent brighter than the last pass. */
.maplibregl-canvas{filter:saturate(.92) brightness(1.24) contrast(1.01) !important;}
.map-current-location-card small,.map-progress-overlay-top span,.map-progress-overlay-bottom,.map-panel-title,.map-unlocked-state-button span,.map-after-panel p,.map-legend{color:#c7c2b9 !important;}
.map-current-location-card strong,.map-map-title strong,.map-progress-overlay-top strong,.map-unlocked-state-button strong,.map-hud-right button{color:#f6f2ea !important;}
.map-current-location-card,.map-progress-overlay,.map-map-title,.map-hud-right button{background:rgba(0,0,0,.54) !important;}

/* CRITICAL: never set transform on this element; MapLibre uses transform to position markers. */
.hoz-map-post-pin{
  width:14px !important; height:14px !important; border:2px solid #090a0b !important; border-radius:50% !important;
  background:#ff6b27 !important; box-shadow:0 0 0 3px rgba(255,107,39,.22),0 0 17px rgba(255,107,39,.72) !important;
}
.hoz-map-post-pin::after{content:"";position:absolute;width:4px;height:4px;left:3px;top:3px;border-radius:50%;background:#fff5ed;}
@media(max-width:900px){.feed,#feed{width:calc(100% - 18px) !important;gap:10px !important;}.chronological-row{gap:10px !important;}}


/* =========================================================
   HOUSE OF ZELAYA — HOME MASONRY V7
   Goal: eliminate the giant dead spaces caused by rigid rows.
   The post data itself remains sorted newest -> oldest.
   ========================================================= */

.feed,
#feed{
  display:block !important;
  width:min(1340px,calc(100% - 44px)) !important;
  max-width:1340px !important;
  margin-left:auto !important;
  margin-right:auto !important;

  columns:auto !important;
  column-count:3 !important;
  column-width:auto !important;
  column-gap:14px !important;

  gap:0 !important;
}

/* Old row wrappers are no longer used, but neutralize them if an old
   cached DOM briefly survives during a refresh. */
.chronological-row{
  display:contents !important;
}

.feed > .post,
#feed > .post,
.chronological-row > .post{
  display:inline-block !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;

  margin:0 0 14px !important;
  vertical-align:top !important;

  break-inside:avoid !important;
  -webkit-column-break-inside:avoid !important;
  page-break-inside:avoid !important;
}

/* Keep the user's Admin-controlled mobile density. */
@media(max-width:900px){
  .feed,
  #feed{
    width:calc(100% - 18px) !important;
    column-count:var(--hoz-mobile-feed-columns,2) !important;
    column-gap:10px !important;
  }

  .feed > .post,
  #feed > .post,
  .chronological-row > .post{
    margin-bottom:10px !important;
  }
}

/* HOUSE OF ZELAYA — HOME BREATHING ROOM V8 */
.feed,#feed{column-gap:22px !important;}
.feed > .post,#feed > .post,.chronological-row > .post{margin-bottom:22px !important;}

@media(max-width:900px){
  .feed,#feed{column-gap:14px !important;}
  .feed > .post,#feed > .post,.chronological-row > .post{margin-bottom:14px !important;}
}


/* =========================================================
   HOUSE OF ZELAYA — CONTROL CENTER V9
   Phone-first publishing + fast post management.
   ========================================================= */

#dashboard{
  position:relative;
}

.admin-jumpbar{
  position:sticky;
  top:8px;
  z-index:80;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:5px;
  margin:12px 0 18px;
  padding:6px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(5,5,5,.90);
  backdrop-filter:blur(16px);
  box-shadow:0 10px 30px rgba(0,0,0,.24);
}

.admin-jumpbar button{
  min-width:0;
  min-height:43px;
  padding:8px 6px;
  border:0;
  background:transparent;
  color:#aaa49d;
  font:600 8px/1.1 Arial,Helvetica,sans-serif;
  letter-spacing:.09em;
}

.admin-jumpbar button span{
  display:block;
  margin-bottom:4px;
  color:#ff6b27;
  font-size:13px;
  line-height:1;
}

.admin-jumpbar button:hover,
.admin-jumpbar button:focus-visible{
  background:#111;
  color:#fff;
}

.admin-section-card{
  scroll-margin-top:82px;
  border-color:rgba(255,255,255,.12) !important;
  box-shadow:inset 2px 0 0 rgba(255,107,39,.16);
}

.composer-main-panel,
.posts-manager-panel{
  box-shadow:inset 2px 0 0 rgba(255,107,39,.48);
}

.admin-section-kicker{
  margin-bottom:4px;
  color:#ff6b27;
  font:600 7px/1 Arial,Helvetica,sans-serif;
  letter-spacing:.18em;
}

.posts-manager-heading{
  align-items:flex-start;
}

.post-manager-toolbar{
  position:sticky;
  top:68px;
  z-index:20;
  margin:14px 0 10px;
  padding:10px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(7,7,7,.94);
  backdrop-filter:blur(12px);
}

.post-visibility-filters{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:5px;
}

.post-filter{
  min-height:39px;
  border:1px solid rgba(255,255,255,.10);
  background:#0c0c0c;
  color:#817d77;
  font:600 8px Arial,Helvetica,sans-serif;
  letter-spacing:.08em;
}

.post-filter span{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  min-width:20px;
  height:18px;
  margin-left:4px;
  border-radius:20px;
  background:#171717;
  color:#aaa;
}

.post-filter.active{
  border-color:rgba(255,107,39,.55);
  background:rgba(255,107,39,.07);
  color:#f0ece6;
}

.post-filter.active span{
  color:#ff6b27;
}

.post-manager-search-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 110px;
  gap:6px;
  margin-top:7px;
}

.post-manager-search-row input,
.post-manager-search-row select{
  width:100%;
  min-height:42px;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.11);
  background:#0a0a0a;
  color:#e7e2dc;
  padding:9px 10px;
  font-size:11px;
}

.post-manager-status{
  margin:9px 2px;
  color:#6e6964;
  font:600 7px Arial,Helvetica,sans-serif;
  letter-spacing:.14em;
}

.admin-post{
  position:relative;
  border:1px solid rgba(255,255,255,.11) !important;
  background:#080808;
  transition:border-color .16s ease,opacity .16s ease;
}

.admin-post:hover{
  border-color:rgba(255,107,39,.26) !important;
}

.admin-post.is-hidden-post{
  opacity:.58;
  border-style:dashed !important;
}

.admin-hidden-badge{
  color:#ff6b27 !important;
}

.admin-edit{
  gap:5px !important;
}

.admin-edit button{
  min-height:34px;
}

.admin-edit .edit-button{
  border-color:rgba(255,107,39,.35) !important;
  color:#f1ede7 !important;
}

.toggle-visibility{
  color:#c9c3bc !important;
}

.toggle-visibility.is-show-action{
  border-color:rgba(255,107,39,.48) !important;
  color:#ff7a3d !important;
}

.post-manager-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:160px;
  border:1px dashed rgba(255,255,255,.10);
  color:#777;
  text-align:center;
}

.post-manager-empty strong{
  color:#d6d0ca;
  font-weight:400;
}

.post-manager-empty span{
  margin-top:5px;
  font:9px Arial,Helvetica,sans-serif;
}

.admin-back-top{
  position:fixed;
  right:14px;
  bottom:max(16px,calc(env(safe-area-inset-bottom) + 10px));
  z-index:120;
  width:46px;
  height:46px;
  border:1px solid rgba(255,107,39,.38);
  border-radius:50%;
  background:rgba(5,5,5,.88);
  color:#f4efe8;
  backdrop-filter:blur(12px);
  opacity:0;
  pointer-events:none;
  transform:translateY(8px);
  transition:.18s ease;
  box-shadow:0 8px 26px rgba(0,0,0,.35);
}

.admin-back-top.show{
  opacity:1;
  pointer-events:auto;
  transform:none;
}

.admin-back-top span{
  display:block;
  margin-top:-2px;
  color:#ff6b27;
  font-size:17px;
  line-height:14px;
}

.admin-back-top small{
  display:block;
  margin-top:3px;
  font:600 6px Arial,Helvetica,sans-serif;
  letter-spacing:.12em;
}

@media(max-width:650px){
  .admin-jumpbar{
    top:5px;
    margin-left:-2px;
    margin-right:-2px;
  }

  .admin-jumpbar button{
    min-height:46px;
    padding-left:2px;
    padding-right:2px;
    font-size:6.5px;
    letter-spacing:.04em;
  }

  .admin-jumpbar button span{
    font-size:12px;
  }

  .post-manager-toolbar{
    top:64px;
    margin-left:-4px;
    margin-right:-4px;
    padding:8px;
  }

  .post-manager-search-row{
    grid-template-columns:minmax(0,1fr) 96px;
  }

  .admin-post{
    padding:8px !important;
  }

  .admin-edit{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .admin-edit input[type="date"]{
    grid-column:1 / -1;
    width:100%;
    box-sizing:border-box;
  }

  .admin-edit .danger{
    grid-column:2;
  }

  .admin-back-top{
    width:43px;
    height:43px;
    right:11px;
  }
}

/* HOUSE OF ZELAYA — QUICK PHOTO IMPORT V10 */
.admin-jumpbar{
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
}
#quickPhotoImport span{
  color:#ff6b27;
}
@media(max-width:650px){
  .admin-jumpbar button{
    font-size:6px !important;
  }
}


/* V10.1 — Keep Back to Top clear of Little Curator */
@media(max-width:650px){
  .admin-back-top{
    right:18px !important;
    bottom:max(142px,calc(env(safe-area-inset-bottom) + 136px)) !important;
  }
}

/* V10.2 — make iPhone photo import impossible to miss */
#quickPhotoImport.quick-photo-import{
  background:rgba(255,107,39,.10) !important;
  border:1px solid rgba(255,107,39,.42) !important;
  color:#f5eee8 !important;
}
#quickPhotoImport.quick-photo-import span{color:#ff6b27 !important;}

.quick-photo-callout{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 16px;
  padding:12px;
  border:1px solid rgba(255,107,39,.35);
  background:rgba(255,107,39,.055);
}
.quick-photo-callout div{min-width:0;}
.quick-photo-callout strong{
  display:block;
  color:#f2ede7;
  font:600 8px/1.2 Arial,Helvetica,sans-serif;
  letter-spacing:.10em;
}
.quick-photo-callout span{
  display:block;
  margin-top:5px;
  color:#8e8983;
  font:9px/1.35 Arial,Helvetica,sans-serif;
}
.quick-photo-callout button{
  flex:0 0 auto;
  min-height:38px;
  padding:0 12px;
  border:1px solid #ff6b27;
  background:#ff6b27;
  color:#090909;
  font:700 7px Arial,Helvetica,sans-serif;
  letter-spacing:.08em;
}
@media(max-width:650px){
  .admin-jumpbar{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
  #quickPhotoImport.quick-photo-import{
    font-size:6.5px !important;
  }
  .quick-photo-callout{
    align-items:stretch;
    flex-direction:column;
  }
  .quick-photo-callout button{
    width:100%;
    min-height:44px;
  }
}

/* HoZ V11: desktop HOME breathing room; mobile settings remain intact. */
@media(min-width:901px){
 .feed,#feed{column-count:2 !important;column-gap:clamp(32px,4vw,64px) !important;width:min(1280px,calc(100% - 96px)) !important;}
 .feed > .post,#feed > .post{margin-bottom:48px !important;}
}
/* Map information has its own rows, outside the interactive canvas. */
.map-stage-primary{display:grid !important;grid-template-columns:minmax(0,1fr) auto;gap:14px;height:auto !important;min-height:0 !important;padding:18px !important;overflow:visible !important;}
.map-stage-primary .map-map-title,.map-stage-primary .map-current-location-card,.map-stage-primary .map-hud-right,.map-stage-primary .map-progress-overlay,.map-stage-primary .map-unlocked-panel,.map-stage-primary .map-empty{position:static !important;inset:auto !important;transform:none !important;width:auto !important;max-width:none !important;margin:0 !important;}
.map-stage-primary .map-map-title{grid-column:1;grid-row:1;padding:0 !important;align-self:center;}
.map-stage-primary .map-current-location-card{grid-column:1;grid-row:2;padding:10px 12px !important;justify-self:start;min-width:0 !important;}
.map-stage-primary .map-current-location-card strong{font-size:17px !important;}
.map-stage-primary .map-current-location-card span{font-size:10px !important;}
.map-stage-primary .map-hud-right{grid-column:2;grid-row:1 / 3;display:flex !important;flex-direction:column;align-self:center;gap:8px;}
.map-stage-primary .hoz-map{position:relative !important;inset:auto !important;grid-column:1 / -1;grid-row:3;width:100% !important;height:clamp(420px,65vh,760px) !important;min-height:0 !important;border:1px solid #28231f;}
.map-stage-primary .map-progress-overlay{grid-column:1 / -1;grid-row:4;padding:10px !important;}
.map-stage-primary .map-unlocked-panel{grid-column:1 / -1;grid-row:5;}
.map-stage-primary .map-unlocked-states{display:flex !important;flex-wrap:wrap;gap:8px;}
.map-stage-primary .map-empty{grid-column:1 / -1;grid-row:6;}
.map-stage-primary [hidden]{display:none !important;}
.hoz-permanent-base-marker{width:12px;height:12px;border:2px solid #f4f0e8;border-radius:50%;background:#171310;box-shadow:0 0 0 4px #ffffff20;}
@media(max-width:600px){
 .map-stage-primary{grid-template-columns:minmax(0,1fr);padding:10px !important;gap:10px;}
 .map-stage-primary .map-current-location-card{grid-column:1;grid-row:2;justify-self:stretch;}
 .map-stage-primary .map-hud-right{grid-column:1;grid-row:3;flex-direction:row;flex-wrap:wrap;}
 .map-stage-primary .map-hud-right button{flex:1;min-height:44px;white-space:normal;}
 .map-stage-primary .hoz-map{grid-row:4;height:58vh !important;min-height:340px !important;}
 .map-stage-primary .map-progress-overlay{grid-row:5;}
 .map-stage-primary .map-unlocked-panel{grid-row:6;}
 .map-stage-primary .map-empty{grid-row:7;}
}
@media(prefers-reduced-motion:reduce){.hoz-current-base-marker,.hoz-current-base-marker *{animation:none !important;}}

@media(min-width:901px){.admin-jumpbar{grid-template-columns:repeat(7,minmax(0,1fr)) !important;}}
.hoz-map-post-pin{min-height:0 !important;min-width:0 !important;padding:0 !important;box-sizing:border-box !important;}