:root {
  color-scheme: light;
  --paper: #f8f4ec;
  --ink: #383d34;
  --sage: #52614b;
  --sage-dark: #3f4e39;
  --sage-wash: #e9ece2;
  --rose: #e8d4cc;
  --rose-wash: #f0e5de;
  --ochre: #b8975f;
  --muted: #65675c;
  --line: #d8d9cb;
  --serif: Georgia, "Times New Roman", serif;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
body { margin: 0; font-size: 1rem; line-height: 1.7; overflow-wrap: anywhere; }
a { color: inherit; text-underline-offset: 0.2em; }
p { margin: 0 0 1rem; }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
[id] { scroll-margin-top: 1.5rem; }
.page-width, .site-header { width: min(100% - 2.5rem, 74rem); margin-inline: auto; }
.section { padding-block: 4.5rem; }

.site-header { padding-block: 1.5rem; border-bottom: 1px solid var(--line); }
.signature { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; max-width: 100%; font-family: var(--serif); font-size: 1.5rem; line-height: 1.3; text-decoration: none; }
.signature > span { min-width: 0; }
.signature small { display: block; margin-top: 0.35rem; font-family: Arial, Helvetica, sans-serif; font-size: 0.8125rem; color: var(--muted); }
.brand-mark { width: 3.5rem; height: 3.5rem; flex: none; object-fit: contain; }
.main-nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.1rem; margin-top: 1rem; }
.main-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.8125rem; text-decoration: none; }
.main-nav a:hover { text-decoration: underline; }
.main-nav .nav-appointment { color: var(--sage-dark); font-weight: 700; gap: 0.45rem; }

