/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* ---------- RESET / BASE ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #111;
  background: #f2f2f2; /* <- OUTSIDE background (change this to whatever you want) */
}

/* Centering wrapper */
.wrap {
  width: min(1100px, 92vw);
  margin: 0 auto;
}

/* -------- layout -------*/

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-main {
  flex: 1;
}

.full-width {
  width: 100%;
  padding: 0 22px; /* breathing room from screen edges */
}

/* ---------- SHARED HEADER/FOOTER BACKGROUND ---------- */
/* Put your own background image/color here. This class is used on header + footer. */
.shared-bg {
             /* change me */
  background-image: url("images/Divine.jpg"); 

  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-color: #000;
}
/* ---------- HEADER / NAV ---------- */
.site-header {
  border-bottom: 3px solid #000;
  padding: 18px 0 14px;
}

.header-note {
  text-align: center;
  font-size: 14px;
  opacity: 0.8;
  margin-bottom: 10px;
}

.site-header .wrap {
  background: #fff;
  border: 3px solid #000;
  border-radius: 6px;
  padding: 16px 18px;
}

.nav {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  align-items: center;
  padding: 0 4px 6px;
}

.nav-link {
  text-align: center;
  padding: 10px 8px;
  text-decoration: none;
  color: #111;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 18px;
}

.nav-link:hover {
  border-color: #000;
}

.nav-link.active {
  border-color: #000;
  font-weight: 600;
}

/* ---------- MAIN LAYOUT ---------- */
.site-main {
  padding: 34px 0 44px;
  /* Background for the middle area (outside the boxes) */
  background: transparent; /* you can change to another color or image */
  /* background-image: url("images/your-page-bg.jpg"); */
  /* background-size: cover; */
  /* background-attachment: fixed; */
}

.panel {
  border: 3px solid #000;
  background: #fff; /* each box background (swap for image if you want) */
  /* background-image: url("images/box-bg.png"); */
  /* background-size: cover; */
  /* background-position: center; */
  border-radius: 6px;
}

/* GIF inside panel */
.panel-gif {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* ------------------------------------------------Main ---------------------------------------------------- */
/* BIG TOP BOX */

.hero-panel {
  width: 100%;
  aspect-ratio: 1600 / 600; /* ≈ 2.67:1 */
  margin: 24px auto 42px;
  border: 3px solid #000;
  border-radius: 6px;

  background-image: url("images/hero-banner.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  display: grid;
  place-items: center;
  
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
}

/* TWO LOWER BOXES */

.panel-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 6vw, 90px);
  align-items: start;
  justify-content: center;
  margin-top: 0;    
  padding-top: 0;
}

.left-panel,
.right-panel {
  height: clamp(320px, 42vw, 520px);
  display: grid;
  place-items: center;
  padding: 18px;
}

.left-panel {
  position: relative;
}
.quote-rotator {
  width: 100%;
  height: 100%;
}

.quote-rotator {
  height: 100%;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 18px;
}

.rot-quote {
  margin: 0;
  max-width: 85%;
  font-size: 18px;
  line-height: 1.55;
  transition: opacity 400ms ease;
}

.rot-ref {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  opacity: 0.85;
  transition: opacity 400ms ease;
}

.rot-fade-out {
  opacity: 0;
}

.rot-dots {
  margin-top: 16px;
  display: flex;
  gap: 8px;
  justify-content: center;
}

.rot-dots span {
  width: 8px;
  height: 8px;
  border: 2px solid #fff;
  border-radius: 999px;
  opacity: 0.45;
}

.rot-dots span.active {
  background: #fff;
  opacity: 0.95;
}

/* Placeholders (remove whenever you add real content ---------------------------------- */
.placeholder {
  text-align: center;
  max-width: 75%;
  line-height: 1.4;
}
.placeholder .mini {
  margin-top: 10px;
  font-size: 13px;
  opacity: 0.75;
}

/* If you use real media elements ------------------------------- */
.Rat-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.media {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* ------------------------------------ RESEARCH PAGE ------------------------------- */

/* Center container */
.research-center {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Clickable square */
.research-square {
  width: min(360px, 80vw);
  aspect-ratio: 1 / 1;

  border: 3px solid #000;
  border-radius: 6px;

  background-image: url("images/OSU.png"); /* ← your image */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  display: block;

  transition: transform 120ms ease, box-shadow 120ms ease;
}

/* Wrap label + square */
.research-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* Big label text */
.research-label {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  text-align: center;
}

/* Inner content */
.research-inner {
  text-align: center;
}

.research-square:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.25);
}
/* --- RESEARCH TEMPLATE SECTION --- */

.research-template {
  margin: 60px auto 0;      /* top gap + horizontal centering */
  padding: 22px;

  max-width: 1600px;        /* controls how wide the template is */
  text-align: center;

}


.research-template h2 {
  margin: 0 0 6px;
}

.research-note {
  margin: 0 0 18px;
  opacity: 0.75;
}

/* List of PDFs */
.research-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Individual PDF link */
.research-item {
  border: 3px solid #000;
  border-radius: 6px;
  padding: 14px 16px;

  text-decoration: none;
  color: inherit;
  background: #fff;

  transition: transform 120ms ease, box-shadow 120ms ease;
}

.research-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

/* Title + meta */
.research-item-title {
  font-weight: 600;
  font-size: 17px;
}

.research-item-meta {
  font-size: 14px;
  opacity: 0.75;
  margin-top: 2px;
}

