:root{
  --pageBg:#012c59;
  --windowW:1040px;
  --windowH:600px;
  --headerH:35px;
  --topOverlap:48px;
  --bottomOverlap:7px;
  --frameScale:1;
  --radius:0px;
}

*{box-sizing:border-box}
html,body{height:100%}
html{background:var(--pageBg)}
body{margin:0; font-family:system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji"; color:#012a56; background:var(--pageBg)}

.stage{min-height:100dvh; display:grid; place-items:center; padding:16px}

/* Centered white window with its own internal scroller */
.window{
  position:relative;
  width:var(--windowW);
  height:var(--windowH);
  background:#fff;
  overflow:hidden;                  /* hides the parts under the overlays */
  padding-top:var(--topOverlap);    /* reserve room under the top image */
  padding-bottom:var(--bottomOverlap);
  border-radius:var(--radius);
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}

/* Main nav (right-aligned) */
.window-header{
  position:relative;
  z-index:2;
  height:var(--headerH);
  background:#fff;
  display:flex; align-items:center; justify-content:flex-end;
  padding:0 16px;
  border-bottom:0px;
}
.window-nav a{
  display:inline-block;
  padding:.5rem .8rem;
  border-radius:10px;
  text-decoration:none;
  color:#012a56;
}
.window-nav a.active{ background:#eaf3ff; font-weight:700; }
.window-nav a:hover{ background:#f2f7ff; }

/* The only scrolling area */
.scroll{
  position:absolute;
  left:0; right:0;
  top:calc(var(--topOverlap) + var(--headerH));
  bottom:var(--bottomOverlap);
  overflow:auto;
  padding:16px;
  background:#fff;
}

/* Top & bottom decorative strips (fixed and sized to the window width) */
.frame-img{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  width:auto; max-width:auto; max-width:calc(var(--windowW) * var(--frameScale));
  height:auto;
  pointer-events:none;
  z-index:4;
}
.frame-top{
  /* Keep visible even on short screens */
  top:clamp(0px, calc((100dvh - var(--windowH))/2 - var(--topOverlap)), 100dvh);
}
.frame-bottom{
  bottom:clamp(0px, calc((100dvh - var(--windowH))/2 - var(--bottomOverlap)), 100dvh);
}

/* Content cards to match the look */
.panel{
  background:linear-gradient(#fafdff,#ffffff);
  border:1px solid #e6eef7;
  border-radius:12px;
  padding:22px;
  margin:0 auto 14px;
  max-width:920px;
  text-align:center;
}
h1,h2{ color:#03417b; margin:.2rem 0 .6rem }
.lead{ opacity:.9 }

/* Subnav (chips) aligned to the right */
.subnav{
  display:flex; gap:.5rem; justify-content:flex-end; align-items:center;
  width:100%; max-width:920px; margin:0 auto 12px;
}
.subnav .sn{
  text-decoration:none; padding:.4rem .7rem; border-radius:10px;
  border:1px solid #e2eef6; color:#012a56; background:#fff;
}
.subnav .sn:hover{ background:#f3f9ff }
.subnav .sn.active{ background:#e8f2fb; font-weight:700 }

/* Footer badges or notes row */
.badge-row{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.badge-row img{ display:block; box-shadow:0 2px 6px rgba(0,0,0,.15); border-radius:4px }


/* Download button */
.btn.download{
  display:inline-block;
  background:#f1a329;
  color:#08243b;
  font-weight:800;
  padding:.55rem 1rem;
  border-radius:10px;
  text-decoration:none;
  box-shadow:0 2px 0 rgba(0,0,0,.08);
}
.btn.download:hover{ filter: brightness(0.98); transform: translateY(-1px); }



/* Base page background */
body{
  background:#012c59;     /* your site blue */
  position: relative;
  isolation: isolate;     /* lets the ::after sit behind content with z:-1 */
}

/* One 300x300 bubble patch, bottom-left, no repeat, behind content */
body::after{
  content:"";
  position: fixed;
  left: 0;
  bottom: 0;
  width: 250px;                   /* exact pixel size */
  height: 250px;                  /* exact pixel size */
  background-image: url("img/Bubbles.gif");
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 250px 250px;   /* prevents any scaling */
  z-index: -1;                    /* behind your window/content */
  pointer-events: none;
  opacity: 1;                     /* tweak if needed */
}

/* (Optional) shrink a bit on small screens */
@media (max-width: 480px){
  body::after{ width: 220px; height: 220px; background-size: 220px 220px; }
}





/* Extra pizzazzy styling for credits */
.pizzazzy-credits {
  background: linear-gradient(135deg, rgba(255,200,255,0.2), rgba(200,255,255,0.2));
  border: 3px dashed #e1cfff;
  border-radius: 16px;
  padding: 1.5em;
  margin: 2em auto;
  text-align: center;
  font-size: 1em;
  line-height: 1.6;
  box-shadow: 0 0 12px rgba(200,150,255,0.4);
}

.pizzazzy-credits h3 {
  font-family: 'Georgia', serif;
  font-size: 1.4em;
  color: #b565d9;
  margin-bottom: 0.5em;
}

.pizzazzy-credits ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  text-align: left;
}

.pizzazzy-credits li {
  margin: 0.4em 0;
}

/* Title logo overlay — fixed, centered, natural pixel size, above frame */
.frame-title-link{
  position: fixed;
  top: clamp(0px, calc((100dvh - var(--windowH))/2 - var(--topOverlap)), 100dvh);
  left: calc(50% + 32px); /* push to the right */
  transform: translateX(-50%);
  z-index: 9999;
  width: 195px;
  height: 129px;
  background-image: url('img/titleimg.png');
  background-repeat: no-repeat;
  background-size: 195px 129px;
  display: block;
}


/* === Archive cards === */
.doll-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:14px;
  max-width:920px;
  margin:0 auto 14px;
}
.doll-card{ position:relative; border:1px solid #e6eef7; border-radius:12px; overflow:hidden; min-height:320px; background:#ffffff; }
.doll-photo{ position:relative; width:100%; height:250px; display:flex; align-items:flex-end; justify-content:center; background:url('img/archivecards.png') center bottom no-repeat; background-size: contain; }
.doll-photo img{ max-width:92%; height:auto; object-fit:contain; filter: drop-shadow(0 6px 8px rgba(0,0,0,.25)); }
.doll-photo.placeholder{ border-bottom: 1px dashed rgba(255,255,255,.3); }
.doll-caption{
  width:100%; text-align:center; background:linear-gradient(180deg, rgba(255,255,255,.92), #ffffff);
  padding:10px 8px 14px;
}
.doll-name{
  color:#03417b; font-weight:800; letter-spacing:.3px;
  font-size:1.05rem; margin:2px 0 0;
}
.doll-home{
  font-style:italic; color:#013363; opacity:.9; margin:2px 0 0;
}
@media (max-width: 900px){
  .doll-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px){
  .doll-grid{ grid-template-columns: repeat(2, 1fr); }
}