/* ── RESET ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
}

/* ── SCENE ─────────────────────────────────────────── */
.scene {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('assetts/Wood.jpeg') center center / cover no-repeat;
}

/* ── BLANKET ITEMS ─────────────────────────────────── */
.blanket-item {
  position: absolute;
  z-index: 1;  /* below notebook-wrap */
  pointer-events: none;
  filter: drop-shadow(2px 4px 10px rgba(0,0,0,0.25));
}



/* ── NOTEBOOK ──────────────────────────────────────── */
/* Notebook image natural size: 1264×841 (ratio ≈ 1.503) */
.notebook-wrap {
  position: relative;
  width: min(100vw, calc(100vh * 1264 / 841));
  height: min(100vh, calc(100vw * 841 / 1264));
  container-type: inline-size;  /* cqw units inside track notebook width, not viewport */
  filter: drop-shadow(0 12px 40px rgba(0,0,0,0.35))
          drop-shadow(0 4px 12px rgba(0,0,0,0.2));
}

.notebook-img {
  display: block;
  width: 100%;
  height: 100%;
}

/* ── OVERLAY ───────────────────────────────────────── */
.notebook-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

/* ── PAGE CONTAINERS ───────────────────────────────────
   Percentages derived from pixel measurements of Notebook.png (1264×841):
     Left page:  x 10.6%–48.0%, y 4.9%–76.9%
     Right page: x 52.3%–88.6%, y 4.9%–76.9%
   ────────────────────────────────────────────────── */
.nb-page {
  position: absolute;
  top: 4.9%;
  height: 72%;        /* 76.9% - 4.9% */
  overflow: hidden;   /* hard boundary — nothing escapes the page */
  pointer-events: none;
}

.nb-page-left {
  left: 10.6%;
  width: 37.4%;       /* 48.0% - 10.6% */
}

.nb-page-right {
  left: 52.3%;
  width: 36.3%;       /* 88.6% - 52.3% */
}

/* ── ITEM BASE ─────────────────────────────────────── */
.nb-item {
  position: absolute;
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.16s ease, filter 0.16s ease, box-shadow 0.16s ease;
  filter: drop-shadow(2px 4px 8px rgba(0,0,0,0.22));
}

.nb-item img {
  width: 100%;
  display: block;
  object-fit: contain;
}

.nb-item:hover {
  transform: translateY(-4px) scale(1.04);
  filter: drop-shadow(3px 8px 18px rgba(0,0,0,0.32));
  z-index: 20;
}

.nb-item:active {
  transform: translateY(-1px) scale(1.01);
}

/* ── LEFT PAGE ITEMS ───────────────────────────────── */

.title-item {
  left: 10%;
  top: -2%;
  width: 80%;
  transform: rotate(-1deg);
  cursor: default;
}
.title-item:hover {
  transform: rotate(-1deg);
  filter: drop-shadow(2px 4px 8px rgba(0,0,0,0.22));
}

/* Group container — the whole unit lifts and clicks together */
.team-polaroid-group {
  left: 32%;
  top: 33%;
  width: 65%;
  height: 60%;
}

/* Positions are now relative to the group, not the page */
.ella-polaroid {
  position: absolute;
  left: 42%;
  top: 38%;
  width: 58%;
  transform: rotate(3deg);
}
.ella-polaroid img {
  width: 100%;
  display: block;
  object-fit: contain;
}

.brie-polaroid {
  position: absolute;
  left: 6%;
  top: 2%;
  width: 62%;
  transform: rotate(-3deg);
  z-index: 2;
}
.brie-polaroid img {
  width: 100%;
  display: block;
  object-fit: contain;
}

.stanford-item {
  left: 2%;
  top: 47%;
  width: 67.2%;
  transform: rotate(-1deg);
}
.stanford-item:hover {
  transform: rotate(-1deg) translateY(-4px) scale(1.04);
}

/* ── EPISODE META ROW ─────────────────────────────────
   Location / governing body / date strip — sits above the
   video on the right page, visible regardless of active tab.
   Re-use on every episode page by adding .nb-meta-row HTML
   directly inside .nb-page-right.
   ────────────────────────────────────────────────── */
.nb-meta-row {
  position: absolute;
  top: 6%;
  left: 5%;
  width: 90%;
  display: flex;
  border: 1px solid #1a3a8f;
  opacity: 1;
  pointer-events: none;
  z-index: 5;
}
.nb-meta-row span {
  flex: 1;
  border-right: 1.5px solid #1a3a8f;
  color: #1a3a8f;
  font-family: 'Times New Roman', Times, serif;
  font-weight: bold;
  font-size: 1cqw;
  text-align: center;
  padding: 0.5% 1%;
}
.nb-meta-row span:last-child {
  border-right: none;
}

/* ── TEA ───────────────────────────────────────────── */
/* Fixed square wrapper — SVG viewBox 300×300 maps 1:1 onto this 33vw × 33vw box */
.tea-wrapper {
  position: absolute;
  bottom: 1%;
  right: 76%;
  width: 33vw;
  height: 33vw;         /* locked square — never drifts */
  z-index: 5;
  pointer-events: none; /* children override individually */
}

/* Tea image: anchored to wrapper bottom, same proportions as original 28vw img */
.tea-link {
  position: absolute;
  bottom: 0;
  left: 8%;             /* mirrors x=25/300 in the SVG viewBox */
  width: 84%;           /* mirrors width=250/300 in the SVG viewBox */
  display: block;
  cursor: pointer;
  pointer-events: auto;
}
.tea-link img {
  display: block;
  width: 100%;
  height: auto;         /* natural aspect ratio, no SVG sizing involved */
}

/* Text arc: absolute overlay covering the full wrapper square, no image inside */
.tea-arc-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}