/* Shirbut: a sheet of drawing paper on a cool white table. Two crayons run the page:
   blue means go (actions, links), yellow means marked (a highlight, a chosen chip).
   Everything else is marker ink on paper. The base CSS is the finished, still frame. */

@font-face { font-family: 'Fredoka'; src: url('assets/fredoka.woff') format('woff'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Assistant'; src: url('assets/assistant.woff') format('woff'); font-weight: 400 700; font-display: swap; }

:root {
  --table: #f7f8fa;
  --sheet: #fdfdfc;
  --ink: #23253d;
  --ink-soft: #50546c;
  --rule: rgb(35 37 61 / 0.14);
  --rule-strong: rgb(35 37 61 / 0.32);
  --blue: #3550c8;
  --blue-deep: #283e9f;
  --blue-wash: #e9edfb;
  --yellow: #ffcd3c;
  --yellow-wash: #fff4cf;
  --whatsapp: #12833f;
  --whatsapp-deep: #0e6b33;
  --bubble: #dcf7d6;
  --panel: #eef0f5;
  --display: 'Fredoka', 'Assistant', system-ui, sans-serif;
  --body: 'Assistant', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter: 16px;
  --measure: 62ch;
  --radius: 24px;
  --shadow-sheet: 0 1px 2px rgb(35 37 61 / 0.06), 0 22px 44px -26px rgb(35 37 61 / 0.32);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--table);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1.0625rem, 0.95rem + 0.35vw, 1.1875rem);
  line-height: 1.6;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.12; margin: 0; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.75rem, 1.3rem + 2.2vw, 2.75rem); }
