* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #222;
  background: #fafafa;
}
header {
  background: #1f3a5f;
  color: #fff;
  padding: 1.2rem 1rem;
  text-align: center;
}
header h1 { margin: 0 0 .3rem; font-size: 1.4rem; }
header .sub { margin: 0 0 .8rem; opacity: .85; font-size: .95rem; }
nav { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
nav a {
  color: #fff;
  text-decoration: none;
  padding: .35rem .9rem;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 999px;
  font-size: .9rem;
}
nav a:hover { background: rgba(255,255,255,.15); }

main { max-width: 1100px; margin: 0 auto; padding: 1rem; }
section { margin: 2.2rem 0; }
h2 { border-bottom: 2px solid #1f3a5f; padding-bottom: .3rem; }
h3.room { margin: 1.4rem 0 .6rem; color: #1f3a5f; font-size: 1.05rem; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}
.grid a { display: block; }
.grid img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

.btn {
  display: inline-block;
  background: #1f3a5f;
  color: #fff;
  padding: .6rem 1.2rem;
  border-radius: 6px;
  text-decoration: none;
}
.btn:hover { background: #2c5285; }

iframe.pdf { width: 100%; height: 70vh; border: 1px solid #ccc; border-radius: 6px; }

.videos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.video-wrap { position: relative; padding-top: 56.25%; }
.video-wrap iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; border-radius: 6px;
}
.note { color: #777; font-size: .9rem; }

footer { text-align: center; color: #999; padding: 2rem 0; font-size: .85rem; }