/* Tiny Planet Makers page — layout only.
   Colours, type, spacing, radii and components come from design-system/tokens.css and bundle.css. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.6; }
img, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; }
cite { font-style: italic; }
button { font: inherit; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.nowrap { white-space: nowrap; }
/* Phones: keep focused links and FAQ questions clear of the bottom booking bar (WCAG 2.4.11) */
@media (max-width: 699px) { html { scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } }

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding-left: max(var(--space-3), env(safe-area-inset-left, 0px)); padding-right: max(var(--space-3), env(safe-area-inset-right, 0px)); }
@media (min-width: 600px) { .wrap { padding-left: var(--space-5); padding-right: var(--space-5); } }

.wt-section { padding: var(--space-6) 0; }
@media (max-width: 599px) { .wt-section { padding: var(--space-5) 0; } }
.section-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 4.6vw, 44px); line-height: 1.05; margin-bottom: var(--space-3); }
.section-lead { max-width: 40rem; }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; display: inline-flex; align-items: center; min-height: 44px; background: var(--paper); color: var(--ink); padding: var(--space-2) var(--space-3); }
.skip-link:focus { left: var(--space-3); top: var(--space-3); outline: var(--stroke-focus) solid var(--focus); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--paper); color: var(--ink); box-shadow: 0 1px 0 rgba(31, 42, 85, .14); padding-top: env(safe-area-inset-top, 0px); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 60px; }
.site-header__logo { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink); text-decoration: none; font-family: var(--font-display); font-weight: 800; font-size: 20px; }
.site-header__logo img { width: 44px; height: auto; }
@media (min-width: 900px) {
  .site-header__inner { min-height: 72px; }
  .site-header__logo { font-size: 22px; gap: 10px; }
  .site-header__logo img { width: 54px; }
  html { scroll-padding-top: 88px; }
}
.site-header__logo:focus-visible { outline: var(--stroke-focus) solid var(--focus); outline-offset: 3px; border-radius: var(--radius-sm); }
.site-header__cta { min-height: 44px; padding: var(--space-2) var(--space-3); font-size: 14px; transition: opacity var(--wt-duration-base) var(--wt-ease-out); }
.site-header .wt-button:focus-visible { outline-color: var(--focus); }
.site-header__logo span, .site-header__cta { white-space: nowrap; }
.site-header__logo img { flex-shrink: 0; }
@media (max-width: 389px) { .site-header__cta-more { display: none; } }
@media (max-width: 399px) {
  .site-header__inner { gap: var(--space-2); }
  .site-header__logo { font-size: 18px; }
  .site-header__cta { padding-left: 12px; padding-right: 12px; letter-spacing: 0; }
  .book-bar { font-size: 14px; }
}
@media (max-width: 339px) { .site-header__logo span { display: none; } }
/* On phones the bottom bar takes over while it is on screen */
@media (max-width: 699px) { .bar-visible .site-header__cta { opacity: 0; pointer-events: none; visibility: hidden; } }

/* 1. First screen: a night sky. Every colour is a design-system token; the lighter and darker shades of the planets are mixed from the tokens with
   color-mix() (a browser without color-mix() gets the plain token colours instead).
   The stars and planets drift at different speeds as the banner scrolls away: main.js only sets --p on .sky (0.5 at the top of the page, 1 once the
   banner has gone) and the CSS moves each piece by its own --k. Without JavaScript, or with reduced motion, --p stays at 0.5 and nothing moves. */
.sky, .term { --lap: 40px; }
@media (min-width: 900px) { .sky, .term { --lap: 56px; } }
.sky { position: relative; overflow: hidden; overflow: clip; color: var(--paper); background: var(--night);
  --sky-glow: transparent; --sky-end: var(--night); --hi-lilac: var(--paper); --sh-orchid: var(--ink); --hi-aqua: var(--paper); --sh-violet: var(--orchid); --hi-teal: var(--paper); --crater: transparent; }
