/* style.css - Typical Kate theme (handwritten + pastel) */
:root{
  --peach:#FFD1BA;
  --pink:#FFB6C1;
  --lav:#C9A0DC;
  --teal:#91D8E4;
  --accent:#b452f0;
  --text:#333333;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Quicksand', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg, var(--peach), var(--pink), var(--lav), var(--teal));
  background-attachment: fixed;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* LOCK SCREEN */
.lock-screen{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
  padding:30px;
}

.lock-card{
  width:100%;
  max-width:520px;
  background:rgba(255,255,255,0.92);
  border-radius:16px;
  padding:28px 28px 20px;
  text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,0.12);
  border-left:8px solid rgba(180,82,240,0.12);
}

.lock-card h1{
  font-family: 'Dancing Script', cursive;
  font-size:2.8rem;
  margin:0 0 8px;
  color:var(--accent);
}

.lock-card .subtitle{margin:0;color:#555;font-weight:600}
.lock-card .prompt{margin:8px 0 16px;color:#666}
.lock-card input[type="password"]{
  width:100%;
  padding:12px 14px;
  font-size:1rem;
  border-radius:10px;
  border:1px solid rgba(0,0,0,0.08);
  outline:none;
  margin-bottom:12px;
}

.btn{
  display:inline-block;
  padding:10px 18px;
  background:linear-gradient(90deg,#ffb6a0,#ffd1ba);
  border:none;
  border-radius:10px;
  font-weight:600;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
}

.btn:active{transform:translateY(1px)}

.error{color:#f36;display:none;margin-top:8px}

/* floating emojis container (behind lock content) */
.float-container{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
}

/* SITE */
.site-content{min-height:100vh; padding-bottom:80px;}

/* HEADER */
.site-header{
  text-align:center;
  padding:60px 20px 10px;
  background:rgba(255,255,255,0.5);
  backdrop-filter: blur(6px);
  border-bottom:1px solid rgba(255,255,255,0.6);
}

.site-header h1{
  font-family: 'Dancing Script', cursive;
  font-size:3.2rem;
  color:var(--accent);
  margin:0;
}

.site-header .lead{margin:8px 0 20px;color:#5a5a5a;font-weight:600}

/* REASONS */
.reasons{max-width:900px;margin:20px auto;padding:30px;}
.reason{
  background:rgba(255,255,255,0.96);
  border-radius:16px;
  padding:20px 24px;
  margin:24px 0;
  box-shadow:0 8px 24px rgba(0,0,0,0.08);
  border-left:8px solid var(--accent);
  transition:transform .28s ease, box-shadow .28s ease;
}

.reason:nth-child(4n+1){border-color:var(--peach)}
.reason:nth-child(4n+2){border-color:var(--lav)}
.reason:nth-child(4n+3){border-color:var(--teal)}
.reason:nth-child(4n+4){border-color:var(--pink)}

.reason:hover{transform:translateY(-6px);box-shadow:0 12px 32px rgba(0,0,0,0.12)}

.reason h2{
  font-family: 'Dancing Script', cursive;
  color:var(--accent);
  margin:0 0 8px;
  font-size:1.6rem;
}

.reason p{margin:0;font-size:1.05rem;color:var(--text)}

/* spicy style */
.reason.spicy{background:rgba(255,246,246,0.98);border-style:solid;}

/* last */
.reason.last{padding-bottom:28px}

/* footer */
.site-footer{padding:40px 20px;text-align:center;color:#444}
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');

.signature {
  font-family: 'Great Vibes', cursive;
  font-size: clamp(1.8rem, 2.5vw, 2.6rem);
  color: #ffffff; /* pure white */
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); /* soft contrast glow */
  letter-spacing: 0.5px;
}



/* floating emoji style */
.float{position:fixed;bottom:-40px;font-size:1.6rem;opacity:0.92;pointer-events:none;filter:drop-shadow(0 6px 10px rgba(0,0,0,0.08))}

/* responsive tweaks */
@media (max-width:700px){
  .lock-card{padding:20px}
  .site-header h1{font-size:2.4rem}
  .reason h2{font-size:1.4rem}
  .reasons{padding:18px}
}
/* --- Photo Gallery Page --- */
.photo-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  max-width: 1000px;
  margin: 40px auto;
  padding: 20px;
}

.photo-gallery .photo {
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.photo-gallery .photo img {
  width: 100%;
  display: block;
  border-radius: 16px;
}

.photo-gallery .photo:hover {
  transform: scale(1.03);
  box-shadow: 0 16px 36px rgba(0,0,0,0.15);
}

.back-link {
  display: inline-block;
  margin-top: 12px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.back-link:hover {
  text-decoration: underline;
}