.welcome { display: grid; gap: 2.5rem; padding-block: 2.75rem 3.5rem; }
.introduction { align-self: center; }
.eyebrow { margin: 0 0 1.5rem; color: var(--sage); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.eyebrow::before { content: ""; display: block; width: 2.5rem; height: 3px; margin-bottom: 1.25rem; background: var(--ochre); }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; }
h1 { max-width: 12ch; margin: 0; font-size: clamp(2.6rem, 5.2vw, 4.65rem); line-height: 1.08; letter-spacing: -0.045em; }
h2 { margin: 0 0 1.5rem; font-size: clamp(2rem, 3.8vw, 3.5rem); line-height: 1.13; letter-spacing: -0.035em; }
h3 { margin: 0 0 0.8rem; font-size: 1.55rem; line-height: 1.25; letter-spacing: -0.02em; }
h1 em, h2 em { color: var(--sage); }
h1 em { text-decoration: underline; text-decoration-color: var(--rose); text-decoration-thickness: 0.1em; text-underline-offset: 0.12em; }
.presentation { max-width: 38ch; margin: 1.75rem 0; font-size: 1.0625rem; }
.appointment { display: inline-flex; align-items: center; justify-content: center; gap: 1rem; max-width: 100%; min-height: 48px; padding: 0.85rem 1.25rem; border: 1px solid var(--sage); border-radius: 0.25rem; color: #fff; background: var(--sage); font-size: 0.9375rem; font-weight: 700; text-decoration: none; }
.appointment:hover { background: var(--sage-dark); text-decoration: underline; }
.appointment-note { margin: 0.65rem 0 0; color: var(--muted); font-size: 0.8125rem; }
.text-link { display: inline-flex; align-items: center; gap: 0.7rem; min-height: 44px; color: var(--sage-dark); font-size: 0.875rem; text-decoration: underline; }
.discover-link { margin-top: 1.25rem; }
.portrait-frame { width: 100%; max-width: 30rem; justify-self: center; }
.portrait { width: 100%; border: 1px solid var(--line); border-radius: 0.3rem; }
.portrait-frame figcaption { margin-top: 0.75rem; text-align: center; color: var(--muted); font-family: var(--serif); font-size: 0.9375rem; font-style: italic; }

/* The original portrait is also the complete, responsive fallback without JavaScript. */
.notebook-track { min-width: 0; width: 100%; }
.notebook-figure { margin-inline: auto; max-width: min(30rem, calc((100svh - 6rem) * 1122 / 1402)); }
.notebook-scene { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 0.3rem; }
.notebook-scene .portrait { border: 0; border-radius: 0; }
.notebook-static-drawing { position: absolute; left: 13.636%; top: 29.957%; width: 44.563%; pointer-events: none; }
.notebook-world { display: none; position: absolute; left: 0; top: 0; width: 1122px; height: 1402px; transform: scale(var(--scene-scale)); transform-origin: 0 0; pointer-events: none; }
.notebook-world img { max-width: none; user-select: none; }
.notebook-active .notebook-world { display: block; }
.notebook-active .notebook-static-drawing { visibility: hidden; }
.notebook-world .table-patch, .notebook-world .mug-foreground { position: absolute; inset: 0; width: 1122px; height: 1402px; }
/* Only the original book footprint is patched; the face, hands and room never change. */
.notebook-world .table-patch { clip-path: polygon(36% 82.9%, 44.6% 80.6%, 49% 79.7%, 54.4% 79.6%, 59.5% 80.1%, 64% 79.9%, 70% 80.5%, 80.4% 81.9%, 82% 83%, 78.1% 88.2%, 54.4% 86.7%, 35.8% 85.9%); }
.notebook-world .book-shadow, .notebook-world .right-pages, .notebook-world .cover { position: absolute; left: 0; top: 0; width: 220px; height: 230px; transform-origin: 0 0; }
.notebook-world .book-shadow { background: #665b33; opacity: 0.13; filter: blur(6px); }
.notebook-world .right-pages { border: 2px solid #778363; border-radius: 4px 6px 7px 1px; box-shadow: 0 6px 0 #f0e3cc, 0 9px 0 #7b856b, 0 11px 4px #55492e30; }
.notebook-world .page-surface { background: linear-gradient(90deg, #b6a58a45, transparent 15%), repeating-linear-gradient(0deg, transparent 0 17px, #c4bdaa50 17px 18px), #f6f0df; }
.notebook-world .texture-window { position: absolute; left: 411px; top: 1124px; width: 511px; height: 114px; overflow: hidden; clip-path: polygon(54.2% 9.6%, 99.2% 28.9%, 83.6% 90.3%, 38.5% 71.1%); opacity: 0.72; }
.notebook-world .texture-window img { position: absolute; width: 605.88px; height: 757.08px; left: -57.24px; top: -574.56px; }
.notebook-world .cover { border-radius: 3px 6px 6px 2px; }
.notebook-world .cover-outer, .notebook-world .cover-inner { position: absolute; inset: 0; border: 2px solid #747d5a; border-radius: inherit; box-shadow: 0 3px 0 #e9dec5, 0 6px 0 #798162; }
.notebook-world .cover-outer { background: radial-gradient(ellipse at 20% 30%, #c9cdb85c, transparent 40%), repeating-linear-gradient(71deg, #838d6b14 0 1px, transparent 1px 5px), #929b79; }
.notebook-world .cover-outer::before { content: ''; position: absolute; inset: 9px; border: 1px solid #d2d6bd75; border-radius: 1px; }
.notebook-world .cover-outer::after { content: ''; position: absolute; left: 9px; top: 0; bottom: 0; border-left: 2px solid #6b74524d; }
.notebook-world .cover-inner { visibility: hidden; border-color: #8f9579; background-color: #f8f2e4; box-shadow: 0 2px 0 #e7dcc4, 0 5px 0 #788363; }
.notebook-world .cover.is-inside .cover-inner { visibility: visible; }
.notebook-world .cover.is-inside .cover-outer { visibility: hidden; }
.notebook-world .mug-foreground { clip-path: polygon(25.4% 76.3%, 29% 75.9%, 35.8% 76.2%, 37.6% 77.1%, 39.5% 77%, 39.6% 79.3%, 38.7% 81.4%, 36.8% 82.8%, 36.1% 85.1%, 34.2% 86.7%, 28.7% 86.9%, 26.1% 85.5%); }
.notebook-world .drawing { position: absolute; left: 153px; top: 420px; width: 500px; height: 750px; object-fit: contain; }

.motion-chapter { display: grid; gap: 3rem; }
.motion-copy, .motion-track { min-width: 0; }
.motion-track { align-self: start; }
.motion-figure { max-width: 34rem; margin-inline: auto; }
.motion-figure figcaption { margin-top: 1rem; color: var(--muted); font-family: var(--serif); font-style: italic; font-size: 0.875rem; text-align: center; }
.motion-art { position: relative; width: 100%; max-width: calc((100svh - 8rem) * 560 / 460); margin-inline: auto; aspect-ratio: 560 / 460; isolation: isolate; }
.imagination-art { aspect-ratio: 720 / 1280; max-width: min(28rem, calc((100svh - 12rem) * 720 / 1280)); }
.imagination-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.imagination-muted { opacity: 0; filter: grayscale(1); }
.imagination-muted, .imagination-art .colour-copy .imagination-colour { mask-image: linear-gradient(to bottom, #000 40%, transparent 46%); }
.exploration-drawing { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.draw-line { fill: none; stroke: #8c947b; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.reveal { opacity: 1; }
.paper-wash { position: absolute; inset: 10% 11% 22%; border-radius: 50%; background: radial-gradient(ellipse at 50% 75%, #e8dcc94d, transparent 67%); }
.exploration-stem { stroke: #8a907a; }
.leaves path { fill-opacity: 0.55; stroke: #8d957c; stroke-opacity: 0.28; stroke-width: 1; }
.leaves path:not([fill]) { fill: none; stroke-opacity: 0.46; }
.listening-loop { stroke: #b19686; stroke-width: 1.1; }
.notebook-window { position: absolute; width: 87.5%; height: 23.91%; left: 5.7%; top: 70.65%; overflow: hidden; }
.notebook-window img { position: absolute; width: 119.07%; height: auto; max-width: none; left: -11.25%; top: -503.1%; }
.colour-copy, .colour-hint { display: none; }

@media screen and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .colour-ready .colour-hint { display: block; margin-top: 0.4rem; font: 0.75rem/1.5 Arial, sans-serif; }
  .colour-exploring:not(.imagination-art) > :not(.colour-copy) { filter: grayscale(1); }
  .colour-exploring > .colour-copy { display: block; position: absolute; inset: 0; pointer-events: none; mask-image: radial-gradient(circle var(--colour-radius) at var(--colour-x) var(--colour-y), #000 50%, transparent 100%); }
  .imagination-art.colour-exploring > .colour-copy { opacity: var(--imagination-remaining, 0); }
  .imagination-art .colour-copy .imagination-muted { opacity: 0 !important; }
}

.section-heading { max-width: 39rem; }
.section-heading > p:last-child { max-width: 57ch; }
.chapter { display: flex; align-items: baseline; gap: 0.9rem; margin-bottom: 1.7rem; color: var(--sage); font-size: 0.75rem; letter-spacing: 0.08em; font-weight: 700; text-transform: uppercase; }
.chapter span { border-left: 1px solid var(--ochre); padding-left: 0.9rem; }
.needs-grid { display: grid; margin-top: 2.5rem; }
.need { position: relative; padding: 1.75rem 0; border-top: 1px solid var(--line); }
.need-number { display: block; margin-bottom: 0.65rem; color: var(--sage); font-family: var(--serif); font-style: italic; font-size: 1rem; }
.need > p { max-width: 43ch; }
.examples, .quiet { color: var(--muted); font-size: 0.875rem; }
.examples { margin-bottom: 0; }
.publics { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.small-heading { margin: 0 0 1rem; color: var(--sage-dark); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.bookmarks { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.bookmarks a { display: inline-flex; align-items: center; min-height: 44px; padding: 0.45rem 1rem; background: var(--sage-wash); border-radius: 0 0 0.7rem 0; color: var(--sage-dark); font-size: 0.8125rem; text-decoration: none; }
.bookmarks a:nth-child(2) { background: var(--rose-wash); }
.bookmarks a:nth-child(3) { background: #eee4d1; }
.bookmarks a:hover { text-decoration: underline; }
.publics-grid { display: grid; gap: 1.5rem; }
.publics-grid h3 { font-size: 1.35rem; }
.publics-grid p { margin-bottom: 0; font-size: 0.9375rem; }
.public-art { position: relative; width: 100%; max-width: 16rem; margin: 0 auto 1.25rem; aspect-ratio: 1; mix-blend-mode: multiply; }
.public-illustration { width: 100%; }

.about-band { padding-block: 4.5rem; background: var(--sage-wash); }
.about-layout { display: grid; gap: 2rem; }
.about-copy .lead { font-size: 1.15rem; }
.about-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.5rem; }
.credentials { margin: 2rem 0 1.25rem; border-top: 1px solid #c9cfbf; }
.credentials > div { padding-block: 1rem; border-bottom: 1px solid #c9cfbf; }
.credentials dt { margin-bottom: 0.3rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sage-dark); }
.credentials dd { margin: 0; font-size: 0.9375rem; }
.credentials dd span { color: var(--muted); font-size: 0.8125rem; }
.support-grid { display: grid; gap: 1.5rem; margin-top: 2.5rem; }
.support-panel { padding: 1.75rem; border: 1px solid var(--line); }
.support-panel h3 { font-size: 1.8rem; }
.support-panel > p:not(.small-heading) { max-width: 46ch; }
.bilan-panel { background: #efeadf; border-color: #efeadf; }
.meeting-band { padding-block: 4.5rem; background: var(--rose-wash); }
.meeting-layout { display: grid; gap: 2rem; }
.meeting-steps { list-style: none; counter-reset: steps; margin: 0; padding: 0; }
.meeting-steps li { counter-increment: steps; position: relative; padding: 0 0 1.65rem 2.75rem; }
.meeting-steps li:last-child { padding-bottom: 0; }
.meeting-steps li::before { content: "0" counter(steps); position: absolute; left: 0; top: -0.1rem; font-family: var(--serif); font-size: 1.1rem; color: var(--sage); }
.meeting-steps h3 { font-size: 1.35rem; }
.meeting-steps p { margin: 0; font-size: 0.9375rem; }
.faq-section { display: grid; gap: 2rem; }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary { position: relative; padding: 1.3rem 2.2rem 1.3rem 0; list-style: none; cursor: pointer; font-family: var(--serif); font-size: 1.2rem; line-height: 1.4; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 0.25rem; top: 1.15rem; color: var(--sage); font-family: Arial, Helvetica, sans-serif; font-size: 1.4rem; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details > div { padding: 0 1.5rem 0.5rem 0; font-size: 0.9375rem; }
.contact-band { padding-block: 4.5rem 2.5rem; background: var(--sage-wash); }
.contact-band .section-heading > p { margin-bottom: 1.5rem; }
.practical-grid { display: grid; gap: 2rem; margin-top: 3rem; padding-block: 2rem; border-top: 1px solid #c9cfbf; border-bottom: 1px solid #c9cfbf; }
.practical-grid h3 { font-size: 1.4rem; }
.practical-grid p { font-size: 0.9375rem; }
address { font-style: normal; font-size: 0.9375rem; line-height: 1.8; }
address a { display: inline-block; padding-block: 0.3rem; }
.prices { margin: 0 0 0.8rem; }
.prices > div { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 0.5rem; font-size: 0.9375rem; }
.prices dd { margin: 0; white-space: nowrap; font-weight: 700; }
.source-note { margin: 1.25rem 0 0; color: var(--muted); font-size: 0.75rem; }
.site-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; padding-block: 2rem; color: var(--muted); font-size: 0.75rem; }
.site-footer p { margin: 0; }
.footer-signature { color: var(--ink); font-family: var(--serif); font-size: 1.2rem; }
.site-footer .draft-note { width: 100%; padding-top: 1rem; border-top: 1px solid var(--line); }
.information-page { max-width: 48rem; padding-block: 3rem; }
.information-page h1 { max-width: none; margin-bottom: 2rem; font-size: clamp(2.4rem, 5vw, 4rem); }
.information-page .lead { font-size: 1.15rem; }
.information-page section { padding-block: 2rem 1rem; border-top: 1px solid var(--line); margin-top: 2rem; }
.information-page h2 { font-size: 1.8rem; }
.information-page address { margin-bottom: 1.5rem; }

a:focus-visible, summary:focus-visible, main:focus-visible { outline: 3px solid var(--sage-dark); outline-offset: 5px; }
.skip-link { position: absolute; top: 0.5rem; left: 1rem; z-index: 5; padding: 0.75rem 1rem; color: var(--ink); background: var(--paper); transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }

@media (min-width: 42rem) {
  .needs-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); column-gap: 3rem; }
  .publics-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 2rem; }
  .support-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
  .practical-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 2rem; }
  .prices > div { flex-wrap: wrap; gap: 0.1rem 1rem; }
}

@media (min-width: 56.25rem) {
  .site-header { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-block: 1.75rem; }
  .main-nav { justify-content: flex-end; margin: 0; gap: 0.25rem 1.5rem; }
  .welcome { grid-template-columns: 1.1fr 1fr; gap: 3.5rem; padding-block: 3rem 4.5rem; }
  .portrait-frame { justify-self: end; }
  .section, .about-band, .meeting-band { padding-block: 6rem; }
  .about-layout, .meeting-layout, .faq-section { grid-template-columns: 1fr 1.1fr; gap: 5rem; }
  .contact-band { padding-top: 6rem; }
  .support-panel { padding: 2.5rem; }
  .motion-chapter { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; }
  .motion-chapter .needs-grid, .motion-chapter .support-grid { grid-template-columns: minmax(0, 1fr); }
  .motion-chapter-approach .motion-copy { grid-column: 2; grid-row: 1; }
  .motion-chapter-approach .motion-track { grid-column: 1; grid-row: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .public-animated .public-reveal { mask-image: linear-gradient(to top, #000 var(--reveal-edge), transparent calc(var(--reveal-edge) + 20%)); }
  .public-teen.public-animated .public-reveal { mask-image: linear-gradient(to right, #000 var(--reveal-edge), transparent calc(var(--reveal-edge) + 20%)); }
  .public-parents.public-animated .public-reveal { mask-image: linear-gradient(to right, #000 var(--reveal-side), transparent calc(var(--reveal-side) + 10%)), linear-gradient(to left, #000 var(--reveal-side), transparent calc(var(--reveal-side) + 10%)); }
  .notebook-scroll::after { content: ''; display: block; height: 130svh; }
  .notebook-scroll .notebook-figure { position: sticky; top: 1.5rem; }
  .welcome:has(.notebook-scroll) .introduction { align-self: start; }
  .motion-scroll::after { content: ''; display: block; height: 80svh; }
  .motion-scroll .motion-figure { position: sticky; top: var(--pin-top, 1.5rem); }
}

@media (min-width: 56.25rem) and (prefers-reduced-motion: no-preference) {
  .motion-scroll::after { height: 130svh; }
}

@media (min-width: 56.25rem) and (min-height: 42rem) and (prefers-reduced-motion: no-preference) {
  .welcome:has(.notebook-scroll) .introduction { position: sticky; top: 3rem; padding-top: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .imagination-muted { opacity: 0 !important; }
  .motion-art .reveal { opacity: 1 !important; }
  .motion-art .draw-line { stroke-dashoffset: 0 !important; }
}

@media print {
  .imagination-muted { opacity: 0 !important; }
  .public-reveal { mask-image: none !important; }
  .colour-copy, .colour-hint { display: none !important; }
  .colour-exploring > :not(.colour-copy) { filter: none; }
  .main-nav, .skip-link, .bookmarks, .discover-link, .site-footer > a { display: none; }
  body { font-size: 11pt; }
  .section, .about-band, .meeting-band, .contact-band { padding-block: 1.5rem; }
  .portrait-frame { max-width: 12rem; }
  .notebook-scroll::after { display: none; }
  .notebook-figure, .welcome:has(.notebook-scroll) .introduction { position: static; }
  .notebook-world { display: none !important; }
  .notebook-static-drawing { visibility: visible !important; }
  .motion-scroll::after { display: none; }
  .motion-scroll .motion-figure { position: static; }
  .motion-art .reveal { opacity: 1 !important; }
  .motion-art .draw-line { stroke-dashoffset: 0 !important; }
  .need, .support-panel, .meeting-steps li { break-inside: avoid; }
  .faq-list details > div { display: block; }
}