/* The Doodle World tour (doodle-world.html), for grown-ups. Needs site.css and home.css (the screens, the tally,
   the compare columns, the price card and the promises are shared with the home page).
   Same look: paper, crayon fields, ink frames, Fredoka heads. Every picture is a real screen from Doodle World. */

.dwpage { --s-lead: clamp(1.15rem, 1.5vw, 1.45rem); }
.dw { display: block; }
.dw-lead { font-size: var(--s-lead); font-weight: 700; line-height: 1.35; max-width: 46ch; }
.dw p:not(.dw-lead) { font-weight: 600; max-width: 60ch; }
.dw-note { font-weight: 700; margin-top: var(--sp-3); }
.dw-go { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.dw-go .btn { margin: 0; }

/* ---------- What it is: words, then the map ---------- */
.dw-intro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-5); align-items: center; padding-block: var(--sp-5) var(--sp-6); }
.dw-intro__text { display: grid; gap: var(--sp-3); align-content: center; }
.dw-intro .display { font-size: clamp(2.6rem, 5.6vw, 5.2rem); }
.dw-map { display: grid; gap: var(--sp-2); }
.dw-map .screen { rotate: 0.8deg; }
.dw-map figcaption, .dw-split figcaption { font-family: var(--font-display); font-weight: 600; font-size: var(--s-small); }

/* ---------- Sections ---------- */
.dw-sec { position: relative; padding-block: var(--section); }
.dw-sec.field { padding-block: var(--section); }
.dw-sec + .dw-sec::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 16px; pointer-events: none; background: var(--rule, none) repeat-x 0 0 / 600px 16px; }
.dwpage { --rule: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='16' viewBox='0 0 600 16'%3E%3Cpath d='M0 8 C60 4 120 11 190 8 S310 4 390 9 S520 11 600 8' fill='none' stroke='%231a1a1a' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
.dw-sec__head { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-5); max-width: 62rem; }

/* ---------- The ten places ---------- */
.places { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr)); gap: var(--sp-5) var(--gutter); }
.place { display: grid; gap: 0.35rem; align-content: start; }
.place:nth-child(odd) .place__pic { rotate: -0.8deg; } .place:nth-child(even) .place__pic { rotate: 0.9deg; }
.place__pic { display: block; background: var(--sheet); overflow: clip; margin-bottom: var(--sp-1); }
.place__pic img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.place h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--s-lead); line-height: 1.15; }
.place p { font-size: var(--s-small); line-height: 1.4; }
.place .place__who { font-weight: 700; }

/* ---------- The residents ---------- */
.dw-friends { --c: var(--yellow); }
.cast { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-2); align-items: flex-end; }
.cast li { display: grid; justify-items: center; gap: 0.3rem; width: 6.4rem; text-align: center; font-weight: 800; font-size: var(--s-small); line-height: 1.15; }
.cast img { height: 7.5rem; width: auto; max-width: 100%; object-fit: contain; }

/* ---------- Games ---------- */
.games { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4) var(--gutter); }
.games li { display: grid; gap: 0.2rem; }
.games .screen { margin-bottom: var(--sp-1); }
.games li:nth-child(3n+1) .screen { rotate: -0.7deg; } .games li:nth-child(3n+3) .screen { rotate: 0.8deg; }
.games b { font-family: var(--font-display); font-weight: 600; font-size: var(--s-lead); line-height: 1.15; }
.games li > span:last-child { font-weight: 700; font-size: var(--s-small); }

/* ---------- Words beside a picture ---------- */
.dw-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-5); align-items: center; }
.dw-split__text { display: grid; gap: var(--sp-2); }
.dw-split--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.dw-split--flip .dw-split__text { order: 0; }
.dw-split .screen { rotate: -0.8deg; }
.dw-passport { justify-self: center; width: min(100%, 26rem); }
.dw-passport .screen { rotate: 1.4deg; }

/* ---------- It keeps growing ---------- */
.dw-grows { --c: var(--blue); }
.grows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.grows li { background: var(--sheet); border: var(--stroke) solid var(--ink); border-image: var(--ink-frame) 20 round; border-image-width: 20px; padding: var(--sp-3); }
.grows h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--s-lead); line-height: 1.2; margin-bottom: 0.4rem; }

/* ---------- For grown-ups ---------- */
.promises--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- Free or Club ---------- */
.dw-join { --c: var(--green); }
.dw-join__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--sp-4); align-items: start; }
.dw-join__text { grid-column: 1 / span 7; display: grid; gap: var(--sp-3); }
.dw-join .plans__price { grid-column: 9 / span 4; }
.dw-app .app { grid-template-columns: minmax(0, 1fr); padding: var(--sp-3) var(--sp-4); }
.dw-app .app__list { grid-column: 1; grid-row: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); font-size: var(--s-body); }
@media (max-width: 1099px) { .dw-app .app__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699px) { .dw-app .app__list { grid-template-columns: minmax(0, 1fr); } .dw-app .app { padding: var(--sp-2); } }
.dw-book { display: grid; gap: var(--sp-2); justify-items: start; }

/* ---------- Tablet ---------- */
@media (max-width: 1099px) {
  .dw-intro, .dw-split, .dw-split--flip { grid-template-columns: minmax(0, 1fr); }
  .games { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grows, .promises--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dw-join__text { grid-column: 1 / -1; }
  .dw-join .plans__price { grid-column: 1 / span 8; }
}

/* ---------- Phone ---------- */
@media (max-width: 699px) {
  .dw-intro { padding-block: var(--sp-3) var(--sp-5); gap: var(--sp-4); }
  .dw-go .btn { width: 100%; }
  .dw-sec__head { margin-bottom: var(--sp-4); }
  .games, .grows, .promises--wide { grid-template-columns: minmax(0, 1fr); }
  .cast { gap: var(--sp-2) var(--sp-1); }
  .cast li { width: calc((100% - 2 * var(--sp-1)) / 3); }
  .cast img { height: 5.6rem; }
  .dw-join .plans__price { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .dwpage .screen, .place__pic { rotate: none !important; } }