/* Base look */
:root{
  --bg:#0f0f12; --card:#15151a; --ink:#eaeaf0; --muted:#b5b5c1; --brand:#ff5fa2; --brand2:#66d9ed;
  --radius:18px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial;}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:20px}
.nav{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.logo{font-weight:800;letter-spacing:.5px}
.links a{margin-left:16px;opacity:.85}
.links a.active{opacity:1}
.hero{padding:80px 0;text-align:center}
.hero h1{font-size:clamp(2rem,5vw,3.2rem);margin:0 0 10px}
.sub{color:var(--muted);margin:0 0 24px}
.btn{display:inline-block;padding:12px 18px;background:linear-gradient(135deg,var(--brand),var(--brand2));border-radius:999px;font-weight:700}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.card{background:var(--card);padding:18px;border-radius:var(--radius);border:1px solid #23232a}
.header-slim{padding:20px 0 10px}

/* Grid gallery */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:14px;
}
.gallery-item{
  display:grid;
  grid-template-rows:auto min-content;
  gap:6px;
  text-decoration:none;
  outline:none;
  border-radius:14px;
  transition:transform .08s ease, box-shadow .08s ease;
}
.gallery-item:hover,.gallery-item:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(0,0,0,.35);
}
.gallery-img{
  width:100%;
  aspect-ratio:4/5; /* adjust to 1/1 for squares */
  object-fit:cover;
  border-radius:14px;
  border:1px solid #23232a;
  display:block;
}
.gallery-cap{color:var(--muted);font-size:.92rem;padding:0 4px 4px}
.footer{padding:40px 0;color:var(--muted)}

/* Access gate */
.gate.hidden{display:none}
.gate{position:fixed;inset:0;background:rgba(15,15,18,.9);display:grid;place-items:center;z-index:9999}
.gate-card{background:var(--card);border:1px solid #23232a;border-radius:var(--radius);width:min(92vw,420px);padding:20px}
.gate-card input,.gate-card button{width:100%;padding:10px;border-radius:10px;border:1px solid #2a2a32;background:#0e0e12;color:var(--ink)}
.gate-card button{margin-top:12px;border:0;background:linear-gradient(135deg,var(--brand),var(--brand2));color:white;font-weight:700}
.hint{font-size:.85rem;margin-top:10px;color:var(--muted)}

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; display: none; z-index: 99999; }
.lightbox.open { display: block; }
.lightbox-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.85); }
.lightbox-content {
  position: absolute; inset: 0; display: grid; grid-template-columns: 64px 1fr 64px;
  grid-template-rows: 64px 1fr 64px; align-items: center; justify-items: center; padding: 10px;
}
.lb-figure { grid-column: 2; grid-row: 2; margin: 0; max-width: min(96vw, 1200px); max-height: 86vh; display: grid; gap: 10px; }
.lb-image { max-width: 100%; max-height: 78vh; border-radius: 12px; border: 1px solid #2a2a32; }
.lb-caption { color: #b5b5c1; text-align: center; min-height: 1em; }
.lb-btn {
  background: rgba(255,255,255,.09); border: 1px solid #3a3a42; color: #fff;
  border-radius: 12px; width: 44px; height: 44px; display: grid; place-items: center;
  font-size: 22px; cursor: pointer; transition: transform .08s ease;
}
.lb-btn:hover { transform: scale(1.05); }
.lb-close { grid-column: 3; grid-row: 1; }
.lb-prev  { grid-column: 1; grid-row: 2; }
.lb-next  { grid-column: 3; grid-row: 2; }
@media (max-width: 640px) {
  .lightbox-content { grid-template-columns: 48px 1fr 48px; grid-template-rows: 48px 1fr 48px; }
  .lb-btn { width: 40px; height: 40px; font-size: 20px; }
}

/* Memories list */
.mem-list { list-style: disc; padding-left: 1.2rem; margin: 0; }
.mem-list li { margin: 6px 0; }

/* Memories timeline */
.timeline { list-style: none; margin: 0; padding: 0 0 0 18px; position: relative; }
.timeline::before { content: ""; position: absolute; left: 9px; top: 0; bottom: 0; width: 2px; background: #2a2a32; }
.timeline li { position: relative; margin: 14px 0; }
.tl-dot { position: absolute; left: 2px; top: .55em; width: 14px; height: 14px; border-radius: 50%;
          background: linear-gradient(135deg, var(--brand), var(--brand2)); border: 2px solid var(--card); }
.tl-content { padding-left: 16px; }
.tl-date { font-weight: 700; opacity: .95; }
.tl-text { color: var(--muted); }

/* Timeline emoji */
.tl-emoji{ margin-right: .35rem; }
.tl-desc{ display: inline; }

/* Music page */
.music-list{ list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.music-item{ display:flex; flex-direction:column; background:var(--card); border:1px solid #23232a; border-radius:var(--radius); padding:12px; }
.music-item:hover{ box-shadow:0 6px 20px rgba(0,0,0,.35); transform: translateY(-1px); }
.mi-title{ font-weight:700; margin-bottom:2px; }
.mi-note{ color: var(--muted); font-size:.95rem; }

.mi-note{ white-space: pre-line; }