@supports (color: color-mix(in srgb, red, blue)) {
  .sky { --sky-glow: color-mix(in srgb, var(--wonder-blue) 55%, transparent); --sky-end: color-mix(in srgb, var(--night) 78%, var(--wonder-blue));
    --hi-lilac: color-mix(in srgb, var(--lilac) 45%, var(--paper)); --sh-orchid: color-mix(in srgb, var(--orchid) 62%, var(--ink));
    --hi-aqua: color-mix(in srgb, var(--aqua) 30%, var(--paper)); --sh-violet: color-mix(in srgb, var(--violet) 70%, var(--ink));
    --hi-teal: color-mix(in srgb, var(--aqua) 55%, var(--paper)); --crater: color-mix(in srgb, var(--sh-orchid) 38%, transparent); }
}
.sky { background: radial-gradient(70% 60% at 76% 22%, var(--sky-glow), transparent 70%), linear-gradient(180deg, var(--night), var(--sky-end)); }
.sky__stars { position: absolute; inset: -90px 0; transform: translate3d(0, calc((var(--p, .5) - .5) * var(--k) * 1px), 0); pointer-events: none; }
.sky__stars--a { --k: -30; background-size: 240px 180px; background-image: radial-gradient(1.5px 1.5px at 20px 30px, var(--paper) 98%, transparent), radial-gradient(1.5px 1.5px at 90px 80px, var(--paper) 98%, transparent), radial-gradient(1px 1px at 160px 20px, var(--paper) 98%, transparent), radial-gradient(2px 2px at 210px 120px, var(--paper) 98%, transparent), radial-gradient(1px 1px at 50px 150px, var(--paper) 98%, transparent); }
.sky__stars--b { --k: -70; background-size: 310px 260px; background-image: radial-gradient(2px 2px at 40px 60px, var(--lilac) 98%, transparent), radial-gradient(2px 2px at 200px 30px, var(--aqua) 98%, transparent), radial-gradient(1.5px 1.5px at 260px 190px, var(--paper) 98%, transparent), radial-gradient(2px 2px at 120px 220px, var(--violet) 98%, transparent); }
.sky__in { position: relative; z-index: 1; display: grid; gap: var(--space-2); align-items: center; padding-block: var(--space-3) calc(var(--lap) + var(--space-3)); }
.sky__copy { display: grid; gap: var(--space-2); justify-items: start; align-content: center; min-width: 0; }
.sky__eyebrow { font-family: var(--font-display); font-weight: 700; font-size: 13px; line-height: 1.3; letter-spacing: 1.2px; text-transform: uppercase; color: var(--aqua); }
.sky__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 6vw, 58px); line-height: 1.02; letter-spacing: -.5px; color: var(--paper); }
.sky__sub { font-size: 18px; line-height: 1.45; max-width: 30rem; color: var(--paper); }
.sky__art { position: relative; height: 172px; }
.pl { position: absolute; border-radius: 50%; transform: translate3d(0, calc((var(--p, .5) - .5) * var(--k) * 1px), 0); }
.pl--big { --k: -70; --s: min(30vw, 116px); width: var(--s); height: var(--s); left: 38%; top: 16%; background: radial-gradient(circle at 32% 28%, var(--hi-lilac) 0 7%, var(--lilac) 26%, var(--orchid) 78%, var(--sh-orchid) 100%); box-shadow: var(--glow-orchid-bright); }
.pl--big::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 62% 66%, var(--crater) 0 9%, transparent 10%), radial-gradient(circle at 28% 72%, var(--crater) 0 6%, transparent 7%), radial-gradient(circle at 68% 28%, var(--crater) 0 5%, transparent 6%); }
.pl__ring { position: absolute; left: -30%; right: -30%; top: 36%; bottom: 36%; border: 4px solid var(--aqua); border-radius: 50%; box-shadow: var(--glow-aqua); transform: rotate(calc(-18deg + (var(--p, .5) - .5) * 50deg)); }
.pl__orbit { position: absolute; inset: -36%; transform: rotate(calc(var(--p, .5) * 360deg + 40deg)); }
.pl__moon { position: absolute; top: 0; left: 50%; width: 15%; aspect-ratio: 1; margin-left: -7.5%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--paper) 0 12%, var(--hi-aqua) 40%, var(--aqua) 100%); box-shadow: var(--glow-aqua); }
.pl--aqua { --k: -130; width: 44px; height: 44px; left: 8%; top: 6%; background: radial-gradient(circle at 34% 30%, var(--hi-aqua) 0 10%, var(--aqua) 55%, var(--teal) 100%); box-shadow: var(--glow-aqua); }
.pl--violet { --k: -40; width: 64px; height: 64px; left: 5%; bottom: 4%; background: repeating-linear-gradient(172deg, var(--violet) 0 10px, var(--sh-violet) 10px 17px, var(--lilac) 17px 24px); box-shadow: var(--glow-orchid); }
.pl--teal { --k: -180; width: 26px; height: 26px; right: 6%; top: 8%; background: radial-gradient(circle at 34% 30%, var(--hi-teal) 0 12%, var(--teal) 60%, var(--deep-teal) 100%); box-shadow: var(--glow-aqua); }
.pl--orchid { --k: -90; width: 34px; height: 34px; right: 10%; bottom: 6%; background: radial-gradient(circle at 34% 30%, var(--hi-lilac) 0 10%, var(--orchid) 60%, var(--sh-orchid) 100%); box-shadow: var(--glow-orchid); }
@media (min-width: 900px) {
  /* The art height follows the window height (a short laptop screen gets a shorter sky), so the dates and the BOOK stub stay on the first screen.
     The planets are sized from it: at 340px tall the big planet is 250px, as before. */
  .sky__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); padding-block: var(--space-4) calc(var(--lap) + var(--space-4)); }
  .sky__art { --h: clamp(260px, 46vh, 340px); order: 2; height: var(--h); }
  .sky__sub { font-size: 20px; }
  .pl--big { --s: calc(var(--h) * .735); left: 30%; top: 14%; }
  .pl__ring { border-width: 5px; }
  .pl--aqua { width: calc(var(--h) * .224); height: calc(var(--h) * .224); left: 6%; top: 6%; }
  .pl--violet { width: calc(var(--h) * .353); height: calc(var(--h) * .353); left: 2%; bottom: 4%; }
  .pl--teal { width: calc(var(--h) * .13); height: calc(var(--h) * .13); }
  .pl--orchid { width: calc(var(--h) * .17); height: calc(var(--h) * .17); }
}

