/* Layout: the torn map lies on a cream table. The "stage" keeps the map's
   proportions; a "frame" inside it marks where the original artwork sat, and the
   lettering is placed in % of that frame so it stays put at any size. */
:root {
  --ink: #1a2690;        /* marker blue from the title lettering */
  --paper: #f6f0e1;      /* the cream of the torn hole */
  --table: #f9f4e0;      /* the surface the torn map lies on */
  --map: #e7c07c;        /* map sand */
  --lift: drop-shadow(.45vmin .65vmin .5vmin rgb(80 60 20 / .45));  /* paper lifted off the table */
  --font-hand: "Celenes", "Comic Sans MS", "Chalkboard SE", "Segoe Print", cursive;
  color-scheme: light;
}

@font-face {
  font-family: "Celenes";
  src: url("fonts/celenes.ttf") format("truetype");
  font-display: block;
}

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--table);
  color: var(--ink);
  font-family: var(--font-hand);
}

/* ---------- navigation: little paper tags pinned to the map ---------- */
.nav {
  position: fixed;
  z-index: 10;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  right: max(16px, env(safe-area-inset-right, 0px));
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.nav a {
  font-size: clamp(18px, 1.6vw, 26px);
  color: var(--ink);
  text-decoration: none;
  background: var(--paper);
  padding: 4px 14px 2px;
  box-shadow: 1px 2px 0 rgb(0 0 0 / .18);
  transform: rotate(var(--tilt, -2deg));
  transition: transform .15s ease;
}
.nav a:nth-child(2) { --tilt: 1.5deg; }
.nav a:nth-child(3) { --tilt: -1deg; }
.nav a:hover, .nav a:focus-visible { transform: rotate(0deg) scale(1.08); }
.nav a[aria-current="page"] { text-decoration: underline wavy; text-underline-offset: 4px; }
a:focus-visible, button:focus-visible { outline: 3px dashed var(--ink); outline-offset: 4px; }

/* ---------- the stage ---------- */
.home { overflow: hidden; }
.viewport { position: fixed; inset: 0; overflow: hidden; }   /* the map never widens the page */
.stage {
  --ratio: 1.4264;                                   /* torn map, 4486 x 3145 */
  --gap: max(16px, 3.5vmin);                         /* table showing around the map */
  --w: min(100vw - 2 * var(--gap), (100svh - 2 * var(--gap)) * var(--ratio));
  --h: calc(var(--w) / var(--ratio));
  position: absolute;
  width: var(--w);
  height: var(--h);
  left: calc((100vw - var(--w)) / 2);
  top: calc((100svh - var(--h)) / 2);
}
.stage img.bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  max-width: none;
  display: block;
  user-select: none;
  filter: var(--lift);
}
/* where the wide artwork (4482 x 3156) sits on the torn map */
.frame {
  position: absolute;
  left: -.2%; top: 3.5%; width: 93.91%; height: 94.32%;
  container-type: size;
  pointer-events: none;          /* let clicks through to the artwork below */
}

/* every piece in the frame is placed by --x/--y (left/top, % of the frame) */
.piece { position: absolute; left: var(--x); top: var(--y); margin: 0; }

/* ---------- hand-lettered title ---------- */
.title { margin: 0; font-weight: normal; }
.word {
  position: absolute; left: var(--x); top: var(--y);
  font-size: var(--size);
  line-height: 1;
  white-space: nowrap;
  color: var(--ink);
  -webkit-text-stroke: .32cqw var(--ink);
  transform-origin: left top;
  transform: scaleY(var(--stretch, 1.45)) rotate(var(--rot, 0deg));
}
.word span { display: inline-block; transform: translateY(var(--dy, 0)) rotate(var(--r, 0deg)) scale(var(--s, 1)); transform-origin: bottom center; }

.w-what { --x: 5.5%;  --y: 20.5%; --size: 18.2cqw; --rot: -1deg; }
.w-is   { --x: 43.5%; --y: 25.5%; --size: 9.6cqw;  --stretch: 1.3; }
.w-left { --x: 68%;   --y: 23.5%; --size: 13.5cqw; --rot: -1.5deg; }
.w-left .big { --s: 1.45; --dy: -.04em; }
.w-what span:nth-child(1) { --r: -3deg; }
.w-what span:nth-child(3) { --dy: -.03em; --r: 2deg; }
.w-left span:nth-child(3) { --r: 3deg; }
.w-left span:nth-child(4) { --dy: -.05em; }

.tagline {
  --x: 32%; --y: 84%;
  font-size: 5.6cqw;
  line-height: 1;
  white-space: nowrap;
  color: var(--ink);
  -webkit-text-stroke: .15cqw var(--ink);
  transform: rotate(-1.5deg);
}

/* ---------- sound toys: any artwork button with data-sound ----------
   Plays its sound on click. The script moves it like stop-motion: a new tiny
   pose every frame (no smoothing between) with the paper edge "boiling",
   while hovered, while its sound plays, and in a short idle twitch now and then.
   Place one on the stage with .piece and --x/--y, and give it a width. */
