/* ==========================================================================
   The book, as it is inside (Ben, 2026-10-01: the page-curl sample "is one of the most pathetic, the book
   doesn't look like that inside at all"). A phone, and on it the real book filmed frame by frame on its own
   clock: the cover opens onto the list, the pizza's page turns in, its claim plays, its ingredients for two
   trays, cooking with the demonstrations. Beside it, what is on screen now; a tap on one goes there.
   Stage composition uses physical left/right on purpose: it is a picture.
   ========================================================================== */
.inside__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; grid-template-areas: "text tour" "parts tour"; column-gap: clamp(40px, 6vw, 110px); }
.inside__text { grid-area: text; align-self: end; }
.inside__text .lead { max-inline-size: 30em; }

/* what is on screen: five parts, the one playing lit, a hairline filling under it as it plays */
.tour__parts { grid-area: parts; align-self: start; list-style: none; margin: clamp(28px, 4vw, 44px) 0 0; padding: 0; display: grid; gap: 4px; max-inline-size: 26em; counter-reset: part; }
.tour__part {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 16px; align-items: baseline;
  inline-size: 100%; padding: 14px 18px 16px; border: 0; border-radius: 16px; background: none; color: var(--cream-3);
  font: inherit; text-align: start; cursor: pointer; transition: background .5s var(--ease), color .5s var(--ease);
}
.tour__part::before { counter-increment: part; content: counter(part); grid-row: span 2; font-family: var(--num); font-weight: 600; font-size: 15px; color: var(--cream-3); transition: color .5s var(--ease); }
.tour__part b { font-weight: 800; font-size: clamp(18px, 1.5vw, 22px); color: inherit; transition: color .5s var(--ease); }
.tour__part span { font-size: 15px; line-height: 1.45; }
.tour__part::after { content: ""; position: absolute; inset-inline: 18px; inset-block-end: 6px; block-size: 2px; border-radius: 2px; background: var(--gold); transform: scaleX(var(--p, 0)); transform-origin: right; opacity: 0; transition: opacity .4s; }
.tour__part:hover { color: var(--cream-2); }
.tour__part.is-on { background: var(--ink-2); color: var(--cream-2); }
.tour__part.is-on b { color: var(--cream); }
.tour__part.is-on::before { color: var(--gold); }
.tour__part.is-on::after { opacity: 1; }
.tour__part:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* the phone: a dark titanium frame, its glass, the island; the film fills the glass under the island's strip */
.tour { grid-area: tour; align-self: center; position: relative; margin: 0; justify-self: center; --w: clamp(260px, 25vw, 340px); }
.tour::before { /* the warm light behind it */
  content: ""; position: absolute; inset: -18% -40%; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 42% at 50% 46%, rgba(230, 165, 59, .2), rgba(230, 165, 59, .06) 55%, transparent 72%);
}
.tour__phone {
  position: relative; inline-size: var(--w); aspect-ratio: 390 / 870; padding: calc(var(--w) * .03); border-radius: calc(var(--w) * .16);
  background: linear-gradient(145deg, #3a3631, #121110 38%, #0b0a09 62%, #2c2925);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 0 0 3px #050505, 0 50px 90px -30px rgba(0, 0, 0, .9), 0 22px 40px -22px rgba(0, 0, 0, .8);
}
.tour__glass { position: relative; block-size: 100%; border-radius: calc(var(--w) * .13); overflow: hidden; background: #000; display: flex; flex-direction: column; isolation: isolate; }
/* the strip the island sits in (the book's own bar starts under it, as on a real phone) */
.tour__status { flex: none; block-size: calc(var(--w) * .07); background: #0f0e0d; position: relative; }
.tour__island { position: absolute; left: 50%; top: 18%; translate: -50% 0; inline-size: 30%; block-size: 64%; border-radius: 999px; background: #000; }
.tour__screen { flex: 1; min-block-size: 0; inline-size: 100%; display: block; object-fit: cover; object-position: 50% 0; background: #161412; }
/* the glass catches a little light */
.tour__glass::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(115deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 32%); }

/* without motion: the film does not play by itself; its first picture, and a button that plays it */
.tour__play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2; display: none; place-items: center; inline-size: 64px; block-size: 64px; border: 0; border-radius: 50%; background: rgba(20, 19, 18, .72); box-shadow: inset 0 0 0 1.5px var(--gold); color: var(--gold); cursor: pointer; }
.tour__play svg { inline-size: 22px; block-size: 22px; fill: currentColor; margin-inline-end: -3px; }
.tour.is-still .tour__play { display: grid; }

@media (max-width: 900px) {
  .inside__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "text" "tour" "parts"; row-gap: 36px; }
  .tour { --w: min(74vw, 320px); }
  /* on a phone the parts are a row of chips under the phone */
  .tour__parts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-inline-size: none; margin-top: 0; }
  .tour__part { inline-size: auto; grid-template-columns: auto; padding: 9px 14px 11px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); }
  .tour__part::before, .tour__part span { display: none; }
  .tour__part b { font-size: 15px; }
  .tour__part::after { inset-inline: 14px; inset-block-end: 4px; }
}