/* 2. This term: a ticket that overlaps the bottom edge of the sky, so the dates are on the first screen.
   Phone: the title and the fact lines (the bottom bar has the price and BOOK). Tablet: price and BOOK in a strip along the bottom of the ticket.
   Laptop: they become a tear-off stub on the right */
.term { display: flow-root; padding: 0 0 var(--space-5); background: var(--paper); }
@media (min-width: 900px) { .term { padding-bottom: var(--space-6); } }
.ticket { position: relative; z-index: 2; margin-top: calc(var(--lap) * -1); display: grid; gap: var(--space-3); background: var(--paper); border: var(--stroke-doodle) solid var(--ink); border-radius: var(--radius-md); padding: 28px var(--space-3) var(--space-3); }
.ticket__tag { position: absolute; top: -16px; left: var(--space-3); margin: 0; background: var(--ink); color: var(--paper); font-family: var(--font-display); font-weight: 700; font-size: 13px; line-height: 1; letter-spacing: 1.2px; text-transform: uppercase; padding: 9px 14px; border-radius: var(--radius-pill); }
.ticket__head { display: grid; gap: 6px; min-width: 0; }
.ticket__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 3.6vw, 36px); line-height: 1.08; color: var(--ink); }
.ticket__line { font-size: 16px; line-height: 1.45; max-width: 36rem; }
.ico { width: 22px; height: 22px; flex: none; color: var(--wonder-blue); }
.ico--star { width: 15px; height: 15px; color: var(--ink); }
.term__facts { list-style: none; padding: var(--space-3) 0 0; margin: 0; display: grid; gap: var(--space-3); border-top: 1px solid rgba(31, 42, 85, .14); }
.term__facts li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: 16px; line-height: 1.4; min-width: 0; }
.term__facts .ico { margin-top: 1px; }
.term__facts small { display: block; font-size: 14px; line-height: 1.4; color: #4a5582; margin-top: 2px; }
.ticket__buy { display: none; }
.term__cardRow { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.term__price { margin: 0; font-size: 16px; }
.term__price span { font-family: var(--font-display); font-weight: 800; font-size: 38px; line-height: 1; color: var(--wonder-blue); margin-right: 4px; }
.term__per { margin: 0; font-size: 15px; line-height: 1.4; color: #4a5582; text-wrap: balance; }
.ticket .wt-button:focus-visible { outline-color: var(--focus); }
@media (min-width: 700px) {
  .ticket { gap: var(--space-3) var(--space-4); padding: 32px var(--space-4) var(--space-4); }
  .ticket__tag { left: var(--space-4); }
  .term__facts { grid-template-columns: 1fr 1fr; gap: 12px var(--space-4); }
  .term__facts li { gap: 12px; font-size: 15px; }
  .term__facts .ico { width: 20px; height: 20px; }
  .term__priceFact, .term__phoneOnly { display: none !important; }
  .ticket__buy { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "row button" "per button"; align-items: center; gap: var(--space-1) var(--space-4); border-top: var(--stroke-doodle) dashed var(--ink); padding-top: var(--space-3); }
  .ticket__buy .term__cardRow { grid-area: row; justify-content: flex-start; gap: var(--space-3); }
  .ticket__buy .term__per { grid-area: per; }
  .ticket__buy .wt-button { grid-area: button; }
}
@media (min-width: 900px) {
  .ticket { grid-template-columns: minmax(0, 1fr) 17rem; grid-template-areas: "head buy" "facts buy"; align-items: start; padding: 36px var(--space-4) var(--space-4); }
  .ticket__head { grid-area: head; }
  .term__facts { grid-area: facts; }
  .ticket__buy { grid-area: buy; grid-template-columns: 1fr; grid-template-areas: "row" "per" "button"; align-content: center; align-self: stretch; gap: var(--space-2); border-top: 0; border-left: var(--stroke-doodle) dashed var(--ink); padding: 0 0 0 var(--space-4); }
  .ticket__buy .term__cardRow { justify-content: space-between; }
  .ticket__buy .wt-button { justify-self: stretch; }
}

/* Phones: two rows of photos you swipe sideways. Laptops: a mosaic. It sits under the studio text */
.gallery { position: relative; margin-top: var(--space-4); }
@media (min-width: 900px) { .gallery { margin-top: var(--space-5); } }
.gallery__track { list-style: none; display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: 46%; gap: var(--space-2); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(var(--space-3) * -1); padding: 0 var(--space-3); scroll-padding-inline: var(--space-3); }
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__slide { scroll-snap-align: start; position: relative; border-radius: var(--radius-md); overflow: hidden; background: var(--night); aspect-ratio: 1; }
.gallery__item { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: var(--lilac); cursor: zoom-in; position: relative; }
.gallery__item img, .gallery__video { width: 100%; height: 100%; object-fit: cover; }
.gallery__item:focus-visible { outline: var(--stroke-focus) solid var(--paper); outline-offset: -6px; }
/* Second ring so focus shows on light photos too */
.gallery__item:focus-visible::after { content: ""; position: absolute; inset: 9px; border: 3px solid var(--ink); border-radius: calc(var(--radius-md) - 9px); pointer-events: none; }
.gallery__more { display: none; }
/* Play button: centred on the photo. Hidden without JavaScript (the videos only start from this button) */
.gallery__playpause { display: none; position: absolute; top: 50%; left: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; padding: 0; border-radius: var(--radius-pill); border: 2px solid rgba(248, 253, 253, .85); background: rgba(16, 22, 58, .72); color: var(--paper); cursor: pointer; place-items: center; transition: background-color var(--wt-duration-fast, .15s); }
.has-js .gallery__playpause { display: grid; }
.gallery__playpause:hover { background: rgba(16, 22, 58, .88); }
.gallery__playpause .pp { width: 22px; height: 22px; fill: currentColor; }
.gallery__playpause .pp--pause { display: none; }
/* Playing: the button shrinks to a small pause button in the corner so it does not cover the film */
.gallery__slide.is-playing .gallery__playpause { top: auto; left: var(--space-2); bottom: var(--space-2); width: 44px; height: 44px; margin: 0; border-width: 0; }
.gallery__slide.is-playing .pp--play { display: none; }
.gallery__slide.is-playing .pp--pause { display: block; width: 18px; height: 18px; }
.gallery__playpause:focus-visible { outline: var(--stroke-focus) solid var(--paper); outline-offset: 2px; box-shadow: 0 0 0 5px var(--ink); }
/* Tablet: bleed the photos to the screen edge like on phones */
@media (min-width: 600px) and (max-width: 899px) {
  .gallery__track { grid-auto-columns: 32%; margin-inline: calc(var(--space-5) * -1); padding-inline: var(--space-5); scroll-padding-inline: var(--space-5); }
}
@media (min-width: 900px) {
  .gallery__track { grid-auto-flow: row; grid-template-columns: 1.6fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: var(--space-2); overflow: visible; margin: 0; padding: 0; height: 440px; }
  .gallery__slide { aspect-ratio: auto; border-radius: 0; min-height: 0; }
  .gallery__slide:nth-child(1) { grid-row: span 2; border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
  .gallery__slide:nth-child(3) { border-radius: 0 var(--radius-lg) 0 0; }
  .gallery__slide:nth-child(5) { border-radius: 0 0 var(--radius-lg) 0; }
  .gallery__extra { display: none; }
  .gallery__more { display: grid; place-items: center; position: absolute; inset: 0; background: rgba(16, 22, 58, .58); color: var(--paper); font-family: var(--font-display); font-weight: 800; font-size: 22px; }
  .gallery__item img { transition: transform var(--wt-duration-base) var(--wt-ease-out); }
  .gallery__item:hover img { transform: scale(1.03); }
}

.places-badge { font-family: var(--font-display); font-weight: 700; font-size: 14px; background: var(--lilac); color: var(--ink); border-radius: var(--radius-pill); padding: 2px var(--space-2); white-space: nowrap; }
.places-badge[data-level="full"] { background: var(--ink); color: var(--paper); }
.book__priceRow { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); }

/* 1b. The studio: a pale band under the first screen. "Wonder." and "Tinker." in blue bookend the formula, like the studio name */
.studio { background: rgba(62, 98, 218, .06); }
@media (max-width: 599px) { .studio { padding: var(--space-5) 0; } }
.studio__grid { display: grid; gap: var(--space-3); align-items: start; }
@media (min-width: 900px) { .studio__grid { grid-template-columns: 1fr 1.15fr; gap: var(--space-6); } }
.studio__title { margin-bottom: 0; }
.studio__bookend { color: var(--wonder-blue); }
.studio__text { display: grid; gap: var(--space-3); max-width: 40rem; }
.studio__beats { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.studio__beats li { background: var(--lilac); color: var(--ink); border-radius: var(--radius-pill); padding: 6px 14px; font-size: 15px; line-height: 1.35; }
.studio__beats strong { font-family: var(--font-display); font-weight: 700; }
/* The pale band already divides it from the course section, so no second line */
.studio + .weeks { border-top: 0; }

/* 2. Weeks */
.weeks { border-top: 1px solid rgba(31, 42, 85, .14); }
.weeks__next { margin-top: var(--space-4); max-width: 56rem; }
.weeks__question { font-family: var(--font-body); font-style: italic; font-size: clamp(20px, 2.4vw, 23px); line-height: 1.45; color: var(--wonder-blue); max-width: 34rem; margin-bottom: var(--space-4); }
.weeks .section-lead { margin-bottom: var(--space-3); }
.weeks__list { list-style: none; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 700px) { .weeks__list { grid-template-columns: 1fr 1fr; gap: var(--space-4); } }
@media (min-width: 1000px) { .weeks__list { grid-template-columns: repeat(4, 1fr); } }
.week { display: grid; grid-template-columns: 88px 1fr; gap: var(--space-3); align-items: start; align-content: start; }
@media (min-width: 1000px) { .week { grid-template-columns: 1fr; } }
.week__img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-md); border: var(--stroke-doodle) solid var(--ink); }
@media (min-width: 1000px) { .week__img { aspect-ratio: 4 / 3; } }
.week__when { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--deep-teal); }
.week__step { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.2; color: var(--wonder-blue); margin: 2px 0 4px; }
.worth { display: grid; gap: var(--space-4); margin-top: var(--space-5); padding: var(--space-4); background: var(--lilac); border-radius: var(--radius-lg) var(--radius-md) var(--radius-lg) var(--radius-md); }
@media (min-width: 700px) { .worth { grid-template-columns: 1fr 1fr; gap: var(--space-5); } }
.worth__group { display: grid; gap: var(--space-2); align-content: start; }
.worth__title { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.2; color: var(--ink); }
.bullet-list { list-style: none; padding: 0; display: grid; gap: var(--space-1); }
.bullet-list li { position: relative; padding-left: 22px; font-size: 16px; line-height: 1.45; }
.bullet-list li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 10px; height: 10px; border-radius: var(--radius-pill); background: var(--wonder-blue); }
/* A lilac stroke disappears on the lilac box: draw it in paper instead */
.worth .wt-highlight { white-space: nowrap; background-image: linear-gradient(transparent 45%, var(--paper) 45%, var(--paper) 92%, transparent 92%); }

