/* Saylo pages: canvas ground, dark brown ink, Bagel Fat One display over Outfit body.
   Fonts are self-hosted (SIL Open Font License), latin subset. */
@font-face { font-family: 'Bagel Fat One'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/bagel-fat-one-latin.woff2) format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/outfit-latin-variable.woff2) format('woff2'); }
:root {
  --ink: #2E1A12;
  --ink-soft: #5A463A;
  --ground: #EFE8DA;
  --cream: #FFF3E1;
  --pink: #FF2D6F;
  --peach: #FF7A59;
  --sunny: #FFD22E;
  --blue: #4BB3FF;
  --line: #CDBFA8;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  color: var(--ink);
  background-color: var(--ground);
  background-image: linear-gradient(rgba(255, 249, 238, .4), rgba(255, 249, 238, .4)), url(/assets/canvas-tile.webp);
  background-size: auto, 1254px 1254px;
  font: 400 18px/1.6 'Outfit', system-ui, sans-serif;
}
a { color: var(--ink); text-decoration-color: var(--pink); text-underline-offset: 3px; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: 'Bagel Fat One', system-ui, sans-serif; font-weight: 400; line-height: 1.1; text-wrap: balance; }
h1 { font-size: clamp(38px, 6vw, 60px); margin: 0; }
h2 { font-size: clamp(26px, 3.4vw, 34px); margin: 48px 0 12px; }
h3 { font-size: 24px; margin: 28px 0 8px; }
h4 { margin: 0 0 4px; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; }

.top {
  max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  padding-block: 18px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.top img { display: block; height: 40px; width: auto; }
.top nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; font-weight: 500; }
.top nav a { text-decoration: none; }
.btn { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px; background: var(--ink); color: var(--cream) !important; font-weight: 600; }

main { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
article { max-width: 760px; margin: 0 auto; padding-block: 24px 64px; }
.eyebrow { margin: 0 0 10px; font-weight: 600; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.hero img { width: auto; height: 160px; flex: none; }
.hero > div { min-width: 0; }

.answer { margin-top: 24px; padding: 20px 24px; border: 2px solid var(--ink); border-radius: 24px; background: rgba(255, 243, 225, .7); }
.answer h2 { margin: 0 0 8px; font-size: 24px; }
.answer p { margin: 0; }
.answer .age { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.answer .age strong { font-family: 'Bagel Fat One', system-ui, sans-serif; font-weight: 400; font-size: 30px; }
.answer .age span { color: var(--ink-soft); font-size: 16px; }

.errors dt { font-weight: 600; margin-top: 12px; }
.errors dd { margin: 2px 0 0; }
.words { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.words > div { padding: 14px 16px; border: 2px solid var(--line); border-radius: 18px; background: rgba(255, 243, 225, .5); min-width: 0; }
.words p { margin: 0; }

details { border-bottom: 2px dashed var(--line); padding: 12px 0; }
summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
details p { margin: 6px 0 0; }

.saylo { margin-top: 48px; display: flex; gap: 16px; align-items: flex-start; padding: 20px 24px; border-radius: 24px; background: #FFE3D8; }
.saylo img { border-radius: 12px; flex: none; }
.saylo h2 { margin: 0 0 6px; font-size: 24px; }
.saylo p { margin: 0; }

.crew { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.crew a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; border: 2px solid var(--ink); border-radius: 18px; background: rgba(255, 243, 225, .4); text-decoration: none; font-weight: 600; min-height: 44px; }
.crew a:hover { background: rgba(255, 243, 225, .85); }
.crew img { height: 72px; width: auto; }

.qlist { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.qlist a { display: flex; flex-direction: column; gap: 4px; padding: 16px 20px; border: 2px solid var(--ink); border-radius: 18px; background: rgba(255, 243, 225, .5); text-decoration: none; }
.qlist a:hover { background: rgba(255, 243, 225, .9); }
.qlist strong { font-weight: 600; font-size: 19px; text-decoration: underline; text-decoration-color: var(--pink); text-underline-offset: 3px; }
.qlist span { color: var(--ink-soft); font-size: 16px; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; background: rgba(255, 243, 225, .6); border-radius: 12px; }
caption { text-align: left; padding-bottom: 8px; color: var(--ink-soft); font-size: 15px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
thead th { font-size: 14px; letter-spacing: .04em; text-transform: uppercase; }

.sources { margin-top: 40px; font-size: 15px; color: var(--ink-soft); }
.sources h2 { font-size: 22px; }

.foot {
  background: var(--ink); color: var(--cream); font-size: 15px;
  padding-block: 32px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.foot p { max-width: 760px; margin: 0 auto 10px; }
.foot a { color: var(--cream); }

@media (max-width: 520px) { .hero img { height: 100px; } }

/* Product pages: closing call to action and the waitlist form. */
.intro { font-size: 20px; margin: 16px 0 24px; }
.saylo.cta { display: block; background: #DCEFFF; }
.saylo.cta p + p { margin-top: 14px; }
.wl { display: flex; flex-direction: column; gap: 16px; max-width: 600px; padding: 24px; border: 2px solid var(--ink); border-radius: 24px; background: rgba(255, 243, 225, .7); }
.wl fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.wl legend { padding: 0; margin-bottom: 10px; font-weight: 600; font-size: 15px; }
.wl p { margin: 0; }
.wl-roles { display: flex; flex-wrap: wrap; gap: 10px; }
.wl-role { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px; border: 2px solid var(--ink); border-radius: 999px; font-weight: 600; cursor: pointer; background: rgba(255, 243, 225, .4); }
.wl-role input { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); }
.wl-role:has(input:checked) { background: var(--ink); color: var(--cream); }
.wl-role:has(input:checked) input { accent-color: var(--cream); }
.wl-role:has(input:focus-visible) { outline: 3px solid var(--pink); outline-offset: 2px; }
.wl-field { display: flex; flex-direction: column; gap: 6px; font-weight: 500; font-size: 15px; }
.wl-input { min-height: 52px; padding: 0 20px; border-radius: 999px; border: 2px solid var(--ink); background: var(--cream); color: var(--ink); font: inherit; font-size: 18px; }
.wl-input:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
.wl-only-therapist { display: none; }
.wl:has(#wl-role-therapist:checked) p.wl-only-therapist { display: block; }
.wl:has(#wl-role-therapist:checked) label.wl-only-therapist { display: flex; }
.wl:has(#wl-role-therapist:checked) .wl-only-parent { display: none; }
.wl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.wl button { align-self: flex-start; border: 0; font: inherit; font-size: 18px; cursor: pointer; }
.wl button:disabled { opacity: .6; cursor: wait; }
#wl-status { min-height: 1.5em; font-weight: 600; }
.wl-small { font-size: 14px; color: var(--ink-soft); }
.foot nav p { max-width: 760px; margin: 0 auto 10px; }

/* Skip link, visible dates, and the small mobile join bar. */
.skip { position: absolute; left: 12px; top: -60px; z-index: 10; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: var(--cream); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
.dates { margin: 10px 0 0; font-size: 15px; color: var(--ink-soft); }
.sticky-cta { display: none; }
@media (max-width: 720px) {
  .sticky-cta { display: flex; justify-content: center; position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(239, 232, 218, .94); border-top: 2px solid var(--line); }
  .sticky-cta .btn { width: 100%; max-width: 420px; justify-content: center; }
  body.has-cta { padding-bottom: 76px; }
}
@media print { .top, .foot, .sticky-cta, .skip, .no-print { display: none !important; } body { background: #fff; } }

/* Related guides, the hub's search and sound list, the gallery, bibliography and embeds. */
.related { margin-top: 48px; }
.qlist.sounds a { flex-direction: row; align-items: center; gap: 16px; }
.qlist.sounds img { height: 64px; width: auto; flex: none; }
.qlist.sounds .txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.search { margin: 28px 0 0; display: flex; flex-direction: column; gap: 8px; max-width: 520px; }
.search label { font-weight: 600; }
.search p { margin: 0; color: var(--ink-soft); font-size: 15px; min-height: 1.4em; }
.gallery { list-style: none; padding: 0; margin: 24px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.gallery figure { margin: 0; height: 100%; padding: 18px; border: 2px solid var(--ink); border-radius: 22px; background: rgba(255, 243, 225, .5); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.gallery img { height: 200px; width: auto; max-width: 100%; object-fit: contain; }
.gallery figcaption { font-size: 16px; text-align: center; }
.biblio li { margin-bottom: 10px; overflow-wrap: anywhere; }
.sources li { overflow-wrap: anywhere; }
.embed-code { width: 100%; font: 14px/1.5 ui-monospace, Menlo, monospace; padding: 12px; border: 2px solid var(--ink); border-radius: 14px; background: var(--cream); color: var(--ink); }
body.embed { padding: 16px; background-image: none; }
body.embed h1 { font-size: 30px; }
.credit { font-size: 14px; color: var(--ink-soft); }
.saylo p + p { margin-top: 10px; }

/* Waitlist form extras: checkboxes, select, errors. */
.wl-checks { display: flex; flex-direction: column; gap: 8px; }
.wl-checks label { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 500; }
.wl-checks input { width: 20px; height: 20px; accent-color: var(--ink); }
select.wl-input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 26px) 50%, calc(100% - 20px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 44px; }
.wl-input[aria-invalid="true"] { border-color: #B3261E; }
.wl-err { margin: -8px 0 0 !important; color: #8C1D18; font-weight: 600; font-size: 15px; }
.wl-errors { padding: 12px 16px; border: 2px solid #8C1D18; border-radius: 14px; background: #FFE3D8; color: #5C130F; font-weight: 600; }
.wl-submit { display: flex; flex-direction: column; gap: 10px; }
.wl fieldset.wl-only-therapist { display: none; }
.wl:has(#wl-role-therapist:checked) fieldset.wl-only-therapist { display: block; }

/* Press assets. */
.press-assets { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.press-assets figure { margin: 0; padding: 16px; border: 2px solid var(--line); border-radius: 18px; background: rgba(255, 243, 225, .6); }
.press-assets figure.on-dark { background: var(--ink); }
.press-assets figure.on-dark figcaption a { color: var(--cream); }
.press-assets img { width: 100%; height: auto; }

/* Printable practice log. */
.sheet { margin-top: 24px; }
.sheet h2 { margin-top: 0; }
.sheet .blank { display: inline-block; min-width: 220px; border-bottom: 2px solid var(--ink); }
.log-head { margin: 12px 0 20px; }
.log-head th { width: 38%; font-weight: 600; }
.log-head td, .log-days td { height: 44px; }
.log-days .faces { color: var(--ink-soft); white-space: nowrap; }
@media print {
  .sheet table { background: #fff; }
  .sheet th, .sheet td { border: 1px solid #555; }
  .log-days td { height: 64px; }
}