/* A Product's page: its piece first (the GM's own place at the table, the book and the teeth), then the kit in plain
   sections. Without scripts, or held still, the piece is the table picture with the book's cover and the teeth lying
   on it; html.living lets the visitor turn the pages and stand the teeth up. */
.hint { display: none; }
html.living .hint { display: block; }
.eyebrow { font: 700 1rem/1.2 var(--body); color: var(--ash); margin: 0 0 10px; }
.small { font-size: 0.9rem; line-height: 1.45; color: var(--ash); margin: 0; }
.tag { display: inline-block; background: var(--fog); color: var(--white); font: 700 0.85rem/1.2 var(--body); padding: 4px 9px 5px; border-radius: 2px; }

/* ---- The piece ---- */
.piece { position: relative; overflow: clip; background: #1c1712; isolation: isolate; }
.piece-table { position: absolute; inset: 0; z-index: -2; margin: 0; }
.piece-table img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.piece-words { position: relative; color: var(--white); }
/* The words carry their own shade, as tall and wide as they are, so at large text or zoom the headline never runs out
   of it onto the bright table. */
.piece-words::before { content: ""; position: absolute; z-index: -1; inset: 0 -5vw 0 0; background: linear-gradient(90deg, rgba(25,24,29,0.9) 0, rgba(25,24,29,0.86) calc(100% - 5vw), rgba(25,24,29,0)); pointer-events: none; }
.piece-words h1 { font-size: clamp(2.3rem, 3.6vw, 3.7rem); margin-bottom: 0.35em; }
.piece-words .lede { font-size: 1.12rem; line-height: 1.5; max-width: 30rem; }
.piece-words .hint { font-size: 1rem; color: var(--white); max-width: 30rem; }
.to-pages { margin: 0 0 4px; }
.to-pages a { display: inline-flex; align-items: center; min-height: 44px; color: var(--white); font: 700 1rem/1.2 var(--body); text-decoration-color: var(--tape); text-decoration-thickness: 2px; }
#price { position: absolute; width: 1px; height: 1px; scroll-margin-top: 120px; outline: none; }
.buy { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 22px 0 12px; }
.buy .price { font-size: 2.3rem; }
.buy.soon { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 10px 16px; max-width: 32rem; }
.buy.soon p { margin: 0; color: var(--white); line-height: 1.45; }
.buy.soon .btn { grid-column: 2; justify-self: start; }

.piece-table-top { position: relative; display: flex; align-items: center; justify-content: center; }
.book-spot { margin: 0; position: relative; }
.book { position: relative; outline-offset: 6px; -webkit-tap-highlight-color: transparent; touch-action: pan-y; cursor: pointer; }
.book > img { position: absolute; left: 50%; top: 50%; height: 86%; width: auto; transform: translate(-50%, -50%); box-shadow: 0 2px 0 #d9d2c4, 0 4px 0 #c8bfae, 6px 18px 26px rgba(10,6,2,0.55); }
.book canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.book-cap { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%); width: max-content; max-width: min(100%, 92vw); font-size: 0.95rem; line-height: 1.3; color: var(--white); display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 8px; align-items: center; background: rgba(25,24,29,0.86); padding: 6px 10px 6px 6px; border-radius: 3px; }
.book-cap .tag { flex: none; background: var(--tape); color: var(--fog); }

/* The teeth tents lie folded on the table, face up, the printed fold at the top. The list is the table's own plane
   (tilted as the drawing's table recedes), so a tent that stands rises out of it: the front face swings up on its feet,
   the back face opens from the fold behind it, and its shadow falls toward the GM, away from the lamp. */
.teeth { position: relative; z-index: 2; perspective: 900px; perspective-origin: 50% 0; }
.teeth-cap { margin: 0 0 12px; font-size: 0.95rem; display: flex; gap: 8px; align-items: center; white-space: nowrap; }
.teeth-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, var(--w)); gap: calc(var(--w) * 0.16) calc(var(--w) * 0.2); transform-style: preserve-3d; transform-origin: 50% 0; }
html.living .teeth-list { transform: rotateX(54deg); }
html.living .teeth { margin-bottom: calc(var(--w) * -0.4); }
.tooth { position: relative; width: var(--w); aspect-ratio: 296 / 320; transform: rotate(calc(-5deg + var(--i) * 3.5deg)); transform-style: preserve-3d; -webkit-tap-highlight-color: transparent; border-radius: 3px; }
.tent { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: 50% 100%; }
.tooth-card { position: absolute; inset: 0; display: block; border-radius: 2px;
  background: #fff url("../world/kit/teeth-row.webp") no-repeat;
  background-size: calc(var(--w) * 1395 / 296) auto;
  background-position: calc(var(--w) * -1 * (8 + var(--i) * 359.7) / 296) calc(var(--w) * -8 / 296);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.3), 2px 5px 7px rgba(10,6,2,0.5); }