/* 3. Reviews (glow) */
.reviews { padding: var(--space-6) 0; }
@media (max-width: 599px) { .reviews { padding: var(--space-5) 0; } }
.reviews__rating { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--paper); }
.reviews__rating svg { width: 90px; height: 18px; flex: none; color: var(--lilac); }
.reviews__lead { margin: 0 0 var(--space-4); max-width: 46rem; display: grid; gap: var(--space-2); }
.reviews__lead blockquote { margin: 0; font-family: var(--font-body); font-style: italic; font-size: clamp(21px, 2.6vw, 28px); line-height: 1.4; }
.reviews__lead figcaption { color: var(--lilac); font-weight: 700; font-size: 15px; }
.reviews__cards { list-style: none; display: flex; gap: var(--space-3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(var(--space-3) * -1); padding: 0 var(--space-3); scroll-padding-inline: var(--space-3); }
.reviews__cards::-webkit-scrollbar { display: none; }
.reviews__cards li { flex: 0 0 80%; scroll-snap-align: start; display: grid; gap: var(--space-2); align-content: start; padding-top: var(--space-3); border-top: var(--stroke-doodle) solid var(--orchid); }
.reviews__cards li:nth-child(even) { border-top-color: var(--aqua); }
.reviews__cards blockquote { margin: 0; }
.reviews__cards .small { color: var(--lilac); font-weight: 700; }
@media (min-width: 900px) { .reviews__cards { display: grid; grid-template-columns: repeat(4, 1fr); overflow: visible; margin: 0; padding: 0; } }
/* Below 900px the short reviews stack: most parents never swipe a hidden carousel */
@media (max-width: 899px) {
  .reviews__cards { display: grid; gap: var(--space-4); overflow: visible; margin: 0; padding: 0; }
  .reviews__cards li { flex: none; }
}
@media (min-width: 600px) and (max-width: 899px) { .reviews__cards { grid-template-columns: 1fr 1fr; } }
.reviews__cards blockquote { font-style: italic; }
.reviews__source { margin-top: var(--space-4); opacity: .95; }
/* Specks stay in the margins, never over text */
.reviews .wt-glow-specks i:nth-child(2) { top: 5%; }
.reviews .wt-glow-specks i:nth-child(5) { left: 1.5%; }
.reviews .wt-glow-specks i:nth-child(7) { top: 95%; }
@media (max-width: 899px) {
  .reviews .wt-glow-specks i:nth-child(1) { top: 12px; left: 8%; }
  .reviews .wt-glow-specks i:nth-child(3) { top: 22px; left: 58%; }
  .reviews .wt-glow-specks i:nth-child(6) { top: 10px; left: 80%; }
  .reviews .wt-glow-specks i:nth-child(11) { top: 28px; left: 30%; }
  .reviews .wt-glow-specks i:nth-child(2), .reviews .wt-glow-specks i:nth-child(8), .reviews .wt-glow-specks i:nth-child(9), .reviews .wt-glow-specks i:nth-child(12) { top: auto; }
  .reviews .wt-glow-specks i:nth-child(2) { bottom: 18px; left: 20%; }
  .reviews .wt-glow-specks i:nth-child(8) { bottom: 8px; left: 47%; }
  .reviews .wt-glow-specks i:nth-child(9) { bottom: 26px; left: 71%; }
  .reviews .wt-glow-specks i:nth-child(12) { bottom: 12px; left: 90%; }
  .reviews .wt-glow-specks i:nth-child(5) { top: 38%; left: 4px; }
  .reviews .wt-glow-specks i:nth-child(7) { top: 64%; left: 6px; }
  .reviews .wt-glow-specks i:nth-child(10) { top: 82%; left: 5px; }
  .reviews .wt-glow-specks i:nth-child(4) { top: 50%; left: auto; right: 5px; }
}

/* 4. Book */
.book__panel { background: var(--paper); border: var(--stroke-doodle) solid var(--ink); border-radius: var(--radius-lg); padding: var(--space-4); display: grid; gap: var(--space-5); }
@media (min-width: 900px) { .book__panel { grid-template-columns: 1fr 1.15fr; padding: var(--space-5); gap: var(--space-6); } }
.book__left { display: grid; gap: var(--space-3); align-content: start; justify-items: start; }
.book__priceRow { width: 100%; }
.book__price { font-size: 16px; line-height: 1.4; max-width: 22rem; }
.book__price span { display: block; font-family: var(--font-display); font-weight: 800; font-size: 48px; line-height: 1; color: var(--wonder-blue); }
.book__steps { padding: 0; list-style: none; counter-reset: step; display: grid; gap: var(--space-2); }
.book__steps li { counter-increment: step; position: relative; padding-left: 44px; min-height: 30px; padding-top: 2px; }
.book__steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: var(--radius-pill); background: var(--wonder-blue); color: var(--paper); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 16px; }
.book__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.book__actions[data-state="open"] .book__waitlist { display: none; }
.book__actions[data-state="sold-out"] .book__open { display: none; }
#book[data-state="sold-out"] .book__steps, #book[data-state="sold-out"] .book__assure { display: none; }
.book__assure { color: var(--deep-teal); }
.book__right { display: grid; gap: var(--space-4); align-content: start; }
.book__details { margin: 0; display: grid; }
.book__details div { display: grid; gap: 2px; padding: var(--space-3) 0; border-top: 2px dotted var(--line); }
.book__details div:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 600px) { .book__details div { grid-template-columns: 5.5rem 1fr; gap: var(--space-3); } }
.book__details dt { font-family: var(--font-display); font-weight: 700; color: var(--deep-teal); }
.book__details dd { margin: 0; }
.book__details .bullet-list li { font-size: inherit; line-height: 1.5; }
@media (min-width: 900px) { .book__priceRow { align-items: flex-start; } .book__priceRow .places-badge { margin-top: 11px; } }