.toy {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: inherit;
  filter: var(--lift);           /* shadow on the button, so the boil on the image can't drop it */
}
.toy img { width: 100%; display: block; transform-origin: 50% 80%; }
.boiling img { filter: url(#boil); }            /* stop-motion edge warp (assets/stopmotion.js) */
.toy-hint {
  position: absolute; left: 70%; top: -18%;
  font-size: 1.9cqw; white-space: nowrap;
  background: var(--paper);
  padding: .2em .55em .05em;
  transform: rotate(6deg);
  box-shadow: 1px 2px 0 rgb(0 0 0 / .18);
  transition: opacity .3s;
}
.toy.played .toy-hint { opacity: 0; }

/* the two friends, at exactly their spot in the original artwork (on the torn map) */
.friends {
  --x: 46.06%; --y: 31.88%;
  width: 24.09%;
  transform: rotate(.37deg);
}
.friends img { transform-origin: 45% 62%; }   /* pivot where they sit on the edge */

/* ---------- curved lettering for the tall (phone) artwork ---------- */
.arc-title {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: none;
  overflow: visible;
  pointer-events: none;
}
.arc-title text {
  font-family: var(--font-hand);
  fill: var(--ink);
  stroke: var(--ink);
  stroke-width: 4px;
  stroke-linejoin: round;
  text-anchor: middle;
  dominant-baseline: central;
}
/* phones narrower than the artwork crop its sides; --arc-fit pulls the lettering in */
.arc-title .arc-group {
  transform: scale(var(--arc-fit, 1));
  transform-box: fill-box;
  transform-origin: center;
}

/* ---------- phones / portrait: map fills the height, its sides run off screen ---------- */
@media (max-aspect-ratio: 1/1) {
  .stage {
    --h: calc(100svh - 2 * var(--gap));
    --w: calc(var(--h) * var(--ratio));
    left: calc(50vw - var(--w) * .5765);             /* centre the tall frame on screen */
  }
  /* where the tall artwork (1775 x 3156) sits on the torn map */
  .frame { left: 39.06%; top: 3.88%; width: 37.17%; height: 94.27%; }
  .title .word, .tagline { display: none; }
  .arc-title { display: block; }
  .nav a { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .nav a { transition: none; }
}

/* ---------- inner pages (episodes, about) ---------- */
.inner {
  height: auto;                  /* grow with the content so the bottom margin shows */
  min-height: 100%;
  background: var(--table);
  box-sizing: border-box;
  padding-block: 120px clamp(70px, 10vh, 120px);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.postcard {
  max-width: 760px;
  margin: 0 auto;
  aspect-ratio: 1200 / 799;
  background: url("img/postcard.webp") center / cover;
  box-shadow: 4px 6px 0 rgb(0 0 0 / .2);
  transform: rotate(-1.5deg);
  display: grid;
  grid-template-columns: 52% 1fr;
  align-items: center;
  box-sizing: border-box;
  padding: 6% 6%;
}
/* the hand-drawn stamp, stuck over the printed stamp box (81.5%-96% x 4.8%-31.9% of the card) */
.postcard { position: relative; }
.postcard .stamp {
  position: absolute;
  left: 88%; top: 18.35%;           /* centre of the printed box */
  width: 15.2%;                      /* just covers the box's height */
  transform: translate(-50%, -50%) rotate(.8deg);
  filter: drop-shadow(1px 1.5px 1px rgb(80 60 20 / .35));
}
.postcard h1 { margin: 0; font-weight: normal; font-size: clamp(24px, 6vw, 60px); line-height: 1.05; }
.postcard p { margin: 0; font-size: clamp(12px, 2.4vw, 24px); line-height: 1.3; padding-left: 8%; }
/* the map stays put behind the page while it scrolls (phones ignore background-attachment: fixed) */
.inner::before {
  content: "";
  position: fixed; inset: 0; z-index: -1;
  background: url("img/map-1400.webp") center / cover;
}

/* ---------- episode grid: prints laid on the map under the postcard ---------- */
.episode-grid {
  list-style: none;
  margin: clamp(40px, 6vw, 72px) auto 0;
  padding: 0;
  max-width: 1000px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));   /* two across at most */
  gap: clamp(24px, 3.5vw, 48px);
}
.episode {
  filter: var(--lift);
  transform: rotate(var(--tilt, 0deg));
}
.episode img { display: block; width: 100%; height: auto; }

/* a tile with a teaser: the video sits under the thumbnail and shows once it's playing */
.teaser {
  position: relative; display: block; width: 100%;
  padding: 0; border: 0; background: none; cursor: pointer;
}
.teaser video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.teaser img { position: relative; }
.teaser.is-playing img { visibility: hidden; }
.episode:nth-child(8n+1) { --tilt: -1deg; }
.episode:nth-child(8n+2) { --tilt: .8deg; }
.episode:nth-child(8n+3) { --tilt: -.4deg; }
.episode:nth-child(8n+4) { --tilt: 1.1deg; }
.episode:nth-child(8n+5) { --tilt: -1.2deg; }
.episode:nth-child(8n+6) { --tilt: .5deg; }
.episode:nth-child(8n+7) { --tilt: .9deg; }
.episode:nth-child(8n+8) { --tilt: -.7deg; }
@media (max-width: 520px)  { .episode-grid { grid-template-columns: minmax(0, 1fr); max-width: 380px; } }

/* phones keep the same card shape and two sides, just smaller */
@media (max-width: 520px) {
  .inner { padding-block: 110px 40px; }
  .postcard { padding: 6% 5%; }
}