:root{
  --paper:#f5f1ea;
  --ink:#111;
  --pink:#DC0073;
  --gold:#DAA520;
  --frame:18px;                 /* frame thickness */
  --gap:clamp(16px,3vw,40px);
  --blue:#2274A5;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family: Montserrat, Futura, "Avenir Next", system-ui, sans-serif;
}

/* ===== Cards + snap ===== */
.cards{
  scroll-snap-type: y mandatory;
  overflow-y: auto; height:100dvh;
}
.card{
  scroll-snap-align: start;
  min-height:100dvh;
  display:grid; place-items:center;
  padding: clamp(8px, 3vw, 32px);
}

.card[data-ref="TITLE"] {
  position: relative; /* gives a local coordinate system */
  overflow: hidden;
}
.scroll-hint {
  position: absolute;
  bottom: 4rem;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-family: Futura, sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  color: #E4007F; /* accent pink */
  opacity: 0;
  animation: appear 1.5s ease-out 1.5s forwards, float 2.5s ease-in-out 3s infinite;
}

.scroll-hint .arrow {
  font-size: 1.2rem;
  line-height: 1;
  margin-top: 0.3rem;
}

@keyframes appear {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes float {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.8; }
  50% { transform: translate(-50%, 6px); opacity: 1; }
}

/* ===== Dotnav ===== */
.dotnav{
  position:fixed; right:25px; top:50%; translate:0 -50%;
  display:flex; flex-direction:column; gap:10px; z-index:999;
}
.dotnav .dot{
  width:12px; height:12px;  border-radius:50%;
  background:#0003; display:block; transition:transform .2s, background .2s;
}
.dotnav .dot.active{ background:var(--ink); transform:scale(1.25); }

/* ===== HERO (Card 1) ===== */
.wrap{ width:min(1100px,94vw); }
.grid{
  display:grid; grid-template-columns:1fr 1.4fr;
  gap:var(--gap); align-items:center; position:relative;
}

/* Desktop vase */
.vase{ position:relative; width:min(280px,32vw); aspect-ratio:242.37/494.42; 
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.3));}
.vase img{ position:absolute; inset:0; width:100%; height:100%; display:block; }

#vaseOpen_desktop{ display:block; }
#vaseClosed_desktop{ display:none; }

/* Frame that hugs the title */
.titleFrame{
  position:relative;
  background:var(--paper);
}
.titleFrame::before{
  content:""; position:absolute; inset:0;
  border: var(--frame) solid var(--ink);
}

.titleFrame::after {
  content:"";
  position:absolute;
  inset:var(--frame);
  border-top:5px solid var(--gold);
  border-left:5px solid var(--gold);
  z-index:1;
  pointer-events: none;
}

/* Title block */
.title{
  position:relative; z-index:2;
  display:grid; gap:clamp(8px,1.4vw,16px);
  font:900 clamp(44px,8.8vw,120px)/1.02 Montserrat, Futura, system-ui, sans-serif;
  color:var(--ink); letter-spacing:.3px; text-align:right;
  padding:clamp(6px,1vw,12px);
}

/* Labels OUTSIDE the frame (top/bottom) */
.frameTop,.frameBottom{
  position:absolute; right:0;
  font:300 clamp(12px,2.2vw,18px)/1.2 Montserrat, Futura, system-ui, sans-serif;
  letter-spacing:.06em;
}
.frameTop{ bottom:100%; margin-bottom:.4em; left:5%; color:var(--pink);}
.frameBottom{ top:100%; margin-top:.4em;color:var(--pink); }

/* Mobile overlapping vase (hidden on desktop) */
.vaseOverlap{ display:none; }
#vaseOpen_mobile{ display:block; }
#vaseClosed_mobile{ display:none; }

.disclaimer {
  font-size: 0.8rem !important;
  font-style: italic;
  opacity: 0.75;
  text-align: center;
  margin-top: 2rem;
  max-width: 600px;
  margin-inline: auto;
}



/* ===== BLOCK CARDS ABOUT ===== */
/* Tighten the ABOUT panel */


.card[data-ref="ABOUT"] .about-wrap {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  line-height: 1.6;
  padding: 4rem 2rem;
}

.card[data-ref="ABOUT"] h2 {
  font-size: 3rem;
  letter-spacing: 0.05em;
  margin-bottom: 2rem;
}

.card[data-ref="ABOUT"] .underline {
  width: 80px;
  height: 3px;
  background: var(--gold);
  margin: 0.8rem auto 2rem;
}

.card[data-ref="ABOUT"] p {
  font-size: clamp(1.3rem, 2vw + 0.5rem, 2rem);
  text-align: justify;
  text-align-last: center;
  margin-bottom: 1.4rem;
  color: #111;
}



/* Reset native button styles to match links */
.btn-ical,
.btn-ical.btn-pink {
  all: unset;                  /* remove all browser defaults */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-family: inherit;
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-radius: 40px;
  padding: 0.9rem 2rem;
  cursor: pointer;
  border: none;
  transition: background 0.3s ease, transform 0.2s ease;
}

