*{ box-sizing:border-box; }


html,body{ 
  margin:0;
  height:100%; 
  overflow-x: hidden;
}

body{ 
  color:var(--fg); 
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; }

/* fixed background used after Enter */
#bg{
  position:fixed; inset:0;
  background:#000 center/cover no-repeat;
  z-index:-1;
}

/* ---- ENTER (video background) ---- */
.enter{
  position:absolute;
  min-height:100svh;
  display:grid; 
  place-items:center;
  overflow:hidden;
}

.bgvid{
  position:absolute; 
  inset:0;
  width:100%; 
  height:100%;
  object-fit:cover; /* full-bleed */
}
.veil{
  position:absolute; 
  inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.35));
}

.enter-inner{
  position:relative; z-index:1;
  text-align:center;
  max-width:640px;
  border-radius:5px;
  padding:20px 50px 20px 50px;
  /* box-shadow:0 10px 30px rgba(255, 255, 255, 0.15); */
}

.enter h1{ 
  margin:0 0 .25em 0;
  font-size:clamp(1.6rem,6vw,3rem); 
}

.tagline{ 
  color:var(--muted); 
  margin:0 0 1.25rem 0; 
}

.btn{
  appearance:none; 
  border:0; 
  cursor:pointer;
  padding:20px 50px 20px 50px; 
  border-radius:3px;
  font-weight:700; 
  background-color: rgba(244, 244, 244, 0.295);
  box-shadow: #0000002d 1px 1px 20px;
  text-align: center;
  font-family: "Prompt", sans-serif;
  font-weight: 10;
  font-style: normal;
  color: #000000;
  font-size: 36px;
  font-style: light;
}

.btn:hover{
  background-color: rgba(244, 244, 244, 0.569);
  box-shadow: #0000002d 5px 5px 20px;
}


.btn.ghost{ 
  background:transparent; 
  color:var(--accent); 
  border:2px solid var(--accent); 
}


.btn:focus-visible{ 
  outline:2px solid #2563eb; 
  outline-offset:2px; 
}

/* fade-out animation when entering */
.enter.fade-out{
  animation: fadeOut 1.5s ease forwards;
}

@keyframes fadeOut{
  to { opacity:0; visibility:hidden; }
}

/* ---- MAIN ---- */
.site{ display:block; }

.panel{
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  min-height:100svh;
  display:grid; 
  place-items:center;
  padding:8vw 4vw;
  font-size: 18px;
}

.content > .sectionhead{
  text-align: center;
  font-family: "Prompt", sans-serif;
  font-weight: 10;
  font-style: normal;
  color: #000000;
  font-size: 32px;
  font-style: light;
}

.content{
  text-align: left;
  width:min(92vw, var(--maxw));
  background:var(--card);
  padding:clamp(30px,8vw,60px);
  border-radius:18px;
  color: rgb(21, 21, 21);
  background-image: url("slides/03.jpg");
  background-color: rgba(255,255,255,0.6);
  background-blend-mode: lighten;
  background-size: cover;
  box-shadow:0 10px 30px rgba(0, 0, 0, 0.333);
}

.content h2{ 
  margin:0 0 .5rem 0; 
  font-size:clamp(1.25rem,5.2vw,2rem); 
}

.foot{ 
  display:grid; 
  place-items:center; 
  padding:48px 12px; 
  color:var(--muted); 
}

@media (max-width:1080px){
  .gallery{width:95%;}
}

@media (min-width:1081px){
  .panel{ padding:4vw 4vw; }
  .content{ padding:clamp(24px,2.8vw,56px); }
  .gallery{width:80%;}
}

/* Responsive tiled gallery */
.gallery{
  margin: auto;
  display: grid;
  height: auto;
  text-align: center;
  align-items: center;
}

.gallery-item{
  position: relative;
  overflow: hidden;
  border-radius: 5px;
  background: #f3f4f6;
}

.gallery-item img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;   
  aspect-ratio: 1 / 1;  
  transition: transform .2s ease;
}

.gallery-item:focus-within img,
.gallery-item:hover img{
  transform: scale(1.1);
}

.gallery-item a{
  position: absolute; inset: 0;
  outline: none;
}

.gallery-item a:focus{
  box-shadow: 0 0 0 3px #2563eb inset;
  border-radius: 12px;
}

/* Responsive 16:9 video container */
.video-wrapper {
  margin: auto;
  position: relative;
  height: 300px;
  width: 90%;
  margin-top: 20px;   
}

.video-wrapper iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 12px; /* optional rounded corners */
}