:root{
  --paper:#FBF9F6; --surface:#FFFFFF; --ink:#22201D; --muted:#8A8378;
  --line:#EAE6E0; --accent:#5E7C6B; --accent-deep:#49604F; --err:#9B4A3C;
  --shadow:0 1px 2px rgba(34,32,29,.04), 0 10px 30px rgba(34,32,29,.07);
  --serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--sans); color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  line-height:1.5;
}
a{color:var(--accent-deep)}
img{max-width:100%}

/* ============================ LOGIN ============================ */
body.gate{
  min-height:100dvh; display:grid; place-items:center; padding:28px 20px;
  background:
    radial-gradient(120% 80% at 50% -10%, #FFFFFF 0%, var(--paper) 55%),
    var(--paper);
}
.gate-wrap{position:relative; width:100%; max-width:432px}

/* "shoebox of prints" — a few tilted empty frames behind the card */
.stack{position:absolute; inset:0; z-index:0}
.stack span{
  position:absolute; left:50%; top:2px; width:100%; height:96%;
  translate:-50% 0; background:var(--surface);
  border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow);
}
.stack span:nth-child(1){rotate:-6.5deg}
.stack span:nth-child(2){rotate:5.5deg}
.stack span:nth-child(3){rotate:-2deg; opacity:.9}

.card{
  position:relative; z-index:1; background:var(--surface);
  border:1px solid var(--line); border-radius:22px; padding:38px 34px 30px;
  box-shadow:var(--shadow); text-align:center;
}
.eyebrow{
  margin:0 0 14px; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent); font-weight:600;
}
.wordmark{
  font-family:var(--serif); font-weight:600; font-optical-sizing:auto;
  font-size:clamp(2rem, 7vw, 2.7rem); line-height:1.02; letter-spacing:-.01em;
  margin:0 0 14px;
}
.lede{margin:0 auto 24px; max-width:31ch; color:var(--muted); font-size:.98rem}

.form{display:grid; gap:9px; text-align:left; margin-top:6px}
.form label{font-size:.8rem; color:var(--muted); font-weight:600; padding-left:2px}
.form input{
  width:100%; padding:13px 14px; font-size:1rem; font-family:var(--sans);
  color:var(--ink); background:#FEFDFB; border:1px solid var(--line);
  border-radius:12px; transition:border-color .15s, box-shadow .15s;
}
.form input::placeholder{color:#C3BDB2}
.form input:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(94,124,107,.16);
}
.code-input{
  text-align:center; font-size:1.7rem; letter-spacing:.5em; padding-left:.5em;
  font-variant-numeric:tabular-nums; font-weight:600;
}
.form button{
  margin-top:6px; padding:13px 18px; font-size:1rem; font-weight:600;
  color:#fff; background:var(--accent); border:0; border-radius:12px; cursor:pointer;
  transition:background .15s, transform .05s;
}
.form button:hover{background:var(--accent-deep)}
.form button:active{transform:translateY(1px)}

.msg{margin:0 0 16px; padding:11px 14px; border-radius:12px; font-size:.9rem; text-align:left}
.msg-ok{background:rgba(94,124,107,.1); color:var(--accent-deep)}
.msg-err{background:rgba(155,74,60,.09); color:var(--err)}
.alt{margin:16px 2px 0; font-size:.82rem; color:var(--muted); line-height:1.6}
.alt a{text-decoration:none; border-bottom:1px solid rgba(73,96,79,.35)}
.alt span{margin:0 7px; color:var(--line)}
.foot{position:relative; z-index:2; margin:30px 0 0; text-align:center; font-size:.72rem; color:#B9B2A6; letter-spacing:.04em}

/* ============================ GALLERY ============================ */
body.gallery{background:var(--paper)}
.topbar{
  position:sticky; top:0; z-index:20; border-bottom:1px solid var(--line);
  background:rgba(251,249,246,.82); backdrop-filter:saturate(1.4) blur(10px);
}
.topbar-in{
  max-width:1440px; margin:0 auto; padding:14px 22px;
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
}
.brand{font-family:var(--serif); font-weight:600; font-size:1.35rem; letter-spacing:-.01em}
.meta{font-size:.85rem; color:var(--muted)}
.meta a{color:var(--accent-deep); text-decoration:none; border-bottom:1px solid rgba(73,96,79,.3)}

.feed{max-width:1440px; margin:0 auto; padding:26px 16px 64px}
.empty{color:var(--muted); text-align:center; padding:60px 0}

.month{margin:0 0 30px}
.month-title{
  font-family:var(--serif); font-weight:600; font-size:clamp(1.3rem,3.4vw,1.7rem);
  letter-spacing:-.01em; color:var(--ink); margin:0 4px 12px;
  display:flex; align-items:center; gap:14px;
}
.month-title::after{content:""; flex:1; height:1px; background:var(--line)}

/* CSS-only justified rows: flex-grow + flex-basis proportional to aspect ratio */
.grid{display:flex; flex-wrap:wrap; gap:6px}
.grid::after{content:""; flex-grow:999999} /* keep the last row from stretching */
.cell{
  position:relative; height:250px; overflow:hidden; border-radius:10px;
  background:var(--line); box-shadow:var(--shadow);
  flex:var(--ar) 1 calc(var(--ar) * 250px);
}
.cell img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .4s cubic-bezier(.2,.7,.2,1); cursor:zoom-in;
}
.cell:hover img{transform:scale(1.04)}

@media (max-width:760px){
  .cell{height:190px; flex:var(--ar) 1 calc(var(--ar) * 190px)}
  .feed{padding:18px 10px 48px}
}
@media (max-width:460px){
  .cell{height:150px; flex:var(--ar) 1 calc(var(--ar) * 150px)}
}

@media (prefers-reduced-motion:reduce){
  .cell img{transition:none}
  .cell:hover img{transform:none}
}