/* Black button */
.btn-ical {
  background: #000;
  color: #fff;
}

/* Pink button */
.btn-ical.btn-pink {
  background: var(--pink);
  color: #fff;
}

/* Hover effects */
.btn-ical:hover {
  background: var(--pink);
  transform: scale(1.05);
}
.btn-ical.btn-pink:hover {
  background: #000;
  transform: scale(1.05);
}


.pink-line {
  display: inline-block;
  margin-top: 1rem;
  font-size: 1.4rem;
  color: var(--pink);
  font-weight: 600;
  letter-spacing: 0.03em;
}


.cal-wrap{ position:relative; display:inline-block; }
.cal-sheet{
  position:absolute; inset:auto 0 100% auto; /* sits above on mobile, tweak if needed */
  transform:translateY(8px);
  background:#fff; border:1px solid #ddd; border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.15);
  display:none; /* <--- THIS IS THE PROBLEM */
  flex-direction:column; min-width:220px; overflow:hidden;
  z-index:40;
}
.cal-sheet button{
  appearance:none; border:0; background:#fff; padding:14px 16px;
  text-align:left; font:inherit; cursor:pointer;
}
.cal-sheet button:hover{ background:#f6f6f6; }
.cal-sheet .cancel{ color:#666; border-top:1px solid #eee; }

.cal-sheet{ outline:2px dashed #333; }


.cal-sheet[hidden] {
    display: none; 
}

/* The element must display flex when the hidden attribute is removed */
.cal-sheet:not([hidden]) {
    display: flex;
}
/* ===== BLOCK CARDS (2 & 3) ===== */
.block{ width:min(1100px,94vw); margin-inline:auto; }
.block-head{ width:100%; display:flex; justify-content:flex-start; margin-bottom:clamp(12px,2vw,20px); }
.block-time{ font-weight:300; letter-spacing:.06em; font-size:clamp(14px,2.2vw,18px); }

.frame{
  position:relative; width:100%;
  border:var(--frame) solid var(--ink);
  background:var(--paper);
  padding: clamp(8px,1.2vw,14px);
}
.frame::after {
  content:"";
  position:absolute;
  inset:0px;
  border-top:5px solid var(--gold);
  border-left:5px solid var(--gold);
  z-index:1;
  pointer-events: none; 
}

.film-list{ display:grid; gap:clamp(8px,1.2vw,12px); }

.film{
  position:relative; min-height:clamp(60px, 10vh, 90px);
  display:flex; align-items:flex-end; overflow:hidden;
  border:2px solid var(--ink);
  background:#e8e2d9; /* fallback */
}
.film .bg{
  position:absolute; inset:0; 
  background-size:cover; background-position:center;
  opacity:.60;
  pointer-events: none;
}
.film-meta{
  position:relative; width:100%;
  padding: clamp(10px,2vw,16px);
  display:flex; justify-content:space-between; align-items:flex-end; gap:16px;
}
.film-title{ font-weight:800; font-size:clamp(20px,4.2vw,34px); line-height:1.05; }
.film-sub{ font-weight:500; font-size:clamp(12px,2.2vw,16px); opacity:.9; }
.film-meta a{ color:var(--ink); text-decoration:underline; }

/* ===== HANG (Card 4) ===== */
.card-hang{ text-align:center; }
.hang-wrap h2{ font-weight:900; font-size:clamp(36px,8vw,84px); line-height:1.02; margin:0 0 8px 0; }
.hang-wrap p{text-align: center;  margin:0 0 26px 0; font-weight:300; letter-spacing:.06em; font-size:clamp(16px,2.6vw,25px); }

.card-hang .vase{ width:min(150px,42vw); margin-inline:auto; }
#vaseOpen_hang{ display:block; }
#vaseClosed_hang{ display:none; }


/* ===== Modal Cards tweaks ===== */

.modal{ position:fixed; inset:0; display:none; z-index:9999; }
.modal.show{ display:block; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.45); backdrop-filter:blur(2px); }
.modal-card{
  position:relative; max-width:760px; margin:7vh auto; background:#fff; color:#111;
  padding:24px 24px 28px; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.2);
}
.modal-close{ position:absolute; top:8px; right:10px; border:0; background:transparent; font-size:26px; cursor:pointer; }
.modal-title{ margin:0 0 .35em; font-size:1.6rem; }
.modal-meta{ margin:.2em 0 1em; color:#555; font-size:.975rem; }
.modal-sinopsis{ margin:0 0 1rem; line-height:1.5; }
.modal-trailer{ display:inline-block; text-decoration:underline; }
.modal-media{ margin: -8px -8px 12px; aspect-ratio:16/9; background:#eee center/cover no-repeat; border-radius:8px; }
html.modal-open .cards,
body.modal-open .cards {
  /* Prevent the inner scroll container from scrolling when modal is open */
  overflow: hidden !important; 
}

/* Make film tiles clickable affordance (optional) */
.film{ cursor:pointer; }
.film a{ pointer-events:auto; } /* links inside still work */


/*Social Links*/
.rv-stack{
  margin-top: 1.5rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2.2rem;        /* vertical rhythm */
}


/* icons row */
.rv-icons{
  display:flex;
  gap:2.4rem;       /* space between the two circles */
}
.rv-icons a{
  display:inline-flex;
  align-items:center; justify-content:center;
  width:80px; height:80px; border-radius:50%;
  background:var(--paper); border:7px solid var(--pink);
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
}
.rv-icons a:hover{ background:var(--pink); border-color:#000; transform:scale(1.05); }
.rv-icons img{ width:50px; height:50px; object-fit:contain; }

/* vase as a small “signature” */
.rv-vase{ width:86px; height:auto; filter:drop-shadow(0 3px 6px rgba(0,0,0,.15)); opacity:.95; }

/* optional: tighten subtitle */
.card h2 + .sub{ margin-top:.2rem; opacity:.9; }



/*JOIN US CARD*/
.underline {
  width: 80px;
  height: 3px;
  background: var(--gold);
  margin: 0.8rem auto 2rem;
}

/* JOIN US section */
.card[data-ref="JOINUS"] .hang-wrap{
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  line-height: 1.6;
  padding: 4rem 2rem;
}

/* make paragraphs more readable and balanced */
.card[data-ref="JOINUS"] p{
  font-size: clamp(1rem, 2vw + 0.5rem, 1.6rem);
  text-align: justify;
  text-align-last: center; /* keeps the last line centered */
  margin-bottom: 1.4rem;
  color: #111;
}

/* optional: give the last line a slightly warmer tone */
.card[data-ref="JOINUS"] p:last-of-type {
  font-weight: 500;
  font-style: italic;
  color: var(--pink);
  margin-bottom: 2rem;
}

/* the title */
.card[data-ref="JOINUS"] h2 {
  font-size: 3rem;
  letter-spacing: 0.05em;
  margin-bottom: 2rem;
}

/* the button */
.card[data-ref="JOINUS"] .btn-ical.btn-pink {
  margin-top: 1.5rem;
  background: var(--pink);
  border: none;
  color: white;
  font-size: 1.1rem;
  padding: 0.9rem 2rem;
  border-radius: 40px;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
  margin-bottom: 2rem;
}
.card[data-ref="JOINUS"] .btn-ical.btn-pink:hover {
  background: #000;
  transform: scale(1.05);
}



/* small inline instagram icon */
.insta-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: 1.2rem;
  color: #111;
  text-align: center;
  margin-top: 10rem;
  width: 100%
}

.insta-line .insta-icon {
  width: 40px;      /* adjust size */
  height: 40px;
  object-fit: contain;
  vertical-align: middle;
  transition: transform 0.2s ease;
  background:var(--pnk);
}

.insta-line a:hover .insta-icon {
  transform: scale(1.1);

}

/* ===== Mobile tweaks ===== */
@media (max-width:720px){
  :root{ --frame:10px; }
  .grid{ grid-template-columns:1fr; }

  .dotnav{
  right:7px;

  }
  .dotnav .dot{
  width:8px; height:8px;
  }


.cal-sheet{ 
    /* The key is setting it to fixed and ensuring it starts at the bottom */
    position:fixed; 
    left:0; 
    right:0; 
    bottom:0;  /* Set to 0 to anchor it to the bottom edge */
    top:auto;  /* Ensure it doesn't take full height */
    transform:none; 
    border-radius:16px 16px 0 0; /* Keep the nice rounded top corners */
    margin:0;  /* Remove any default margin */
  }


 /* hide the desktop vase on mobile */
.vase{ display:none; }

  .card-hang .vase{
    display:block !important;
    width:min(75px,25vw);
    margin-inline:auto;
  }

  /* Make title big on mobile; let width dictate size */
  .titleFrame{width: 97%; container-type:inline-size; }
  .title{ font:900 clamp(70px,16cqi,110px)/.98 Montserrat, Futura, system-ui, sans-serif; }

  /* overlap vase half in/out of frame */
  .vaseOverlap{
    display:block; position:absolute;
    left:0%; bottom:-20%;
    width:30%; max-width:200px; aspect-ratio:242.37/494.42;
    z-index:3; pointer-events:none;
    filter:drop-shadow(0 4px 12px rgba(0,0,0,.3))
  }


.title::before {
  content: "";
  position: absolute;
  /* Position and size it to cover the border behind the vase */
  left: -12%;
  bottom: -45%;
  width: 32%;
  height: 80%;
  background: var(--paper);
  /* This z-index places it ON TOP of the borders, but BELOW the vase */
  z-index: 2;
}
 .btn-row { display: block; text-align: center; }
  .btn-row .cal-wrap,
  .btn-row .btn-ical { display: inline-block; width: min(420px, 60vw); }
  .btn-row .cal-wrap { margin-bottom: 16px; }  /* vertical space */
.btn-ical:active {
  transform: scale(1.05);
}
  .frame {width: 98%}
  /* keep labels readable */
  .frameTop,.frameBottom{
    font-size:clamp(12px,3.4vw,16px);
  }

  .film{ min-height:clamp(60px, 10vh, 90px); }
}