/* ---- Your fonts ---- */
@font-face {
  font-family: "CenturyGothic";
  src: url("fonts/centurygothic.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "CenturyGothic";
  src: url("fonts/centurygothic_bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

/* ---- Global site look (NOT 98.css) ---- */
html, body {
  margin: 0;
  background-color: #189BCC;
  font-family: "CenturyGothic", sans-serif; /* override 98.css body font */
}

/* demo text */
.big-text { font-size: clamp(2.5rem, 8vw, 6rem); font-weight: 700; text-align: center; margin: 24px 0 8px; }
.demo-bold { font-weight: 700; margin: 0 0 8px 16px; }
.special-text { margin: 0 0 24px 16px; }

/* ---- People lineup ---- */
.lineup {
  display: grid;
  grid-template-columns: repeat(4, auto); /* shrink-wrap each item */
  justify-content: center;                /* center the whole row */
  align-items: end;                        /* line feet up at the bottom */
  gap: clamp(12px, 3vw, 36px);            /* responsive spacing */
  padding: 40px 24px 64px;
}

/* Reset 98.css button styles for the people */
.person{
  /* nuke element defaults incl. 98.css’ borders/typography */
  all: unset;
  display: inline-block;
  cursor: pointer;
  text-align: center;
  outline: none;
}
.person:focus-visible { outline: 2px dashed rgba(255,255,255,.9); outline-offset: 4px; }


.person img {
  height: clamp(210px, 28vw, 520px); /* bigger min, bigger ideal, bigger max */
  width: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.25));
  transition: transform .2s ease;
}
.person:hover img, .person:focus-visible img{ transform: translateY(-4px); }

@media (max-width: 600px) {
  .lineup {
    grid-template-columns: repeat(2, auto);
    gap: 14px;
  }
  .person img {
    height: clamp(180px, 36vw, 340px);
  }
}

.person span{
  display:block;
  margin-top:10px;
  font-size: clamp(18px, 2.4vw, 28px);
  font-family: "CenturyGothic", sans-serif; /* ensure not pixel font */
  letter-spacing: .02em;
}

/* ---- Backdrop ---- */
.backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 999;
}

/* ---- 98.css WINDOW (the ONLY area that should look Win98) ---- */
.window-wrapper{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(900px, 90vw);
  height: min(640px, 85vh);
  z-index: 1000;
  overflow: hidden;
}

/* Force 98.css font only inside the window */
.window, .window *{
  font-family: "Pixelated MS Sans Serif","MS Sans Serif", sans-serif !important;
}

/* Window body scroll if content long */
.window-body{
  height: calc(100% - 30px); /* leave room for title bar */
  overflow: auto;
}

/* Hide helpers when not shown (we toggle [hidden]) */
[hidden]{ display: none !important; }



.audio-toggle {
      cursor: pointer;
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    .audio-toggle:focus { outline: 2px dashed #000; outline-offset: 2px; }
    /* Optional playing state */
    .audio-toggle[aria-pressed="true"] { text-decoration-style: wavy; }


p {
    font-size: 20px;
}

li {
    font-size: 20px;
}




.copy-text {
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  position: relative;
}
.copy-text:focus { outline: 2px dashed #000; outline-offset: 2px; }

.copy-text.copied::after {
  content: "copied!";
  position: absolute;
  top: -1.6rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,.75);
  color: #fff;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}