/* ----------------------------------------------- CONTACT PAGE --------------------------------- */

.contact-title {
  text-align: center;
  padding: 18px;
  margin-top: 22px;
}

.contact-grid {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 26px;
}

/* Square social cards */
.contact-card {
  aspect-ratio: 1 / 1;
  border: 3px solid #000;
  border-radius: 6px;
  background: #fff;

  text-decoration: none;
  color: inherit;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 18px;
  font-weight: 600;
  text-align: center;

  transition: transform 120ms ease, box-shadow 120ms ease;
}

.contact-card img {
  width: 48%;
  height: auto;
}

.contact-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.25);
}


/* --- SILLY PAGE --- */

.silly-title {
  text-align: center;
  padding: 18px;
  margin-top: 22px;
}


.silly-grid {
  margin-top: 28px;
  column-count: 4;        
  column-gap: 22px;
}


/* Meme cards */
.meme-card {
  break-inside: avoid;
  margin-bottom: 22px;

  border: 3px solid #000;
  border-radius: 6px;
  background: #fff;
  padding: 10px;

  display: flex;
  justify-content: center;  /* horizontal centering */
}
.meme-card img {
  max-width: 100%;
  max-height: 100%;
  display: block;
}

/* ----------------------------------------------------- COVERS PAGE ------------------------------------------ */

.covers-title {
  text-align: center;
  padding: 18px;
  margin-top: 22px;
}

.covers-grid {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 3vw, 34px);
}

/* Each cover box */
.cover-card {
  border: 3px solid #000;
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Responsive embedded video */
.cover-embed {
  width: 100%;
  aspect-ratio: 1 / 1;   /* square boxes like your sketch */
  background: #000;
}

.cover-embed iframe {
  width: 100%;
  height: 100%;
  display: block;
}

/* Optional caption area under each video */
.cover-meta {
  padding: 10px 12px;
  border-top: 3px solid #000;
}

.cover-name {
  font-weight: 600;
}

.cover-sub {
  font-size: 13px;
  opacity: 0.75;
  margin-top: 2px;
}

/* Responsive: 2 columns then 1 column */
@media (max-width: 980px) {
  .covers-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .covers-grid { grid-template-columns: 1fr; }
}

/* ----------------------------------------------- FOOTER ------------------------------------ */
.site-footer {
  border-top: 3px solid #000;
  padding: 18px 0 28px;
}

.footer-note {
  text-align: center;
  font-size: 14px;
  opacity: 0.8;
  margin: 8px 0 18px;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding: 0 6px;
}

.footer-col h3 {
  margin: 0 0 10px;
  font-size: 16px;
}

.footer-col ul {
  margin: 0;
  padding-left: 18px;
}

.footer-col li {
  margin: 8px 0;
}

.footer-col a {
  color: inherit;
}

.left-panel,
.right-panel {
  background: #0a0a0a;
  color: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}

.footer-col {
  border: 3px solid #fff;
  padding: 14px 16px;
  border-radius: 6px;
}

.site-footer .wrap {
  background: #fff;
  border: 3px solid #000;
  border-radius: 6px;
  padding: 18px;
}

/* ------------------------------------------ RESPONSIVE -------------------------------- */
@media (max-width: 860px) {
  .nav {
    grid-template-columns: repeat(3, 1fr);
  }
  .panel-row {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .left-panel, .right-panel {
    height: auto;
    min-height: 320px;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

/*--------------------------------------------------- ABOUT PAGE LAYOUT--------------------------- */
.about-panel {
  padding: 18px;
}

.about-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 22px;
  align-items: center;
}

.about-photo img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 3px solid #000;
  border-radius: 6px;
  display: block;
}

.about-text h1 {
  margin: 0 0 10px;
}

.about-text p {
  margin: 0 0 12px;
}

.about-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.about-btn {
  border: 2px solid #000;
  padding: 10px 14px;
  text-decoration: none;
  background: #fff;
}

.about-btn:hover {
  background: #000;
  color: #fff;
}

.about-facts {
  padding: 18px;
  margin-top: 28px;
}

.facts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.facts-grid ul {
  margin: 0;
  padding-left: 18px;
}

@media (max-width: 860px) {
  .about-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .about-photo {
    max-width: 240px;
    margin: 0 auto;
  }
  .facts-grid {
    grid-template-columns: 1fr;
  }
  .about-buttons {
    justify-content: center;
  }
  
}

/* --- ABOUT: BOOKS SECTION --- */

.about-books {
  margin-top: 28px;
  padding: 22px;
}

.about-books h2 {
  margin: 0 0 6px;
}

.about-books-note {
  margin: 0 0 18px;
  opacity: 0.75;
}

/* Grid of books */
.books-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}

/* Individual book */
.book-item {
  border: 3px solid #000;
  border-radius: 6px;
  padding: 14px;
  background: #fff;
}

.book-title {
  font-weight: 600;
}

.book-author {
  font-size: 14px;
  opacity: 0.75;
  margin-top: 2px;
}

.book-note {
  font-size: 14px;
  margin-top: 8px;
}


/*----------------------------------- silly grid set 0---------------*/

@media (max-width: 1400px) {
  .silly-grid { column-count: 4; }
}
@media (max-width: 1100px) {
  .silly-grid { column-count: 3; }
}
@media (max-width: 800px) {
  .silly-grid { column-count: 2; }
}
@media (max-width: 500px) {
  .silly-grid { column-count: 1; }
}