/* 4. Teachers */
.teachers-section { padding: var(--space-5) 0; }
.teachers { display: grid; gap: var(--space-4); align-items: start; }
.teachers__photo { max-width: 360px; }
.teachers__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
@media (min-width: 700px) { .teachers { grid-template-columns: 240px 1fr; gap: var(--space-4); align-items: center; } }
@media (min-width: 1000px) { .teachers { grid-template-columns: 300px 1fr; gap: var(--space-5); } }
.teacher { padding: var(--space-3); border-radius: var(--radius-lg) var(--radius-md) var(--radius-lg) var(--radius-md); background: var(--success-soft); }
@media (min-width: 1000px) { .teacher { padding: var(--space-4); } }
/* Only if each teacher gets their own photo again (see the comment in the HTML) */
.teacher:has(> .teacher__photo) { display: grid; grid-template-columns: 112px 1fr; gap: var(--space-3); align-items: start; }
@media (min-width: 1000px) { .teacher:has(> .teacher__photo) { grid-template-columns: 160px 1fr; gap: var(--space-4); } }
.teacher__photo .wt-photo-frame__img { border-color: var(--success-soft); }
.teacher__photo.wt-photo-frame--missing .wt-photo-frame__img { font-size: 18px; line-height: 1.1; padding: var(--space-2); }
.teacher__text { display: grid; gap: var(--space-1); align-content: start; padding-top: var(--space-1); }
.teacher__role { font-size: 12px; color: var(--deep-teal); }
.teacher__name { font-family: var(--font-display); font-weight: 800; font-size: 24px; line-height: 1.1; color: var(--wonder-blue); }

