:root{
  --tan: #e7cf9f;
  --tan-overlay: rgba(231,207,159,0.85);
  --text: #111;
  --muted: #666;
  --panel: rgba(231,207,159,0.88);
  --link: #2b1733; /* muted purple-black */
  --radius: 14px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Georgia, "Times New Roman", serif;
  color:var(--text);
  /* Background image with overlay */
  background:
    linear-gradient(var(--tan-overlay), var(--tan-overlay)),
    url("./assets/bg-tan-silhouette.jpg") center/cover fixed no-repeat;
}
a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline}
header{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; gap:.75rem;
  padding:.75rem 1rem;
  background: rgba(231,207,159,0.85);
  border-bottom:1px solid rgba(0,0,0,.08);
  backdrop-filter: blur(2px);
}
.brand{font-weight:bold; letter-spacing:.4px}
.spacer{flex:1}
input[type="search"], input[type="text"], input[type="password"], .text-input{
  width:100%; max-width:420px;
  padding:.55rem .7rem; border:1px solid rgba(0,0,0,.2);
  border-radius:10px; background:rgba(255,255,255,0.8);
  font-family:inherit; font-size:1rem;
}
button{
  font-family:inherit; font-size:.95rem;
  padding:.45rem .7rem; border:1px solid #000; background:#000; color:#fff;
  border-radius:12px; cursor:pointer;
}
button.ghost{background:transparent; color:#000}
button:focus-visible, a:focus-visible{outline:3px solid #2b1733; outline-offset:2px}
main{padding:1rem; max-width:1200px; margin:0 auto}

.grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:1rem;
}
.card{
  background:var(--panel);
  border-radius:var(--radius);
  box-shadow: 0 3px 10px rgba(0,0,0,.08);
  overflow:hidden; display:flex; flex-direction:column;
}
.card .thumb{width:100%; height:200px; object-fit:cover; border-bottom:1px solid rgba(0,0,0,.12)}
.card .body{padding:.9rem}
.card .title{font-size:1.15rem; margin:0 0 .35rem 0;}
.meta{font-size:.85rem; color:var(--muted); margin-bottom:.5rem}
.location{background:rgba(0,0,0,.07); padding:.1rem .35rem; border-radius:8px; margin-left:.35rem}
.excerpt{white-space:pre-wrap}
.showmore{margin-top:.5rem}
.hidden{display:none}

.post-hero{max-width:900px; margin:0 auto 1rem auto; background:var(--panel); border-radius:var(--radius); overflow:hidden; box-shadow: 0 3px 12px rgba(0,0,0,.1)}
.post-hero img{width:100%; display:block; border-bottom:1px solid rgba(0,0,0,.12)}
.post-wrap{max-width:900px; margin:0 auto; background:var(--panel); border-radius:var(--radius); padding:1rem 1.2rem; box-shadow: 0 3px 12px rgba(0,0,0,.1)}

.block{margin:1rem 0}
.subhead{font-style:italic; color:#666; font-size:.95rem}
.fig{border:1px solid #000; padding:4px; background:#fff; display:inline-block; max-width:100%}
.fig img{max-width:100%; height:auto; display:block}
.caption{font-size:.85rem; color:#777; margin-top:.25rem}

.gallery{position:relative; overflow:hidden}
.gallery .track{display:flex; gap:.5rem; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:.5rem}
.gallery .track img{height:380px; object-fit:cover; scroll-snap-align:center; border:1px solid #000; padding:4px; background:#fff}
.gallery .nav{position:absolute; top:50%; transform:translateY(-50%); width:100%; display:flex; justify-content:space-between; pointer-events:none}
.gallery .nav button{pointer-events:auto; opacity:.9}

.lightbox{position:fixed; inset:0; background:rgba(0,0,0,.85); display:flex; align-items:center; justify-content:center; z-index:100;}
.lightbox img{max-width:92vw; max-height:92vh; border:1px solid #fff}

.admin-wrap{max-width:1100px; margin:0 auto}
.tabs{display:flex; gap:.4rem; padding: .4rem 0}
.tab{background:transparent; color:#000; border:1px solid #000}
.tab.active{background:#000; color:#fff}
.list{display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap:1rem}
.card.add{display:flex; align-items:center; justify-content:center; min-height:120px; font-weight:bold}

.editor{display:grid; grid-template-columns: 1fr; gap:1rem; margin-top:1rem}
.row{display:flex; gap:.6rem; align-items:center}
.block-item{background:#fff5; border:1px dashed #000; padding:.6rem; border-radius:10px}
.controls{display:flex; gap:.4rem; flex-wrap:wrap}
label{font-size:.9rem; color:#333}
textarea{width:100%; min-height:120px; padding:.6rem; border-radius:10px; border:1px solid rgba(0,0,0,.2); background:rgba(255,255,255,.85); font-family:inherit; font-size:1rem}
.small{font-size:.85rem; color:#444}
footer{padding:2rem 1rem; color:#333; text-align:center}