/* =========================================
   Coursebook (Moleskine style) — FULL CSS
   Single file for all 30 weeks
   ========================================= */

:root {
  --ink: #2a2c30;
  --paper: #ffffff;
  --accent: #6a5acd;
  --border: #4a4d52;
  --shadow: 0 20px 36px rgba(0,0,0,.10),
            0 4px 10px rgba(0,0,0,.06);

  --emoji-size: 180px;
  --emoji-gap: 60px;
  --tile: calc(var(--emoji-size) + var(--emoji-gap));
}

/* ===== Per-week colours ===== */
[data-theme="wk01"]  { --paper: #E0C1D9; }
[data-theme="wk02"]  { --paper: #C1DFF0; }
[data-theme="wk03"]  { --paper: #FFF1C9; }
[data-theme="wk04"]  { --paper: #FDE2E4; }
[data-theme="wk05"]  { --paper: #CDE7F0; }
[data-theme="wk06"]  { --paper: #F9E0AE; }
[data-theme="wk07"]  { --paper: #F6C1C1; }
[data-theme="wk08"]  { --paper: #B4D3B2; }
[data-theme="wk09"]  { --paper: #D8C8EB; }
[data-theme="wk10"] { --paper: #ADD8E6; }
[data-theme="wk11"] { --paper: #FF9147; }
[data-theme="wk12"] { --paper: #C0CCE3; }
[data-theme="wk13"] { --paper: #FF81C1; }
[data-theme="wk14"] { --paper: #FFF1C9; }
[data-theme="wk15"] { --paper: #FF6961; }
[data-theme="wk16"] { --paper: #61B7FF; }
[data-theme="wk17"] { --paper: #7FC8A9; }
[data-theme="wk18"] { --paper: #C8A2C8; }
[data-theme="wk19"] { --paper: #F7F4EE; }
[data-theme="wk20"] { --paper: #A97F56; }
[data-theme="wk21"] { --paper: #50C878; }
[data-theme="wk22"] { --paper: #ADD8E6; }
[data-theme="wk23"] { --paper: #FCCF28; }
[data-theme="wk24"] { --paper: #E35425; }
[data-theme="wk25"] { --paper: #C0C0C0; }
[data-theme="wk26"] { --paper: #3D195B; }
[data-theme="wk27"] { --paper: #FFCB05; }
[data-theme="wk28"] { --paper: #BDDEEC; }
[data-theme="wk29"] { --paper: #A8DCAB; }
[data-theme="wk30"] { --paper: #D4AF47; }

/* ===== Per-week emoji backgrounds ===== */
[data-theme="wk01"]  .page { background-image: url("../images/wk1_bikini.png"),  url("../images/wk1_wand.png"); }
[data-theme="wk02"]  .page { background-image: url("../images/wk2_disguise.png"), url("../images/wk2_spy.png"); }
[data-theme="wk03"]  .page { background-image: url("../images/wk3_grapes.png"),  url("../images/wk3_sunflower.png"); }
[data-theme="wk04"]  .page { background-image: url("../images/wk4_theatre.png"), url("../images/wk4_wrestle.png"); }
[data-theme="wk05"]  .page { background-image: url("../images/wk5_star.png"),     url("../images/wk5_farmer.png"); }
[data-theme="wk06"]  .page { background-image: url("../images/wk6_candle.png"),  url("../images/wk6_fire.png"); }
[data-theme="wk07"]  .page { background-image: url("../images/wk7_skull.png"),   url("../images/wk7_water.png"); }
[data-theme="wk08"]  .page { background-image: url("../images/wk8_hatch.png"),   url("../images/wk8_sapling.png"); }
[data-theme="wk09"]  .page { background-image: url("../images/wk9_baby.png"),    url("../images/wk9_gpa.png"); }
[data-theme="wk10"] .page { background-image: url("../images/wk10_dna.png"),    url("../images/wk10_jeans.png"); }
[data-theme="wk11"] .page { background-image: url("../images/wk11_cake.png"),   url("../images/wk11_pear.png"); }
[data-theme="wk12"] .page { background-image: url("../images/wk12_icecream.png"), url("../images/wk12_wheel.png"); }
[data-theme="wk13"] .page { background-image: url("../images/wk13_bun.png"),    url("../images/wk13_donut.png"); }
[data-theme="wk14"] .page { background-image: url("../images/wk14_easter.png"), url("../images/wk14_statue.png"); }
[data-theme="wk15"] .page { background-image: url("../images/wk15_radar.png"),  url("../images/wk15_scuba.png"); }
[data-theme="wk16"] .page { background-image: url("../images/wk16_controller.png"), url("../images/wk16_door.png"); }
[data-theme="wk17"] .page { background-image: url("../images/wk17_bed.png"),    url("../images/wk17_bell.png"); }
[data-theme="wk18"] .page { background-image: url("../images/wk18_factory.png"), url("../images/wk18_house.png"); }
[data-theme="wk19"] .page { background-image: url("../images/wk19_bat.png"),    url("../images/wk19_urn.png"); }
[data-theme="wk20"] .page { background-image: url("../images/wk20_island.png"), url("../images/wk20_rocket.png"); }
[data-theme="wk21"] .page { background-image: url("../images/wk21_nigeria.png"), url("../images/wk21_sax.png"); }
[data-theme="wk22"] .page { background-image: url("../images/wk22_coat.png"),   url("../images/wk22_gorp.png"); }
[data-theme="wk23"] .page { background-image: url("../images/wk23_bow.png"),    url("../images/wk23_castle.png"); }
[data-theme="wk24"] .page { background-image: url("../images/wk24_copyright.png"), url("../images/wk24_ear.png"); }
[data-theme="wk25"] .page { background-image: url("../images/wk25_boot.png"),   url("../images/wk25_hiking.png"); }
[data-theme="wk26"] .page { background-image: url("../images/wk26_football.png"), url("../images/wk26_lion.png"); }
[data-theme="wk27"] .page { background-image: url("../images/wk27_ball.png"),   url("../images/wk27_cig.png"); }
[data-theme="wk28"] .page { background-image: url("../images/wk28_bread.png"),  url("../images/wk28_radioactive.png"); }
[data-theme="wk29"] .page { background-image: url("../images/wk29_foot.png"),   url("../images/wk29_pound.png"); }
[data-theme="wk30"] .page { background-image: url("../images/wk30_frog.png"),   url("../images/wk30_case.png"); }

@font-face {
  font-family: 'Futura';
  src: url('../fonts/futura.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  font-family: 'Futura', Arial, sans-serif;
  color: var(--ink);
  background: #f4f5f7;
  display: flex; flex-direction: column;
  padding: 16px;
}

/* ===== Notebook shell ===== */
.notebook {
  display: flex;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 24px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--paper);
}
.spine { width: 68px; background: #0f1012; }

/* ===== Page with emoji pattern ===== */
.page {
  flex: 1;
  padding: 24px 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  background-color: var(--paper);
  background-repeat: repeat, repeat;
  background-size: var(--tile) var(--tile), var(--tile) var(--tile);
  background-position: 0 0, calc(var(--tile) / 2) calc(var(--tile) / 2);
}

/* ===== Title plaque ===== */
.label {
  width: min(92%, 1100px);
  margin: 0 auto;
  background: #fff; border: 3px solid var(--border); border-radius: 26px;
  text-align: center; padding: 16px 20px;
}
.label h1 { margin: 0; font-weight: 700; letter-spacing: .02em; font-size: clamp(1.8rem, 2.2vw + 1rem, 2.8rem); }
.label h2 { margin: .35rem 0 0; font-weight: 600; color: #000000; font-size: clamp(1rem, .6vw + .9rem, 1.35rem); }

/* ===== Back link ===== */
.back { display: block; text-align: center; margin: -4px auto 8px; color: var(--accent); text-decoration: none; font-size: 1.05rem; }
.back:hover { text-decoration: underline; }

/* ===== Collapsible sheets ===== */
.sheet {
  width: min(92%, 1100px);
  min-width: 0;
  margin: 0 auto;
  border: 3px solid var(--border);
  border-radius: 22px;
  background: #fff;
  overflow: hidden;
}
.collapsible > summary {
  display: flex; align-items: center; gap: .5rem;
  cursor: pointer; list-style: none;
  padding: 14px 18px; font-weight: 700; user-select: none;
}
.collapsible > summary::-webkit-details-marker { display: none; }
.collapsible > summary .caret {
  width: 0; height: 0; border-left: 6px solid var(--ink);
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
  transition: transform .2s ease;
}
.collapsible[open] > summary .caret { transform: rotate(90deg); }
.collapsible[open] > summary { border-bottom: 1px solid #e9ecef; }
.section-body { padding: 18px; }

/* ===== Slideshow ===== */
.slideshow {
  position: relative; max-width: 100%; margin: 0 auto;
  overflow: hidden; border-radius: 16px; border: 2px solid var(--border); background: #fff;
  aspect-ratio: 16/9;
}
.slides { width: 100%; height: 100%; }
.slides img { width: 100%; height: 100%; object-fit: contain; display: none; background: #000; }
.slides img.active { display: block; }
.slideshow .prev, .slideshow .next {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,.55); color: #fff; border: 0;
  padding: 10px 16px; cursor: pointer; border-radius: 50%;
  font-size: 1.2rem; line-height: 1; opacity: 0; transition: opacity .25s; pointer-events: none;
}
.slideshow:hover .prev, .slideshow:hover .next { opacity: 1; pointer-events: auto; }
.slideshow .prev { left: 10px; } .slideshow .next { right: 10px; }
.slideshow .prev:hover, .slideshow .next:hover { background: rgba(0,0,0,.75); }
.slideshow .prev:focus-visible, .slideshow .next:focus-visible, .slideshow .fs:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.slideshow .fs {
  position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,.55);
  color: #fff; border: 0; padding: 8px 10px; cursor: pointer; border-radius: 8px; font-size: 1rem;
}
.slideshow .counter {
  position: absolute; bottom: 10px; right: 12px;
  color: #fff; background: rgba(0,0,0,.45); padding: 4px 8px; border-radius: 6px; font-size: .95rem;
}
.slideshow:fullscreen { background: #000; border-radius: 0; border: none; }
.slideshow:fullscreen .prev, .slideshow:fullscreen .next { top: 50%; }
.slideshow:fullscreen .fs { top: 14px; right: 14px; }

/* ===== Audio ===== */
.audio-box { background: #f1f3f5; border: 1px solid #dfe3e8; border-radius: 12px; padding: 10px 12px; }
.audio-box audio { width: 100%; display: block; }

/* ===== Transcript ===== */
.transcript-toggle {
  margin-top: 12px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  background: #fffefc;
}
.transcript-toggle > summary {
  cursor: pointer;
  list-style: none;
  padding: 10px 14px;
  font-weight: 700;
}
.transcript {
  font-size: 0.98rem;
  line-height: 1.6;
  padding: 1rem 1.5rem;
  background: #fff;
  border: 1px solid #e0dccc;
  border-radius: 8px;
  box-shadow: inset 0 0 8px rgba(0,0,0,.05);
}
.transcript p { margin: 12px 0; }

/* ===== Video wrapper ===== */
.video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 12px; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-fallback { margin: .6rem 0 0; }

/* ===== Video link box ===== */
.video-link {
  padding: 1rem;
  background: #fff;
  border: 2px solid var(--border);
  border-radius: 12px;
  text-align: center;
}
.video-link a { font-weight: 700; color: #2f80ed; text-decoration: none; }
.video-link a:hover { text-decoration: underline; }

/* ===== Footer ===== */
.logos { width: 100%; text-align: center; margin: 24px 0 12px; }
.logos img { max-height: 90px; max-width: 90%; height: auto; width: auto; opacity: .95; }
.logos a.back { display: block; margin-top: 8px; }

/* ===== Thumbnail strip ===== */
.thumb-strip-wrapper {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  margin-bottom: 10px;
  border-radius: 10px;
  padding: 4px 2px 6px;
}
.thumb-strip-wrapper::-webkit-scrollbar { height: 5px; }
.thumb-strip-wrapper::-webkit-scrollbar-track { background: transparent; }
.thumb-strip-wrapper::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.thumb-strip { display: flex; gap: 8px; width: max-content; padding: 2px 4px; }
.thumb-item {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; cursor: pointer; flex-shrink: 0;
}
.thumb-item img {
  width: 80px; height: 52px; object-fit: cover;
  border-radius: 6px; border: 2px solid transparent;
  transition: border-color .18s ease, opacity .18s ease;
  background: #000; opacity: 0.55; display: block;
}
.thumb-item:hover img { opacity: 0.85; }
.thumb-item.active img { border-color: var(--accent); opacity: 1; }
.thumb-item span {
  font-size: 0.7rem; color: var(--ink);
  line-height: 1; opacity: 0.65; transition: opacity .18s ease;
}
.thumb-item.active span { opacity: 1; font-weight: 700; color: var(--accent); }
.slideshow:fullscreen ~ .thumb-strip-wrapper { display: none; }

/* ===== Mobile tweaks ===== */
@media (max-width: 720px) {
  body { padding: 12px; }
  .notebook { flex-direction: column; border-radius: 12px; }
  .spine { width: 100%; height: 16px; }
  .page { padding: 12px 12px 20px; gap: 16px; }
  .label, .sheet { width: calc(100% - 24px); }
  .logos img { max-height: 70px; }

  :root {
    --emoji-size: 120px;
    --emoji-gap: 28px;
    --tile: calc(var(--emoji-size) + var(--emoji-gap));
  }

  .slideshow .prev, .slideshow .next {
    opacity: 1; pointer-events: auto; padding: 6px 10px; font-size: 1rem;
  }
  .thumb-item img { width: 56px; height: 36px; border-radius: 4px; }
  .thumb-item span { font-size: 0.65rem; }
  .thumb-strip { gap: 6px; }
}