/* 5. FAQ */
.faq__inner > * { max-width: 50rem; }
.faq details { border-top: var(--stroke-doodle) solid var(--lilac); }
.faq details:last-of-type { border-bottom: var(--stroke-doodle) solid var(--lilac); }
.faq summary { cursor: pointer; list-style: none; position: relative; padding: var(--space-3) var(--space-6) var(--space-3) 0; font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.35; color: var(--ink); min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
/* Plus and minus are drawn with two bars, not a font glyph, so they sit exactly in the centre of the circle in any font */
.faq summary::after { content: ""; position: absolute; right: var(--space-1); top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: var(--radius-pill);
  background: linear-gradient(var(--ink), var(--ink)) center / 14px 2px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 2px 14px no-repeat, var(--lilac); }
.faq details[open] summary::after { background: linear-gradient(var(--ink), var(--ink)) center / 14px 2px no-repeat, var(--violet); }
.faq summary:hover { color: var(--wonder-blue); }
.faq summary:focus-visible { outline: var(--stroke-focus) solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }
.faq details p { padding: 0 0 var(--space-4); max-width: 44rem; }
.faq__more { margin-top: var(--space-4); }

/* 6. A year of making: the same pale band as the studio block, so the page opens and closes on it */
.year { background: rgba(62, 98, 218, .06); }
.year__grid { display: grid; gap: var(--space-4); align-items: start; }
@media (min-width: 900px) { .year__grid { grid-template-columns: 1fr 1.2fr; gap: var(--space-4) var(--space-6); } }
.year__text { display: grid; gap: var(--space-2); }
.year__text .section-title { margin-bottom: var(--space-1); }
.year__list { gap: var(--space-2); }
.year__list li { font-size: 17px; }
.year__list strong { font-family: var(--font-display); font-weight: 700; }
.year__bridge { grid-column: 1 / -1; display: grid; gap: var(--space-2); justify-items: start; padding: var(--space-4); background: var(--paper); border: var(--stroke-doodle) solid var(--lilac); border-radius: var(--radius-lg) var(--radius-md) var(--radius-lg) var(--radius-md); }
.year__bridge[hidden] { display: none; }
.year__bridgeText { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.3; }
.year__bridge .small { order: 3; }
@media (min-width: 700px) {
  .year__bridge { grid-template-columns: 1fr auto; align-items: center; column-gap: var(--space-4); }
  .year__bridgeText { grid-column: 1; grid-row: 1; }
  .year__bridge .small { grid-column: 1; grid-row: 2; }
  .year__bridge .wt-button { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
}

/* 6. Footer */
.footer__grid { display: grid; gap: var(--space-5); }
.footer__grid > div:first-child { display: grid; gap: var(--space-3); justify-items: start; max-width: 36rem; }
.footer__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 3vw, 28px); line-height: 1.2; }
@media (min-width: 900px) { .footer__grid { grid-template-columns: 1.6fr 1fr; align-items: end; } }
.footer__studio { display: grid; gap: var(--space-2); justify-items: start; }
@media (min-width: 900px) { .footer__studio { justify-items: end; text-align: right; } }
.footer__studio img { width: 96px; height: auto; }
.footer__studio a { display: inline-block; padding-block: 6px; }
.footer__studio a[href^="mailto:"], .footer__studio a[href$="terms.html"] { padding-block: 12px; } /* 44px tall tap targets for the two one-line links */
@media (max-width: 699px) { .footer { padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px)); } }

