/* =====================================================
   GLOBAL BASE
===================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #000;
  color: #e6dedb;
  font-family: Georgia, "Times New Roman", serif;
}

/* =====================================================
   HEADER / INTRO
===================================================== */

.content1 {
  display: flex;
  justify-content: center;
  margin: 24px auto 30px;
}

.content1 h1 {
  background: #e7e2df;
  border: 4px solid #b89286;
  border-radius: 12px;
  padding: 8px 26px;
  margin: 0;
  text-align: center;
  font-family: "Brush Script MT", cursive;
  font-size: 48px;
  font-style: italic;
  color: #3a2a28;
}

.bottom-tagline {
  display: block;
  margin-top: 6px;
  font-family: sans-serif;
  font-size: 22px;
  letter-spacing: 0.08em;
  color: #444;
}

.sub-tag {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  font-style: italic;
  color: #7a6f6c;
}

/* =====================================================
   BODY COPY
===================================================== */

.content2 {
  max-width: 760px;
  margin: 30px auto 40px;
  text-align: center;
}

.content2 p {
  font-size: 17px;
  line-height: 1.55;
  color: #d6d2d0;
}

.content2 .highlight {
  font-style: italic;
  color: #e0dad7;
}

/* =====================================================
   CATEGORY BUTTONS
===================================================== */

.category-tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 30px auto;
}

.tab-btn {
  padding: 10px 22px;
  border-radius: 999px;
  background: #f2d6c7;
  color: #2b1a18;
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* =====================================================
   POLAROID TRIANGLE (TOP 3)
===================================================== */

.polaroid-wrapper {
  max-width: 900px;
  margin: 60px auto;
  padding: 0 20px;
}

.polaroid-grid--triangle {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  grid-template-areas:
    "center center"
    "left right";
  gap: 2rem;
  justify-items: center;
}

.polaroid-card {
  background: #f8f0e9;
  padding: 10px 10px 18px;
  border-radius: 4px;
  box-shadow: 0 18px 35px rgba(0,0,0,0.55);
  max-width: 260px;
  text-align: center;
  transition: transform .25s ease, box-shadow .25s ease;
}

.polaroid-card img {
  width: 100%;
  display: block;
  border-radius: 3px;
}

.polaroid-card--center {
  grid-area: center;
}

.polaroid-shift-up {
  margin-top: -90px;
}

.polaroid-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 26px 45px rgba(0,0,0,0.7);
}

/* =====================================================
   MASONRY GALLERY (ALL PAGES)
===================================================== */

.masonry-gallery {
  max-width: 1100px;
  margin: 60px auto 140px;
  padding: 0 20px;
}

.masonry-grid {
  column-count: 3;
  column-gap: 18px;
}

@media (max-width: 1024px) {
  .masonry-grid { column-count: 2; }
}

@media (max-width: 640px) {
  .masonry-grid { column-count: 1; }
}

/* =====================================================
   MASONRY CARD
===================================================== */

.masonry-item {
  display: inline-block;
  width: 100%;
  margin-bottom: 18px;
  padding: 10px 10px 26px;
  background: #000;
  border: 2px solid #b89286;
  border-radius: 6px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.55);
  cursor: zoom-in;

  --r: 0deg;
  transform: rotate(var(--r));
  transition: transform .25s ease, box-shadow .25s ease;
}

/* rotation presets */
.masonry-item.r1 { --r: -1.4deg; }
.masonry-item.r2 { --r: 1.2deg; }
.masonry-item.r3 { --r: -0.8deg; }
.masonry-item.r4 { --r: 0.9deg; }

/* hover lift */
.masonry-item:hover {
  transform:
    rotate(calc(var(--r) + 0.5deg))
    translateY(-6px)
    scale(1.03);
  box-shadow: 0 14px 30px rgba(0,0,0,0.65);
}

/* =====================================================
   IMAGE SIZE CONTROL (CRITICAL)
===================================================== */

.masonry-item img {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

/* vertical photos */
.masonry-item.vertical img {
  max-height: 500px;
  object-position: center 20%;
}

/* =====================================================
   CAPTIONS
===================================================== */

.polaroid-label {
  margin-top: 6px;
  font-family: 'Dancing Script', cursive;
  font-size: 16px;
  color: #b89286;
  text-align: center;
}

/* subtle tilt */
.masonry-item.r1 .polaroid-label { transform: rotate(-1deg); }
.masonry-item.r2 .polaroid-label { transform: rotate(1deg); }
.masonry-item.r3 .polaroid-label { transform: rotate(-0.6deg); }
.masonry-item.r4 .polaroid-label { transform: rotate(0.8deg); }

/* =====================================================
   FILM GRAIN + VIGNETTE
===================================================== */

.masonry-item::after {
  content: "";
  position: absolute;
  inset: 10px 10px 26px;
  background-image: url("https://www.transparenttextures.com/patterns/asfalt-light.png");
  opacity: 0.18;
  pointer-events: none;
  border-radius: 4px;
}

.masonry-item img {
  mask-image: radial-gradient(circle 80% at center, black 60%, transparent 100%);
}

/* =====================================================
   OPTIONAL ANALOG MODE
===================================================== */

.analog-mode .masonry-item img {
  filter: contrast(1.08) saturate(1.12) sepia(0.12);
}

/* === FORCE INTERACTION FIX === */
a,
button {
  pointer-events: auto !important;
  position: relative;
  z-index: 50;
}

/* Prevent invisible overlays from blocking clicks */
.polaroid-wrapper,
.fade-in,
.masonry-gallery,
.masonry-grid {
  pointer-events: auto;
}