*{box-sizing:border-box}
:root{--ink:#111;--muted:#6b6b6b;--line:#dedede;--paper:#f5f2ec;--white:#fff;--accent:#d9ff45}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,Arial,Helvetica,sans-serif;color:var(--ink);background:#fff;line-height:1.45}
a{color:inherit}
.wrap{width:min(1180px,calc(100% - 36px));margin:auto}
.hero{background:var(--paper);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:22px 0}
.brand{font-weight:900;font-size:22px;text-decoration:none;letter-spacing:-.04em}
.brand span{font-weight:500;color:var(--muted)}
.button{display:inline-block;border:1px solid var(--ink);padding:11px 16px;border-radius:999px;text-decoration:none;background:transparent;font-weight:750;cursor:pointer}
.button-dark{background:var(--ink);color:#fff}
.button.big{padding:15px 20px;font-size:16px}
.hero-grid{display:grid;grid-template-columns:1.6fr .75fr;gap:80px;padding:78px 0 86px;align-items:end}
.eyebrow{font-size:12px;font-weight:900;letter-spacing:.13em;margin-bottom:12px}
h1,h2,h3{letter-spacing:-.045em;line-height:1.02;margin:0}
h1{font-size:clamp(46px,7vw,88px);max-width:900px}
h2{font-size:clamp(32px,4vw,56px)}
h3{font-size:22px}
.lead{font-size:21px;max-width:700px;margin:24px 0 0}
.hero-note{border-top:3px solid var(--ink);padding-top:16px;display:grid;gap:8px;font-size:15px}
.hero-note b{font-size:18px}
.section{padding:74px 0}
.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:24px;gap:20px}
.count{color:var(--muted)}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:26px 0 34px}
.filters a{border:1px solid var(--line);border-radius:999px;text-decoration:none;padding:9px 13px;font-size:14px}
.filters a.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.masonry{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;align-items:start}
.card{min-width:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:white;transition:border-color .18s ease,transform .18s ease}
.card img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:#eee}
.card-body{padding:17px}
.card h3{margin:7px 0 9px}
.card p{margin:0 0 12px;color:#3e3e3e}
.tag{display:inline-block;font-size:11px;font-weight:850;text-transform:uppercase;letter-spacing:.08em;background:var(--accent);padding:5px 8px;border-radius:999px}
.source{font-size:13px;color:#555}
.card-foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #eee;margin-top:16px;padding-top:13px;gap:12px}
.vote{min-width:58px;height:38px;border:0;background:#111;color:#fff;padding:7px 11px;border-radius:999px;font-size:14px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:transform .15s ease,opacity .15s ease,background .15s ease}.vote:disabled{cursor:default}.vote.loading{opacity:.55}.vote.voted{background:#444}.vote .heart{font-size:15px;line-height:1}
.author{font-size:12px;color:var(--muted)}
.empty{border:1px dashed #aaa;padding:50px;border-radius:18px;text-align:center;background:#fafafa}
.submit-section{background:var(--paper);border-top:1px solid var(--line)}
.submit-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;padding:80px 0}
.submit-grid p{font-size:18px}
.small{font-size:14px!important;color:var(--muted)}
.submit-form{background:white;border:1px solid var(--line);padding:26px;border-radius:20px;display:grid;gap:16px}
label{display:grid;gap:7px;font-weight:750}
label em{font-weight:500;color:var(--muted);font-style:normal}
input,textarea,select{width:100%;font:inherit;border:1px solid #bbb;border-radius:11px;padding:13px 14px;background:#fff}
textarea{resize:vertical}
.upload{border:1px dashed #999;padding:15px;border-radius:12px}
.upload input{border:0;padding:0}
.upload small{font-weight:500;color:var(--muted)}
.check{grid-template-columns:auto 1fr;align-items:start;font-weight:500;font-size:13px}
.check input{width:18px;height:18px;margin-top:1px}
.flash{margin-top:22px;padding:14px 16px;border-radius:12px;border:1px solid}
.flash.success{background:#efffe9;border-color:#98cf83}
.flash.error{background:#fff0f0;border-color:#e1a1a1}
.footer{padding:34px 0;border-top:1px solid var(--line)}
.footer .wrap{display:flex;justify-content:space-between;gap:20px;color:var(--muted)}
.footer b{color:var(--ink)}
.admin-body{background:#f3f3f1}
.login-box{max-width:430px;margin:10vh auto;background:white;border:1px solid var(--line);border-radius:18px;padding:28px}
.login-box h1{font-size:44px;margin-bottom:24px}
.login-box form{display:grid;gap:16px}
.admin-top{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:30px}
.admin-top h1{font-size:48px}
.admin-list{display:grid;gap:12px}
.admin-card{background:white;border:1px solid var(--line);border-radius:15px;padding:12px;display:grid;grid-template-columns:150px 1fr auto;gap:18px;align-items:start}
.admin-card img{width:150px;height:120px;object-fit:cover;border-radius:10px}
.admin-content h3{margin:6px 0 8px}
.admin-content p{margin:6px 0}
.status{font-size:10px;text-transform:uppercase;letter-spacing:.1em;font-weight:900;display:inline-block;margin-right:6px}
.status.pending{color:#a36300}.status.approved{color:#237c2b}.status.rejected{color:#a32323}
.admin-actions{display:grid;gap:7px}
.admin-actions button{border:1px solid #bbb;background:white;padding:9px 11px;border-radius:9px;cursor:pointer}
.admin-actions .ok{background:#111;color:#fff;border-color:#111}
.admin-actions .danger{color:#a00}
@media(max-width:760px){
  .hero-grid,.submit-grid{grid-template-columns:1fr;gap:36px}
  .hero-grid{padding:48px 0 56px}
  .section{padding:50px 0}
  .submit-grid{padding:54px 0}
  .admin-card{grid-template-columns:90px 1fr}
  .admin-card img{width:90px;height:90px}
  .admin-actions{grid-column:1/-1;grid-template-columns:repeat(3,1fr)}
  .footer .wrap{display:grid}
}

.card-body.compact{padding:12px 14px}
.card-foot.simple{border-top:0;margin-top:0;padding-top:0}
.simple-form{align-content:start}
.simple-form select{font-size:17px;padding:15px}
.simple-form .upload{padding:20px}
.simple-form .button{margin-top:4px}

/* Compact responsive moodboard */
.card-body.compact{padding:10px 11px}
.card-foot.simple{border-top:0;margin-top:0;padding-top:0;gap:8px}
.card-foot.simple .tag{max-width:calc(100% - 66px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tag{font-size:10px;padding:4px 7px}
.vote-form{margin:0}
.vote-toast{
  position:fixed;
  left:50%;
  bottom:24px;
  transform:translate(-50%,18px);
  z-index:1000;
  background:#111;
  color:#fff;
  border-radius:999px;
  padding:10px 15px;
  font-size:14px;
  font-weight:750;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
  max-width:calc(100% - 32px);
  text-align:center;
}
.vote-toast.show{opacity:1;transform:translate(-50%,0)}
.vote-toast.info{background:#444}
.vote-toast.error{background:#8f2525}

@media (hover:hover) and (pointer:fine){
  .card:hover{border-color:#aaa;transform:translateY(-2px)}
  .vote:not(:disabled):hover{transform:scale(1.05)}
}

@media(max-width:1100px){
  .masonry{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:820px){
  .masonry{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .section-head{align-items:flex-start}
}
@media(max-width:590px){
  .wrap{width:min(100% - 24px,1180px)}
  .masonry{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .card{border-radius:12px}
  .card-body.compact{padding:8px}
  .card-foot.simple{align-items:center}
  .tag{font-size:9px;max-width:calc(100% - 55px)!important}
  .vote{min-width:50px;height:34px;padding:6px 9px;font-size:13px}
  .filters{gap:6px;margin:20px 0 26px}
  .filters a{padding:8px 10px;font-size:12px}
}
@media(max-width:360px){
  .masonry{grid-template-columns:1fr}
}

.brand-logo{
  display:inline-flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
}
.brand-logo img{
  display:block;
  width:104px;
  height:auto;
}
.brand-logo span{
  font-size:16px;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--muted);
}
@media(max-width:590px){
  .brand-logo{gap:8px}
  .brand-logo img{width:82px}
  .brand-logo span{font-size:14px}
}

.board-loading{
  opacity:.42;
  transition:opacity .14s ease;
  pointer-events:none;
}
.masonry,.empty{
  transition:opacity .14s ease;
}


/* =========================================================
   FINAL AJC MOBILE / PINTEREST OVERRIDES
   These rules intentionally override earlier experimental CSS.
   ========================================================= */

/* Compact header logo everywhere */
.nav{
  min-height:64px !important;
  padding:14px 0 !important;
}
.brand-logo{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  width:auto !important;
  max-width:160px !important;
  min-width:0 !important;
}
.brand-logo img{
  display:block !important;
  width:54px !important;
  max-width:54px !important;
  height:auto !important;
  max-height:44px !important;
  object-fit:contain !important;
  flex:0 0 auto !important;
}
.brand-logo span{
  display:inline-block !important;
  font-size:12px !important;
  line-height:1 !important;
  font-weight:800 !important;
  color:var(--muted) !important;
}

/* Real Pinterest-style masonry: natural image height, never crop */
.masonry{
  display:block !important;
  columns:5 200px !important;
  column-gap:14px !important;
}
.card{
  display:inline-block !important;
  width:100% !important;
  break-inside:avoid !important;
  page-break-inside:avoid !important;
  margin:0 0 14px !important;
  border-radius:14px !important;
  overflow:hidden !important;
  vertical-align:top !important;
}
.card img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  object-fit:contain !important;
  object-position:center !important;
  background:#f3f3f3 !important;
}
.card-body.compact{
  padding:9px 10px !important;
}
.card-foot.simple{
  border-top:0 !important;
  margin:0 !important;
  padding:0 !important;
  gap:7px !important;
}

/* Desktop / tablet */
@media(max-width:1100px){
  .masonry{columns:4 180px !important}
}
@media(max-width:820px){
  .masonry{columns:3 165px !important;column-gap:12px !important}
}

/* Phone: exactly two Pinterest-like columns */
@media(max-width:590px){
  .wrap{
    width:calc(100% - 24px) !important;
    max-width:none !important;
  }

  .nav{
    min-height:56px !important;
    padding:10px 0 !important;
  }
  .brand-logo{
    max-width:132px !important;
    gap:6px !important;
  }
  .brand-logo img{
    width:44px !important;
    max-width:44px !important;
    max-height:36px !important;
  }
  .brand-logo span{
    font-size:11px !important;
  }

  .masonry{
    display:block !important;
    columns:2 !important;
    column-gap:9px !important;
  }
  .card{
    margin:0 0 9px !important;
    border-radius:11px !important;
  }
  .card img{
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    aspect-ratio:auto !important;
    object-fit:contain !important;
  }
  .card-body.compact{
    padding:7px 7px !important;
  }
  .tag{
    font-size:8.5px !important;
    padding:4px 6px !important;
    max-width:calc(100% - 50px) !important;
  }
  .vote{
    min-width:46px !important;
    height:32px !important;
    padding:5px 8px !important;
    font-size:12px !important;
  }
  .vote .heart{
    font-size:13px !important;
  }

  .filters{
    gap:6px !important;
    margin:18px 0 28px !important;
  }
  .filters a{
    padding:8px 10px !important;
    font-size:12px !important;
  }
}

/* Keep two columns even on smaller iPhones; one column only for truly tiny widths */
@media(max-width:300px){
  .masonry{columns:1 !important}
}


/* =========================================================
   FINAL DESKTOP BALANCE OVERRIDES
   Mobile layout below 590px stays unchanged.
   ========================================================= */

@media(min-width:591px){
  .wrap{
    width:min(1380px,calc(100% - 48px)) !important;
  }

  .brand-logo{
    max-width:240px !important;
    gap:10px !important;
  }

  .brand-logo img{
    width:96px !important;
    max-width:96px !important;
    height:auto !important;
    max-height:none !important;
  }

  .brand-logo span{
    font-size:14px !important;
  }

  .masonry{
    columns:4 260px !important;
    column-gap:18px !important;
  }

  .card{
    margin-bottom:18px !important;
  }
}

@media(min-width:591px) and (max-width:1100px){
  .masonry{
    columns:3 220px !important;
    column-gap:14px !important;
  }
}