/* The back half of the tent, hinged at the fold: its unprinted side, in the tent's own shade. */
.tent-back { position: absolute; inset: 0; display: block; transform-origin: 50% 0; transform: translateZ(-1px); border-radius: 2px; background: linear-gradient(180deg, #d9d2c4, #b7ad9b); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25); }
html:not(.living) .tent-back { display: none; }
.tooth-shadow { position: absolute; left: -2%; right: -2%; top: 96%; height: 100%; transform-origin: 50% 0; background: linear-gradient(180deg, rgba(14,8,3,0.62), rgba(14,8,3,0.22) 60%, rgba(14,8,3,0)); filter: blur(2px); border-radius: 0 0 40% 40%; opacity: 0; transform: scaleY(0.1); pointer-events: none; }
html.living .tooth { cursor: pointer; }
/* A tent is one inch across, so it is drawn small beside the book; the finger gets a target bigger than the paper. In
   the tilted table plane a 84px tall target shows about 48px tall. */
.tooth::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(48px, calc(var(--w) + 12px)); height: max(84px, calc(var(--w) + 12px)); transform: translate(-50%, -50%); }
html.living .tooth:focus-visible { outline: 3px solid var(--tape); outline-offset: 4px; }

@media (min-width: 900px) {
  .piece { min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: minmax(22rem, 36rem) 1fr; padding-top: var(--bar); }
  .piece::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(25,24,29,0.96) 0, rgba(25,24,29,0.9) 24%, rgba(25,24,29,0.35) 40%, rgba(25,24,29,0) 52%); pointer-events: none; }
  .piece-words { align-self: center; padding: 6vh 2vw 8vh max(28px, 4vw); }
  .piece-table-top { flex-direction: column; gap: 0; padding: 4vh 3vw 4vh 0; }
  .book-spot { width: min(50vw, 64vh * 1.55, 900px); }
  .book { aspect-ratio: 1.55; }
  /* One scale for the whole kit: the book's page is 8.5 inches across and about 0.42 of the book's spot, and a teeth tent
     is 1 inch across, set a little nearer than the book (x1.1). */
  .teeth { --w: calc(min(50vw, 64vh * 1.55, 900px) * 0.054); align-self: center; margin: calc(12px + 1.4em) 0 0; }
  .teeth-list { grid-template-columns: repeat(4, var(--w)); column-gap: max(30px, calc(var(--w) * 0.9)); }
}
@media (max-width: 899px) {
  .piece { display: flex; flex-direction: column; min-height: calc(100svh - var(--buybar)); padding-top: var(--bar); }
  .piece-words { padding: 16px 18px 6px; }
  .piece-words::before { inset: calc(-1 * var(--bar)) 0 -28px 0; background: linear-gradient(180deg, rgba(25,24,29,0.95) 0, rgba(25,24,29,0.86) calc(100% - 28px), rgba(25,24,29,0)); }
  .piece-words h1 { font-size: clamp(1.8rem, 8.2vw, 2.4rem); margin-bottom: 0.25em; }
  .piece-words .lede { font-size: 1rem; margin-bottom: 0.4em; }
  html.living .piece-words .hint { display: none; }
  .book-cap { position: relative; left: auto; bottom: auto; transform: none; margin: 4px 10px 0; white-space: normal; flex-wrap: wrap; row-gap: 2px; }
  .piece-words .buy, .piece-words .small { display: none; }
  .piece-table-top { flex: 1; flex-direction: column; justify-content: space-evenly; padding: 6px 0 18px; }
  .book-spot { width: 100%; }
  .book { aspect-ratio: 1.55; }
  .book-cap { font-size: 0.85rem; }
  /* The same scale on the phone, the teeth lying on the near edge of the table (x1.3). */
  .teeth { --w: calc(100vw * 0.064); margin: 22px 0 0; align-self: center; }
  .teeth-list { grid-template-columns: repeat(4, var(--w)); gap: 12px max(30px, calc(var(--w) * 1.2)); }
}