/* Phone booking bar */
.book-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); background: var(--paper); color: var(--ink); border-top: var(--stroke-doodle) solid var(--wonder-blue); padding: var(--space-2) max(var(--space-3), env(safe-area-inset-right, 0px)) calc(var(--space-2) + env(safe-area-inset-bottom, 0px)) max(var(--space-3), env(safe-area-inset-left, 0px)); font-size: 15px; }
.book-bar[hidden] { display: none; }
.book-bar p { display: grid; gap: 0; line-height: 1.25; }
.bar__rating { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ink); }
.bar__rating .ico--star { width: 15px; height: 15px; }
.book-bar .wt-button { white-space: nowrap; }
.book-bar strong { font-family: var(--font-display); font-size: 20px; color: var(--wonder-blue); }
.book-bar .wt-button { min-height: 44px; padding: var(--space-2) var(--space-4); }
@media (min-width: 700px) { .book-bar { display: none !important; } }

/* Photo viewer */
.lightbox { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--night); color: var(--paper); overflow: hidden; }
.lightbox[open] { display: grid; grid-template-rows: auto 1fr; }
.lightbox::backdrop { background: var(--night); }
.lightbox__bar { display: flex; justify-content: space-between; align-items: center; padding: calc(var(--space-2) + env(safe-area-inset-top, 0px)) var(--space-3) var(--space-2); }
.lightbox__close { width: 44px; height: 44px; border-radius: var(--radius-pill); border: 0; background: var(--paper); color: var(--ink); font-size: 26px; line-height: 1; cursor: pointer; }
.lightbox__track { list-style: none; margin: 0; padding: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; min-height: 0; }
.lightbox__track::-webkit-scrollbar { display: none; }
.lightbox__track li { flex: 0 0 100%; scroll-snap-align: center; display: grid; place-items: center; padding: var(--space-2) var(--space-3) calc(var(--space-5) + env(safe-area-inset-bottom, 0px)); min-height: 0; }
.lightbox__track li { grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); }
.lightbox__track img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius-md); }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: var(--radius-pill); border: 0; background: var(--paper); color: var(--ink); font-size: 30px; line-height: 1; cursor: pointer; }
.lightbox__nav--prev { left: var(--space-3); }
.lightbox__nav--next { right: var(--space-3); }
@media (max-width: 699px) { .lightbox__nav { display: grid; place-items: center; top: auto; bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); transform: none; } }
@media (max-width: 699px) { .lightbox__track li { padding-bottom: calc(var(--space-7) + env(safe-area-inset-bottom, 0px)); } }
.lightbox button:focus-visible { outline: var(--stroke-focus) solid var(--aqua); outline-offset: 3px; }

/* Studio: two photos as a light touch; the full gallery lives in "From past workshops" */
.studio__photos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-top: var(--space-4); max-width: 40rem; }
.studio__photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-md); }
.studio__more { grid-column: 1 / -1; justify-self: start; padding-block: 10px; }
.workshops .gallery { margin-top: var(--space-3); }
@media (min-width: 1000px) { .worth { padding: var(--space-4) var(--space-5); } }
@media (min-width: 900px) { .studio__photos { max-width: none; gap: var(--space-3); } .studio__photos img { aspect-ratio: 16 / 9; } }