h3 { font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem); }
p { margin: 0; }
a { color: var(--blue); text-underline-offset: 0.2em; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* A transform, not a negative inset, so the RTL page never widens. */
.skip {
  position: fixed; inset-block-start: 8px; inset-inline-start: 8px; z-index: 30;
  padding: 10px 16px; border-radius: 999px; background: var(--ink); color: var(--sheet);
  font-weight: 700; text-decoration: none; transform: translateY(-160%);
}
.skip:focus-visible { transform: none; }

/* ---------- Masthead ---------- */
.masthead {
  position: relative; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 64px; padding: 8px var(--gutter);
  max-width: 1280px; margin-inline: auto;
}
.brand { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ink); text-decoration: none; }
.brand-mark { width: 36px; height: 36px; }
.brand-mark .line { fill: none; stroke: var(--ink); stroke-width: 3.4; stroke-linecap: round; }
.brand-word { font-family: var(--display); font-weight: 700; font-size: 1.6rem; line-height: 1; }
.masthead-tools { display: flex; align-items: center; gap: 8px; }
.lang, .menu-button {
  min-height: 44px; min-width: 44px; padding: 0 14px; border-radius: 999px;
  border: 1.5px solid var(--rule-strong); background: var(--sheet); cursor: pointer;
  font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.lang { font-family: var(--display); }
.menu-icon { width: 18px; height: 12px; position: relative; border-block: 2px solid currentColor; }
.menu-icon::after { content: ''; position: absolute; inset-inline: 0; top: 3px; border-top: 2px solid currentColor; }
.menu-button[aria-expanded='true'] .menu-icon { border-color: transparent; }
.menu-button[aria-expanded='true'] .menu-icon::before,
.menu-button[aria-expanded='true'] .menu-icon::after { content: ''; position: absolute; inset-inline: 0; top: 3px; border-top: 2px solid currentColor; }
.menu-button[aria-expanded='true'] .menu-icon::before { transform: rotate(45deg); }
.menu-button[aria-expanded='true'] .menu-icon::after { transform: rotate(-45deg); }

.nav { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.nav a {
  min-height: 44px; padding: 0 14px; display: inline-flex; align-items: center;
  border-radius: 999px; color: var(--ink); text-decoration: none; font-weight: 600;
}
.nav a.nav-signup { background: var(--blue); color: #fff; }

/* Phone: the destinations sit behind one disclosure, all shown at once, on an opaque sheet. */
@media (max-width: 899px) {
  .js .nav {
    position: absolute; inset-inline: var(--gutter); top: calc(100% - 4px);
    display: none; flex-direction: column; gap: 2px; padding: 10px;
    background: var(--sheet); border-radius: 20px; box-shadow: var(--shadow-sheet);
    border: 1px solid var(--rule);
  }
  .js .nav.is-open { display: flex; }
  .js .nav a { min-height: 52px; font-size: 1.125rem; }
  .js .nav a.nav-signup { justify-content: center; margin-top: 6px; }
}
@media (min-width: 900px) {
  .masthead { padding-inline: clamp(24px, 4vw, 48px); }
  .menu-button { display: none; }
  .nav { flex-wrap: nowrap; align-items: center; margin-inline-start: auto; }
}
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .nav a:not(.nav-signup):hover { background: var(--panel); }
}

/* ---------- Buttons and chips ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 22px; border-radius: 999px; border: 1.5px solid transparent;
  font-family: var(--display); font-weight: 600; font-size: 1.0625rem; line-height: 1.1;
  text-decoration: none; cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent;
}
.button .glyph { width: 22px; height: 22px; flex: none; }
.button img { width: 20px; height: 20px; flex: none; }
.button.primary { background: var(--blue); color: #fff; }
.button.whatsapp { background: var(--whatsapp); color: #fff; }
.button.quiet, .button.map, .button.social, .button.outline { background: var(--sheet); color: var(--ink); border-color: var(--rule-strong); }
.button.outline { color: var(--blue-deep); border-color: var(--blue); }
.button.icon-only { width: 52px; padding: 0; }
.button.wide { width: 100%; }
@media (hover: hover) and (pointer: fine) {
  .button.primary:hover { background: var(--blue-deep); }
  .button.whatsapp:hover { background: var(--whatsapp-deep); }
  .button.quiet:hover, .button.map:hover, .button.social:hover { border-color: var(--ink); }
  .button.outline:hover { background: var(--blue-wash); }
}

.chips { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips legend, .class-pick legend { font-family: var(--display); font-weight: 600; font-size: 1.0625rem; padding: 0; margin-bottom: 10px; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 16px;
  border-radius: 999px; border: 1.5px solid var(--rule-strong); background: var(--sheet); font-weight: 600;
  pointer-events: none;
}
.chip input:checked + span { background: var(--yellow); border-color: var(--ink); }
.chip input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .chip input:not(:checked):hover + span { border-color: var(--ink); } }

.contact-note {
  margin-top: 12px; padding: 12px 16px; border-radius: 16px; max-width: 44ch;
  background: var(--yellow-wash); border: 1.5px dashed rgb(35 37 61 / 0.35); color: var(--ink); font-size: 1rem;
}

/* ---------- Layout ---------- */
main > section { max-width: 1280px; margin-inline: auto; padding: clamp(72px, 10vw, 136px) var(--gutter) 0; }
@media (min-width: 900px) { main > section { padding-inline: clamp(24px, 4vw, 48px); } }
.section-lead { margin-top: 14px; max-width: var(--measure); color: var(--ink-soft); }
.fine { margin-top: 20px; color: var(--ink-soft); font-size: 1rem; }

/* ---------- Hero and the showpiece ---------- */
.hero { padding-top: 8px !important; }
.hero-copy { padding-block: 8px 28px; }
.hero h1 { font-size: clamp(2.125rem, 1.4rem + 3vw, 3.5rem); line-height: 1.1; max-width: 16ch; }
.marked { position: relative; display: inline-block; isolation: isolate; }
.marked .mark { position: absolute; z-index: -1; inset-inline-start: -0.1em; bottom: 0.04em; width: calc(100% + 0.2em); max-width: none; height: 0.56em; }
.highlight { fill: none; stroke: var(--yellow); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.lead { margin-top: 16px; max-width: 34ch; font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem); color: var(--ink-soft); }
.hero-actions { margin-top: 24px; }
.action-row { display: flex; flex-wrap: wrap; gap: 10px; }
.action-row .button.primary { flex: 1 1 auto; }
/* Phone: the class picker gets its own row; WhatsApp and the call sit together under it, in both languages. */
@media (max-width: 599px) {
  .action-row .button.primary { flex-basis: 100%; }
  .action-row .button.whatsapp { flex: 1 1 auto; }
}

.sheet {
  margin: 0; background: var(--sheet); border-radius: var(--radius); box-shadow: var(--shadow-sheet);
  padding: 12px 12px 18px; display: flex; flex-direction: column; gap: 14px;
}
.drawing { width: 100%; height: auto; }
.drawing .speck { fill: var(--sheet); }
.drawing .line { fill: none; stroke: var(--ink); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.drawing .line.fine { stroke-width: 2.4; }
.drawing .dot { fill: var(--ink); }
.drawing .scribble { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sheet figcaption { display: grid; gap: 12px; padding-inline: 6px; }
.sheet-caption { color: var(--ink-soft); font-size: 1rem; }
.crayons { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; align-items: start; }
.crayons li { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; }
.crayon { grid-row: span 2; width: 16px; height: 44px; }
.crayon-tip, .crayon-body { fill: var(--crayon); }
.crayon-band { stroke: rgb(35 37 61 / 0.3); stroke-width: 1.4; fill: none; }
.crayon-name { font-family: var(--display); font-weight: 600; font-size: 1rem; line-height: 1.2; }
.crayon-for { font-size: 1rem; line-height: 1.25; color: var(--ink-soft); }
.crayons li.is-active .crayon-name { text-decoration: underline 3px var(--yellow); text-underline-offset: 4px; }

/* Phone and tablet: the sheet pins centred, like a page on the table, for under half a
   viewport. A spacer inside the stage gives the pin its room (padding would not: sticky
   moves only within the content box). */
@media (max-width: 899px) {
  .stage { margin-inline: calc(var(--gutter) * -0.5); }
  .stage::after { content: ''; display: block; height: 42svh; }
  .sheet { position: sticky; top: max(10px, calc((100svh - (100vw - 40px) * 1.1667 - 210px) / 2)); }
  .drawing { max-width: min(100%, calc((100svh - 240px) * 360 / 420)); margin-inline: auto; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .sheet { padding: 24px 28px 28px; top: max(10px, calc((100svh - 980px) / 2)); }
  .crayons { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .crayons li { grid-template-columns: 1fr; justify-items: center; text-align: center; row-gap: 4px; }
  .crayon { grid-row: auto; }
}

.hour { padding-top: clamp(64px, 9vw, 120px); }
.hour-steps { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 28px; counter-reset: step; }
.hour-steps li { display: grid; gap: 6px; padding-inline-start: 56px; position: relative; max-width: 46ch; }
.hour-steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; inset-inline-start: 0; top: -2px; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--display); font-weight: 600; font-size: 1.125rem;
  background: var(--yellow); color: var(--ink);
}
.hour-steps p { color: var(--ink-soft); }

/* Desktop: copy on one side, the sheet pinned on the other for under one viewport
   while the hour in the studio passes beside it. */
@media (min-width: 900px) {
  .hero {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(32px, 5vw, 88px);
    grid-template-areas: 'copy stage' 'hour stage'; align-items: start;
  }
  .hero-copy { grid-area: copy; min-height: calc(100svh - 96px); display: flex; flex-direction: column; justify-content: center; padding-block: 24px 64px; }
  .stage { grid-area: stage; align-self: stretch; padding-block: 8px 0; }
  .sheet { position: sticky; top: 80px; padding: 20px 22px 24px; }
  .drawing { width: min(100%, calc((100svh - 340px) * 360 / 420)); margin-inline: auto; }
  .crayons { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .crayons li { grid-template-columns: 1fr; justify-items: center; text-align: center; row-gap: 4px; }
  .crayon { grid-row: auto; }
  .hour { grid-area: hour; padding-block: 6vh 14vh; }
  .hour-steps { gap: 12vh; }
}

/* ---------- Classes: four doodled disciplines, staggered like pinned notes ---------- */
.disciplines { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 36px; }
.disciplines li { display: grid; grid-template-columns: 64px 1fr; column-gap: 18px; row-gap: 4px; align-items: start; }
.disciplines .doodle { grid-row: span 2; width: 64px; height: 64px; }
.disciplines p { color: var(--ink-soft); max-width: 40ch; }
.doodle .line { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.doodle .line.fine { stroke-width: 2.2; }
.doodle .dot { fill: var(--ink); }
@media (min-width: 900px) {
  .disciplines { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(40px, 6vw, 96px); row-gap: 56px; max-width: 1040px; }
  .disciplines li:nth-child(even) { transform: translateY(48px); }
  .disciplines .doodle { width: 80px; height: 80px; }
  .disciplines li { grid-template-columns: 80px 1fr; }
  .classes .fine { margin-top: 80px; }
}

/* ---------- Timetable ---------- */
.filters { margin-top: 32px; display: grid; gap: 22px; }
@media (min-width: 900px) { .filters { grid-template-columns: auto auto; justify-content: start; column-gap: 48px; } }
.schedule-count { margin-top: 26px; font-family: var(--display); font-weight: 600; color: var(--ink-soft); }
.timetable { margin-top: 14px; display: grid; gap: 28px; }
.day h3 { font-size: 1.125rem; padding-bottom: 8px; border-bottom: 2px solid var(--ink); }
.slots { list-style: none; margin: 0; padding: 0; }
.slot {
  display: grid; grid-template-columns: 6.4em minmax(0, 1fr) auto; grid-template-areas: 'time name choose' 'time group choose';
  column-gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--rule);
}
.slot-time { grid-area: time; align-self: start; padding-top: 1px; font-family: var(--display); font-weight: 600; direction: ltr; unicode-bidi: isolate; justify-self: start; }
.slot-name { grid-area: name; font-weight: 700; font-size: 1.0625rem; }
.slot-group { grid-area: group; color: var(--ink-soft); font-size: 1rem; }
.slot-choose { grid-area: choose; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--blue); background: var(--sheet); color: var(--blue-deep); font-family: var(--display); font-weight: 600; cursor: pointer; }
.slot.is-chosen .slot-choose { background: var(--blue); color: #fff; }
.timetable-empty { padding: 24px; border-radius: var(--radius); background: var(--panel); }
@media (min-width: 900px) {
  .timetable { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); column-gap: 28px; }
  .timetable.single { grid-template-columns: minmax(0, 520px); }
  .slot { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'time time' 'name name' 'group choose'; row-gap: 2px; }
  .slot-time { padding-top: 0; }
}

/* ---------- Sign up: the copy, and the composer in a two-layer shell ---------- */
.signup { display: grid; gap: 32px; }
.signup-copy .fine { max-width: 44ch; }
.composer-shell { padding: 8px; border-radius: 34px; background: var(--panel); border: 1px solid var(--rule); }
.composer { display: grid; gap: 28px; padding: 22px 18px; border-radius: 26px; background: var(--sheet); box-shadow: inset 0 1px 0 #fff; }
.ages .chip span { min-width: 52px; font-family: var(--display); font-size: 1.125rem; }
.hint { color: var(--ink-soft); font-size: 1rem; }
.class-pick { border: 0; padding: 0; margin: 0; min-width: 0; }
.class-options { display: grid; gap: 8px; }
.class-options:not(:empty) { margin-top: 2px; }
.option { position: relative; display: block; }
.option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.option > span { display: block; padding: 12px 16px; border-radius: 18px; border: 1.5px solid var(--rule-strong); pointer-events: none; }
.option input:checked + span { background: var(--yellow); border-color: var(--ink); }
.option input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
.option .when { display: block; font-family: var(--display); font-weight: 600; }
.preview { display: grid; gap: 8px; }
.preview-label { font-family: var(--display); font-weight: 600; }
.bubble {
  position: relative; padding: 14px 16px 16px; border-radius: 18px; border-start-start-radius: 4px;
  background: var(--bubble); color: #16301c; max-width: 46ch; box-shadow: 0 1px 1px rgb(22 48 28 / 0.12);
}
@media (min-width: 900px) {
  .signup { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); column-gap: clamp(40px, 6vw, 96px); align-items: start; }
  .signup-copy { position: sticky; top: 32px; }
  .composer { padding: 32px 32px 30px; }
}

/* ---------- Workshops: two tinted blocks ---------- */
.workshops h2 { max-width: 20ch; }
.workshop-pair { margin-top: 36px; display: grid; gap: 16px; }
.workshop { display: grid; gap: 12px; align-content: start; justify-items: start; padding: 28px 22px; border-radius: var(--radius); }
.workshop.holiday { background: var(--yellow-wash); }
.workshop.birthday { background: var(--blue-wash); }
.workshop .doodle { width: 72px; height: 72px; }
.workshop p { max-width: 42ch; }
.workshop .button { margin-top: 8px; white-space: normal; text-align: center; }
@media (min-width: 900px) {
  .workshop-pair { grid-template-columns: 1.15fr 1fr; gap: 20px; align-items: start; }
  .workshop { padding: 44px 40px; }
  .workshop.birthday { margin-top: 64px; }
}

/* ---------- The wall ---------- */
.artworks { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 14px; }
.artworks figure { margin: 0; display: grid; gap: 10px; }
.artwork { width: 100%; height: auto; aspect-ratio: 200 / 240; background: var(--sheet); border-radius: 6px; box-shadow: var(--shadow-sheet); }
.artwork .speck { fill: var(--sheet); }
.artworks figcaption { font-size: 1rem; line-height: 1.35; color: var(--ink-soft); }
@media (min-width: 900px) {
  .artworks { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px clamp(28px, 4vw, 56px); max-width: 1040px; }
  .artworks li:nth-child(3n + 1) .artwork { transform: rotate(-1.4deg); }
  .artworks li:nth-child(3n + 2) { margin-top: 40px; }
  .artworks li:nth-child(3n + 2) .artwork { transform: rotate(0.9deg); }
  .artworks li:nth-child(3n) .artwork { transform: rotate(-0.6deg); }
}

/* ---------- Questions ---------- */
.questions { margin-top: 32px; max-width: 760px; border-top: 2px solid var(--ink); }
.questions details { border-bottom: 1px solid var(--rule); }
.questions summary {
  list-style: none; cursor: pointer; min-height: 60px; padding: 16px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-family: var(--display); font-weight: 600; font-size: 1.1875rem;
}
.questions summary::-webkit-details-marker { display: none; }
.questions summary::after {
  content: ''; flex: none; width: 28px; height: 28px; border-radius: 50%; background:
    linear-gradient(var(--ink), var(--ink)) center / 12px 2px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 2px 12px no-repeat, var(--panel);
}
.questions details[open] summary::after { transform: rotate(45deg); background-color: var(--yellow); }
.questions details p { padding: 0 0 20px; max-width: var(--measure); color: var(--ink-soft); }

/* ---------- Visit ---------- */
.hours { margin-top: 22px; font-family: var(--display); font-weight: 600; font-size: 1.1875rem; }
.address { margin-top: 10px; font-style: normal; }
.visit-controls { margin-top: 26px; display: grid; gap: 12px; max-width: 760px; }
.visit-group { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.visit-group .button { padding-inline: 14px; }
/* Phone: the three map apps sit side by side as tiles, mark over name, so all three are one glance. */
.visit-group.maps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.visit-group.maps .button { flex-direction: column; gap: 6px; min-height: 80px; padding: 10px 6px; border-radius: 22px; white-space: normal; text-align: center; }
.visit-group.maps .button img { width: 24px; height: 24px; }
@media (min-width: 600px) {
  .visit-group, .visit-group.maps { grid-template-columns: repeat(auto-fit, minmax(176px, max-content)); }
  .visit-group.maps .button { flex-direction: row; min-height: 52px; border-radius: 999px; padding-inline: 20px; }
  .visit-group.maps .button img { width: 20px; height: 20px; }
}

/* ---------- Footer ---------- */
.footer {
  max-width: 1280px; margin: clamp(80px, 10vw, 140px) auto 0; padding: 28px var(--gutter) 40px;
  border-top: 1px solid var(--rule); display: grid; gap: 14px; color: var(--ink-soft); font-size: 1rem;
}
.footer p { max-width: 70ch; }
.footer a { justify-self: start; min-height: 44px; display: inline-flex; align-items: center; }
@media (min-width: 900px) {
  .visit { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(40px, 6vw, 96px); grid-template-areas: 'title controls' 'lead controls' 'hours controls' 'address controls' '. controls'; align-items: start; }
  .visit h2 { grid-area: title; }
  .visit .section-lead { grid-area: lead; }
  .visit .hours { grid-area: hours; }
  .visit .address { grid-area: address; }
  .visit-controls { grid-area: controls; margin-top: 8px; }
}
@media (min-width: 900px) { .footer { padding-inline: clamp(24px, 4vw, 48px); grid-template-columns: 1fr auto; align-items: center; } }

/* ---------- Motion: only with no-preference. The still frame above stands on its own. ----------
   The showpiece's state (how much is coloured, which crayon is lifted) is written by
   colouring.mjs from scroll position. What sways or twinkles runs on its own clock here,
   switched on by .is-alive once its area is coloured; scroll never scrubs it. */
@media (prefers-reduced-motion: no-preference) {
  .pre-colour .drawing .scribble { opacity: 0; }

  /* A pendulum: fastest through the middle, resting at each end. Sine curves from easings.net. */
  @keyframes pendulum {
    0% { transform: rotate(0deg); animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1); }
    25% { transform: rotate(var(--swing)); animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
    75% { transform: rotate(calc(var(--swing) * -1)); animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0); }
    100% { transform: rotate(0deg); }
  }
  .drawing .balloon, .drawing .sun-rays { transform-box: view-box; }
  .drawing .balloon { transform-origin: 352px 262px; --swing: 2.6deg; }
  .drawing .sun-rays { transform-origin: 66px 70px; --swing: 5deg; }
  .drawing .balloon.is-alive { animation: pendulum 3.4s infinite; }
  .drawing .sun-rays.is-alive { animation: pendulum 6s infinite; }

  /* Press feedback on everything pressable. */
  .button, .lang, .menu-button, .slot-choose, .chip span, .option > span { transition: transform 140ms var(--ease-out); }
  .button:active, .lang:active, .menu-button:active, .slot-choose:active,
  .chip:active span, .option:active > span { transform: scale(0.97); }

  /* Notes and the phone menu arrive instead of appearing. */
  .contact-note { transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
  @starting-style { .contact-note { opacity: 0; transform: translateY(-4px); } }
  .js .nav { transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out); }
  @starting-style { .js .nav.is-open { opacity: 0; transform: translateY(-6px) scale(0.97); } }
  [dir='rtl'] .nav { transform-origin: top left; }
  [dir='ltr'] .nav { transform-origin: top right; }

  /* A question opens to its answer. */
  .questions summary::after { transition: transform 200ms var(--ease-out); }
  @keyframes answer-in { from { opacity: 0; transform: translateY(-4px); } }
  .questions details[open] p { animation: answer-in 220ms var(--ease-out); }
}

/* Reduced motion: no pin (nothing scrubs, so nothing needs holding), no movement, but a note
   or an answer still fades in rather than snapping. */
@media (prefers-reduced-motion: reduce) {
  .sheet { position: static; }
  .stage::after { display: none; }
  @keyframes fade-in { from { opacity: 0; } }
  .contact-note:not([hidden]), .questions details[open] p { animation: fade-in 160ms ease; }
}