/* ---- The plain sections ---- */
.sect { background: var(--fog); padding: 9vh max(18px, 5vw); }
.sect-in { max-width: 72rem; margin: 0 auto; }
.sect h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
.sect-lede { font-size: 1.1rem; max-width: 40rem; color: var(--white); }

.items { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; }
.items > li { position: relative; background: var(--white); color: var(--fog); border: 3px solid var(--fog); padding: 26px 26px 18px; max-width: 52rem; box-shadow: 0 1px 0 rgba(0,0,0,0.25); }
.items > li:nth-child(even) { margin-left: auto; }
.items > li::before { content: ""; position: absolute; left: 26px; top: -11px; width: 96px; height: 20px; background: var(--tape); transform: rotate(-3deg); }
.items > li:nth-child(even)::before { left: auto; right: 30px; transform: rotate(2.5deg); }
/* Very large text or zoom: every card keeps inside the column, the paper margin narrower. */
@media (max-width: 24em) { .items > li { max-width: 100%; padding: 22px 14px 14px; } .items h3 { font-size: 1.3rem; } }
.items h3 { font-size: 1.5rem; color: var(--fog); }
.items p, .items li li { font-size: 1rem; line-height: 1.55; }
.scenes { margin: 0 0 0.8em; padding-left: 1.1em; }
.scenes li { margin-bottom: 0.35em; }

.shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; margin-top: 30px; align-items: start; }
.shot { margin: 0; }
.shot a { display: block; background: #0f0e12; border: 1px solid var(--fog2); }
.shot img { width: 100%; height: auto; }
.shot figcaption { margin-top: 8px; font-size: 0.95rem; color: var(--ash); }
/* A page's printed words, written out for anyone who would rather read or listen than squint. */
.as-text { margin-top: 6px; }
.as-text summary { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--white); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.as-text > div { padding: 12px 16px; margin-top: 6px; background: var(--fog2); border-left: 0; font-size: 0.98rem; line-height: 1.5; }
.as-text p { margin: 0 0 0.7em; }
@media (min-width: 900px) { .shots { grid-template-columns: repeat(6, 1fr); } .shot.tall { grid-column: span 3; } .shot.wide { grid-column: span 3; } }
@media (max-width: 599px) { .shots { grid-template-columns: 1fr; } }
.credit { margin-top: 26px; font-size: 0.85rem; color: var(--ash); max-width: 52rem; }

.reasons { display: grid; gap: 28px 44px; margin-top: 26px; }
@media (min-width: 900px) { .reasons { grid-template-columns: 1fr 1fr; } .reason:first-child { grid-column: 1 / -1; max-width: 46rem; } }
.reason h3 { font-size: 1.35rem; }
.reason p { color: var(--white); max-width: 36rem; }

.two { display: grid; gap: 40px 60px; }
@media (min-width: 900px) { .two { grid-template-columns: 1fr 1fr; } }
.plain { margin: 0; padding-left: 1.1em; }
.plain li { margin-bottom: 0.6em; }

.closer { padding-bottom: 12vh; }
.closer-in { display: grid; gap: 40px 60px; align-items: start; }
@media (min-width: 900px) { .closer-in { grid-template-columns: 1fr 1fr; } }
.closer-buy p { max-width: 30rem; }