/* =========================================================
   Erik Johnston — Therapy for Children
   Sister site at /children/
   Warm, hand-drawn, parent-and-child friendly
   Palette drawn from the Jumping Mouse Children's Center
   house (yellow roof, red/orange outlines, blue door, green grass)
   ========================================================= */

:root {
  /* Palette — house-drawn */
  --c-yellow: #F6C033;         /* primary — the sunny roof */
  --c-yellow-soft: #FDE8A8;    /* background washes */
  --c-yellow-deep: #D99A14;    /* darker accents, hover */
  --c-red: #D94A2E;            /* warm orange-red — outlines, emphasis */
  --c-red-soft: #F9D6CC;
  --c-blue: #2E5A8A;           /* the front door — trust, links */
  --c-blue-soft: #BFD2E5;
  --c-green: #6FA84F;          /* the grass — growth */
  --c-green-soft: #D4E6C5;
  --c-ink: #1F1F1F;            /* hand-drawn outlines */
  --c-ink-soft: #4A4A4A;
  --c-bg: #FFFBF2;             /* warm off-white page */
  --c-bg-alt: #FFF5DE;         /* softer cream for cards/sections */
  --c-paper: #FFFFFF;

  /* Type */
  --font-display: "Caveat Brush", "Patrick Hand", "Marker Felt", "Comic Sans MS", cursive;
  --font-headline: "Fraunces", "Georgia", "Iowan Old Style", serif;
  --font-body: "Nunito", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;

  /* Shape + shadow */
  --radius-sm: 8px;
  --radius-md: 18px;
  --radius-lg: 32px;
  --shadow-soft: 0 6px 22px rgba(31,31,31,0.08);
  --shadow-lift: 0 14px 34px rgba(31,31,31,0.14);

  /* Layout */
  --measure: 68ch;
  --page-max: 1120px;
}

/* ---- Base ---- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.7;
  color: var(--c-ink);
  background: var(--c-bg);
  /* subtle paper-grain feel without an image */
  background-image:
    radial-gradient(circle at 20% 10%, rgba(246,192,51,0.10) 0, transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(111,168,79,0.08) 0, transparent 45%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }

a {
  color: var(--c-blue);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--c-yellow);
  text-underline-offset: 4px;
  transition: color .2s ease, text-decoration-color .2s ease;
}
a:hover, a:focus { color: var(--c-red); text-decoration-color: var(--c-red); }

h1, h2, h3, h4 {
  font-family: var(--font-headline);
  color: var(--c-ink);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 .6em;
}

h1 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3 { font-size: 1.3rem; }

p { margin: 0 0 1.2em; max-width: var(--measure); }

.display {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--c-red);
  letter-spacing: 0.01em;
}

/* ---- Layout ---- */

.container {
  width: min(100% - 2.4rem, var(--page-max));
  margin-inline: auto;
}

.section { padding: clamp(3rem, 7vw, 6rem) 0; }
.section--tight { padding: clamp(2rem, 4vw, 3rem) 0; }
.section--alt { background: var(--c-bg-alt); }
.section--cream {
  background: var(--c-yellow-soft);
  background-image: linear-gradient(180deg, var(--c-yellow-soft) 0%, var(--c-bg) 100%);
}

/* ---- Adult-site return banner (teal, mirrors the main-site yellow banner) ---- */
#adultBanner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 99999;
  background: linear-gradient(90deg, #26AEBC 0%, #1D919E 100%);
  color: #ffffff;
  text-align: center;
  padding: 11px 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
  border-bottom: 2px solid #167984;
}
#adultBanner a {
  color: #ffffff;
  text-decoration: none;
  border-bottom: 0;
  display: inline-flex;
  align-items: center;
  gap: .4em;
}
#adultBanner a:hover { color: #FFE680 !important; }
#adultBanner a::before {
  content: "←";
  margin-right: .25em;
  transition: transform .25s ease;
  display: inline-block;
}
#adultBanner a:hover::before { transform: translateX(-4px); }
/* Push the entire kids-site page down so nothing sits under the banner */
body { padding-top: 44px !important; }
@media (max-width: 600px) {
  #adultBanner { font-size: 0.85rem; padding: 9px 10px; }
  body { padding-top: 40px !important; }
}

/* Topbar sits below the banner, so it should respect the padding */
.topbar { top: 0; }

/* ---- Top bar / nav ---- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 251, 242, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(31,31,31,0.08);
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  color: var(--c-ink);
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.1;
}
.brand:hover { color: var(--c-red); text-decoration: none; }
.brand__mark { width: 42px; height: 42px; flex-shrink: 0; }
.brand__name { display: flex; flex-direction: column; }
.brand__name small {
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 500;
  color: var(--c-ink-soft);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-top: 2px;
}

.mainnav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.4rem;
}
.mainnav a {
  text-decoration: none;
  color: var(--c-ink);
  font-weight: 600;
  font-size: .95rem;
  padding: .4rem 0;
  border-bottom: 3px solid transparent;
  transition: border-color .2s ease, color .2s ease;
}
.mainnav a:hover,
.mainnav a[aria-current="page"] {
  color: var(--c-ink);
  border-bottom-color: var(--c-yellow);
}

.navtoggle {
  display: none;
  background: none;
  border: 2px solid var(--c-ink);
  border-radius: var(--radius-sm);
  padding: .35rem .7rem;
  font: inherit;
  cursor: pointer;
}

@media (max-width: 820px) {
  .mainnav { display: none; }
  .mainnav.is-open {
    display: block;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--c-bg);
    padding: 1rem 1.2rem 1.4rem;
    border-bottom: 1px solid rgba(31,31,31,0.08);
    box-shadow: var(--shadow-soft);
  }
  .mainnav ul { flex-direction: column; gap: .2rem; }
  .mainnav a { display: block; padding: .6rem 0; border-bottom: 0; border-left: 3px solid transparent; padding-left: .7rem; }
  .mainnav a:hover,
  .mainnav a[aria-current="page"] { border-left-color: var(--c-yellow); border-bottom-color: transparent; }
  .navtoggle { display: inline-flex; align-items: center; gap: .4rem; }
}

/* ---- Hero ---- */

.hero {
  position: relative;
  padding: clamp(3rem, 8vw, 6rem) 0 clamp(2rem, 5vw, 4rem);
  overflow: hidden;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.hero__eyebrow {
  font-family: var(--font-display);
  color: var(--c-red);
  font-size: 1.5rem;
  line-height: 1;
  margin-bottom: .4rem;
}

.hero__title {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1.08;
  margin-bottom: 1rem;
}

.hero__title em {
  font-style: normal;
  color: var(--c-red);
  position: relative;
  white-space: nowrap;
}
.hero__title em::after {
  content: "";
  position: absolute;
  left: -2%; right: -2%;
  bottom: -6px;
  height: 10px;
  background: var(--c-yellow);
  z-index: -1;
  border-radius: 4px;
  transform: rotate(-1deg);
}

.hero__lede {
  font-size: 1.15rem;
  max-width: 44ch;
  color: var(--c-ink-soft);
  margin-bottom: 1.6rem;
}

.hero__art {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 460px;
  justify-self: center;
  width: 100%;
}

@media (max-width: 820px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__art { max-width: 320px; }
}

/* ---- Buttons ---- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .9rem 1.6rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
  border: 2.5px solid var(--c-ink);
  background: var(--c-yellow);
  color: var(--c-ink);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
  box-shadow: 0 4px 0 var(--c-ink);
}
.btn:hover, .btn:focus {
  background: var(--c-yellow-deep);
  color: var(--c-ink);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 6px 0 var(--c-ink);
}
.btn:active { transform: translateY(1px); box-shadow: 0 2px 0 var(--c-ink); }

.btn--ghost {
  background: transparent;
  box-shadow: 0 4px 0 var(--c-ink);
}
.btn--blue {
  background: var(--c-blue);
  color: #fff;
}
.btn--blue:hover { background: #204468; color: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.4rem; }

/* ---- Cards ---- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.4rem;
}

.card {
  background: var(--c-paper);
  border: 2px solid var(--c-ink);
  border-radius: var(--radius-md);
  padding: 1.6rem 1.5rem;
  box-shadow: 4px 6px 0 var(--c-ink);
  transition: transform .2s ease, box-shadow .2s ease;
  position: relative;
}
.card:hover { transform: translate(-2px, -2px); box-shadow: 6px 8px 0 var(--c-ink); }

.card h3 {
  margin-top: 0;
  margin-bottom: .6rem;
  font-size: 1.25rem;
}
.card p:last-child { margin-bottom: 0; }

.card__icon {
  width: 54px; height: 54px;
  margin-bottom: 1rem;
  display: block;
}

.card--yellow { background: var(--c-yellow-soft); }
.card--blue   { background: var(--c-blue-soft); }
.card--green  { background: var(--c-green-soft); }
.card--red    { background: var(--c-red-soft); }

/* ---- Prose (interior pages) ---- */

.prose {
  max-width: var(--measure);
}
.prose h2 { margin-top: 2.4rem; }
.prose h3 { margin-top: 1.8rem; color: var(--c-blue); }
.prose p, .prose li { font-size: 1.05rem; }
.prose ul, .prose ol { padding-left: 1.4rem; margin-bottom: 1.4rem; }
.prose li { margin-bottom: .5rem; }

.prose blockquote {
  margin: 2rem 0;
  padding: 1.2rem 1.4rem 1.2rem 1.6rem;
  border-left: 4px solid var(--c-yellow);
  background: var(--c-bg-alt);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-family: var(--font-headline);
  font-style: italic;
  color: var(--c-ink-soft);
}

.pullquote {
  font-family: var(--font-display);
  color: var(--c-red);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  line-height: 1.25;
  text-align: center;
  margin: 3rem auto;
  max-width: 22ch;
}

/* ---- Page header (non-home pages) ---- */

.pagehead {
  padding: clamp(3rem, 7vw, 5rem) 0 clamp(1.4rem, 3vw, 2.4rem);
  text-align: center;
}
.pagehead .eyebrow {
  font-family: var(--font-display);
  color: var(--c-red);
  font-size: 1.4rem;
}
.pagehead h1 { margin-bottom: .4rem; }
.pagehead p { margin: 0 auto; max-width: 52ch; color: var(--c-ink-soft); }

/* Colored hero bands for interior pages — makes each page feel alive immediately */
.pagehead--yellow {
  background: linear-gradient(180deg, #FDE8A8 0%, #FFF5DE 60%, var(--c-bg) 100%);
  border-bottom: 3px dashed rgba(217, 154, 20, 0.35);
}
.pagehead--blue {
  background: linear-gradient(180deg, #BFD2E5 0%, #E3EDF6 60%, var(--c-bg) 100%);
  border-bottom: 3px dashed rgba(46, 90, 138, 0.3);
}
.pagehead--green {
  background: linear-gradient(180deg, #D4E6C5 0%, #EAF2E1 60%, var(--c-bg) 100%);
  border-bottom: 3px dashed rgba(111, 168, 79, 0.35);
}
.pagehead--red {
  background: linear-gradient(180deg, #F9D6CC 0%, #FCE8E0 60%, var(--c-bg) 100%);
  border-bottom: 3px dashed rgba(217, 74, 46, 0.35);
}

/* Framed photo — hand-drawn feel with a slight tilt */
.photo-frame {
  display: inline-block;
  padding: 12px 12px 40px;
  background: #fff;
  border: 2px solid var(--c-ink);
  border-radius: 4px;
  box-shadow: 6px 8px 0 var(--c-ink);
  transform: rotate(-1.5deg);
  max-width: 340px;
  margin: 1rem auto;
  position: relative;
}
.photo-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}
.photo-frame figcaption {
  font-family: var(--font-display);
  color: var(--c-red);
  font-size: 1.2rem;
  text-align: center;
  padding: 10px 0 0;
  line-height: 1;
}
.photo-frame--right { transform: rotate(1.2deg); }
.photo-frame--wide { max-width: 460px; }
.photo-frame--small { max-width: 220px; }

/* Photo + text split */
.photo-split {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 2.4rem;
  align-items: center;
}
.photo-split--reverse { grid-template-columns: 1fr 340px; }
@media (max-width: 760px) {
  .photo-split, .photo-split--reverse { grid-template-columns: 1fr; gap: 1.6rem; text-align: center; }
  .photo-split .photo-frame { justify-self: center; }
}

/* Placeholder SVG illustrations (used when you don't have a photo yet) */
.placeholder-illus {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  display: block;
}

/* ---- FAQ ---- */

.faq details {
  background: var(--c-paper);
  border: 2px solid var(--c-ink);
  border-radius: var(--radius-md);
  padding: 1rem 1.3rem;
  margin-bottom: 1rem;
  box-shadow: 3px 4px 0 var(--c-ink);
}
.faq details[open] { background: var(--c-yellow-soft); }
.faq summary {
  cursor: pointer;
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 1.1rem;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "＋";
  float: right;
  font-weight: 400;
  color: var(--c-red);
  transition: transform .2s ease;
}
.faq details[open] summary::after { content: "−"; }

/* ---- Info rows (rates, contact) ---- */

.inforow {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem 1.6rem;
  margin: 1.4rem 0;
  padding: 1.4rem 1.5rem;
  background: var(--c-paper);
  border: 2px solid var(--c-ink);
  border-radius: var(--radius-md);
  box-shadow: 3px 4px 0 var(--c-ink);
}
.inforow dt { font-family: var(--font-headline); font-weight: 600; color: var(--c-blue); }
.inforow dd { margin: 0; }

/* ---- Footer ---- */

.sitefoot {
  background: var(--c-ink);
  color: #f2f2f2;
  padding: 3rem 0 2rem;
  margin-top: 4rem;
}

/* Footer column color-coding — teal for main practice, yellow for children's */
.sitefoot h4 { color: #fff; margin-bottom: .8rem; font-size: 1.05rem; }
.sitefoot h4.ch-head {
  color: var(--c-yellow);
  padding-bottom: .3rem;
  border-bottom: 2px solid var(--c-yellow);
  display: block;
  width: 100%;
}
.sitefoot h4.ad-head {
  color: #5FD0DE;
  padding-bottom: .3rem;
  border-bottom: 2px solid #5FD0DE;
  display: block;
  width: 100%;
}
/* Style the siblings (the ul and its links) based on which column they're in */
.sitefoot h4.ch-head ~ ul a { color: var(--c-yellow); text-decoration-color: var(--c-red); }
.sitefoot h4.ad-head ~ ul a { color: #5FD0DE; text-decoration-color: #9FDFE7; }
.sitefoot h4.ch-head ~ ul a:hover { color: #FFE680; }
.sitefoot h4.ad-head ~ ul a:hover { color: #9FDFE7; }

/* "Back to main site" strip above the footer */
.back-to-main {
  background: var(--c-bg-alt);
  border-top: 2px solid rgba(31,31,31,0.1);
  border-bottom: 2px solid rgba(31,31,31,0.1);
  padding: 1.4rem 0;
  text-align: center;
  font-family: var(--font-headline);
  font-size: 1rem;
}
.back-to-main a {
  color: var(--c-blue);
  text-decoration-color: var(--c-yellow);
  font-weight: 600;
}
.back-to-main .bm-small {
  display: block;
  font-family: var(--font-body);
  color: var(--c-ink-soft);
  font-size: .88rem;
  margin-top: .2rem;
}

/* Top-nav "Main Site" link — small, distinct */
.mainnav .nav-home {
  color: var(--c-blue) !important;
  font-weight: 600;
}
.mainnav .nav-home::before {
  content: "← ";
  color: var(--c-red);
}

/* Reveal-on-click button for phone/email */
.reveal-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1rem;
  border-radius: 999px;
  background: var(--c-paper);
  border: 2px solid var(--c-ink);
  color: var(--c-ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 3px 4px 0 var(--c-ink);
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
  font-size: .95rem;
}
.reveal-btn:hover { background: var(--c-yellow-soft); transform: translateY(-1px); box-shadow: 3px 5px 0 var(--c-ink); }
.reveal-btn .lock { opacity: .5; }
.reveal-btn.is-revealed {
  background: var(--c-yellow-soft);
  border-color: var(--c-ink);
}

/* Google Map embed wrapper — rounded, framed */
.map-wrap {
  position: relative;
  margin: 2rem 0;
  border: 3px solid var(--c-ink);
  border-radius: var(--radius-md);
  box-shadow: 6px 8px 0 var(--c-ink);
  overflow: hidden;
  background: #EADFC5;
}
.map-wrap iframe {
  display: block;
  width: 100%;
  height: 360px;
  border: 0;
}
.map-wrap .map-label {
  position: absolute;
  top: 10px; left: 12px;
  background: var(--c-yellow);
  color: var(--c-ink);
  font-family: var(--font-display);
  font-size: 1.1rem;
  padding: 4px 14px;
  border: 2px solid var(--c-ink);
  border-radius: 999px;
  box-shadow: 2px 3px 0 var(--c-ink);
  transform: rotate(-2deg);
}

/* Three-topic page — big visual dividers between sections */
.topic-divider {
  height: 6px;
  margin: 3rem 0 2rem;
  background-image: repeating-linear-gradient(90deg,
    var(--c-ink) 0 18px, transparent 18px 28px);
  border: 0;
}
.topic-divider--yellow { background-image: repeating-linear-gradient(90deg, #D99A14 0 18px, transparent 18px 28px); }
.topic-divider--blue   { background-image: repeating-linear-gradient(90deg, #2E5A8A 0 18px, transparent 18px 28px); }
.topic-divider--green  { background-image: repeating-linear-gradient(90deg, #4F8235 0 18px, transparent 18px 28px); }

.topic-marker {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: var(--c-yellow);
  color: var(--c-ink);
  padding: .5rem 1.2rem;
  border-radius: 999px;
  border: 2px solid var(--c-ink);
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .02em;
  box-shadow: 3px 4px 0 var(--c-ink);
  margin-bottom: 1rem;
}
.topic-marker--blue  { background: var(--c-blue-soft); }
.topic-marker--green { background: var(--c-green-soft); }
.topic-marker .topic-num {
  background: var(--c-ink);
  color: var(--c-yellow);
  width: 1.6rem; height: 1.6rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.1rem;
}

.sitefoot a { color: var(--c-yellow); text-decoration-color: var(--c-red); }
.sitefoot__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}
@media (max-width: 720px) { .sitefoot__grid { grid-template-columns: 1fr; } }

.sitefoot h4 { color: #fff; margin-bottom: .8rem; }
.sitefoot ul { list-style: none; padding: 0; margin: 0; }
.sitefoot li { margin-bottom: .5rem; }

.crisis {
  background: rgba(217,74,46,0.15);
  border: 1px solid rgba(217,74,46,0.4);
  border-radius: var(--radius-md);
  padding: 1rem 1.2rem;
  margin-top: 1.2rem;
  font-size: .92rem;
}
.crisis strong { color: #ffb7a2; }

.fineprint {
  text-align: center;
  font-size: .85rem;
  color: #aaa;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 1.4rem;
}

/* ---- Helpers ---- */

.eyebrow {
  font-family: var(--font-display);
  color: var(--c-red);
  font-size: 1.3rem;
  display: block;
  line-height: 1;
  margin-bottom: .5rem;
}
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---- Subtle page-load ---- */

.hero__title, .hero__lede, .hero__eyebrow, .hero .btn-row {
  animation: rise .6s ease-out both;
}
.hero__lede { animation-delay: .08s; }
.hero .btn-row { animation-delay: .16s; }
.hero__art { animation: rise .8s ease-out .1s both; }

@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   SILLY MODE v2 — a full show when activated
   A cast of characters (bunny, bird, mech, flying horse) travel
   across the screen and "shrink into" a sand tray at the bottom.
   Sand tray appears at the bottom of the viewport with figures
   dropping in. The site wiggles, winks, and twinkles.
   No rainbows. Natural & thematic. Ages 3-13.
   ============================================================ */

/* The Silly Mode toggle button itself — custom character, not emoji */
#sillyToggle {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-left: 1rem;
  padding: .4rem .9rem .4rem .5rem;
  border-radius: 999px;
  border: 2.5px solid var(--c-ink);
  background: var(--c-paper);
  color: var(--c-ink);
  font: inherit;
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
  box-shadow: 3px 4px 0 var(--c-ink);
  transition: transform .12s ease, box-shadow .12s ease, background .25s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
#sillyToggle:hover { background: var(--c-yellow-soft); transform: translateY(-1px); box-shadow: 3px 5px 0 var(--c-ink); }
#sillyToggle:active { transform: translateY(1px); box-shadow: 2px 2px 0 var(--c-ink); }
#sillyToggle .silly-char {
  font-size: 1.2rem;
  flex-shrink: 0;
  display: inline-block;
  transition: transform .3s cubic-bezier(.2,1.6,.4,1);
  line-height: 1;
}
#sillyToggle:hover .silly-char { transform: rotate(-12deg) scale(1.15); }
body.silly #sillyToggle {
  background: var(--c-yellow);
  border-color: var(--c-red);
  color: var(--c-ink);
}
body.silly #sillyToggle .silly-char { animation: sillyCharBounce 1.4s infinite ease-in-out; }

@media (max-width: 820px) {
  #sillyToggle { margin-left: .4rem; padding: .3rem .7rem .3rem .35rem; font-size: .82rem; }
  #sillyToggle .silly-char { font-size: 1rem; }
  #sillyToggle .silly-label { display: none; }
}

/* ---- Activated state ---- */

body.silly {
  background-image:
    radial-gradient(circle at 10% 20%, rgba(246,192,51,0.20) 0, transparent 35%),
    radial-gradient(circle at 90% 30%, rgba(46,90,138,0.14) 0, transparent 40%),
    radial-gradient(circle at 30% 85%, rgba(111,168,79,0.18) 0, transparent 40%),
    radial-gradient(circle at 80% 90%, rgba(217,74,46,0.14) 0, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(255,183,197,0.10) 0, transparent 50%);
  background-size: 200% 200%;
  animation: funColorDrift 18s ease-in-out infinite;
}

/* Soft color overlays — drifting pastel washes (watercolor, polished, not psychedelic) */
body.silly::before {
  content: "";
  position: fixed;
  pointer-events: none;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 600px 400px at 20% 30%, rgba(246,192,51,0.10), transparent 60%),
    radial-gradient(ellipse 500px 350px at 80% 70%, rgba(255,183,197,0.10), transparent 60%);
  animation: funOverlayBloom 14s ease-in-out infinite;
  mix-blend-mode: multiply;
}
body.silly::after {
  content: "";
  position: fixed;
  pointer-events: none;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 700px 500px at 60% 20%, rgba(111,168,79,0.10), transparent 60%),
    radial-gradient(ellipse 450px 400px at 30% 80%, rgba(46,90,138,0.10), transparent 60%);
  animation: funOverlayBloom 18s ease-in-out infinite reverse;
  mix-blend-mode: multiply;
}

@keyframes funColorDrift {
  0%, 100% { background-position: 0% 0%; }
  50%      { background-position: 100% 100%; }
}
@keyframes funOverlayBloom {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.7; }
  33%      { transform: translate(20px, -15px) scale(1.05); opacity: 0.9; }
  66%      { transform: translate(-15px, 10px) scale(1.03); opacity: 0.6; }
}

/* Heading wiggle — gentle, but each level on its own clock */
body.silly h1 { animation: funWiggleA 3.2s ease-in-out infinite; transform-origin: center; display: inline-block; }
body.silly h2 { animation: funWiggleB 4.4s ease-in-out infinite .15s; transform-origin: center; display: inline-block; }
body.silly h3 { animation: funWiggleC 2.8s ease-in-out infinite .3s; transform-origin: center; display: inline-block; }

/* Hero house: stronger animation in Fun Mode — sway + breathe + slow pulse to amplify the sun/birds inside */
body.silly .hero__art {
  animation: funHouseSway 3.2s ease-in-out infinite, funHouseBreathe 5.5s ease-in-out infinite, funHousePulse 4s ease-in-out infinite;
  transform-origin: bottom center;
}

/* Cards drift independently — odd, even, and every-third get distinct timing */
body.silly .card:nth-child(odd)  { animation: funCardDriftA 4.5s ease-in-out infinite; transform-origin: center; }
body.silly .card:nth-child(even) { animation: funCardDriftB 5.2s ease-in-out infinite .2s; transform-origin: center; }
body.silly .card:nth-child(3n)   { animation-duration: 3.8s; animation-delay: .4s; }
body.silly .card:hover {
  animation: none !important;
  transform: translate(-2px, -4px) scale(1.03) !important;
  z-index: 5;
}

/* Photo frame tilts on hover, gently sways always */
body.silly .photo-frame {
  animation: funFrameSway 6s ease-in-out infinite;
  transition: transform .3s ease;
}
body.silly .photo-frame:hover { transform: rotate(3deg) scale(1.04); animation: none; }

/* Buttons hop on hover */
body.silly .btn { transition: transform .15s ease, box-shadow .15s ease, background .2s ease; }
body.silly .btn:hover { animation: funBtnHop 0.5s ease-in-out; }

body.silly .card {
  border-style: dashed;
  border-width: 3px;
}

body.silly a:not(.btn):not(.brand):not([class*="reveal"]):not(#adultBanner a):not(.mainnav a):not(.sitefoot a) {
  text-decoration-style: wavy;
  text-decoration-thickness: 2px;
}

/* Page-head color bands get a slow pulse */
body.silly .pagehead { animation: funBandPulse 8s ease-in-out infinite; }

/* Brand mark in the topbar gets a subtle floating motion */
body.silly .brand__mark { animation: funMarkFloat 4s ease-in-out infinite; }

/* ---- The character show ---- */

.silly-stage {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 9990;
  overflow: hidden;
}
.silly-stage * { pointer-events: none; }

/* Sand tray at the bottom of the screen — now larger, clearly labeled */
.silly-tray {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 420px;
  max-width: calc(100vw - 40px);
  height: 140px;
  opacity: 0;
  transition: opacity .5s ease, bottom .5s ease;
}
body.silly .silly-tray {
  opacity: 1;
  bottom: 18px;
  animation: sillyTrayBob 3s ease-in-out infinite;
}

/* Tray collection — absolute positioning so each figure has its own play-logic spot */
.silly-tray-collection {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.silly-tray-item {
  position: absolute;
  display: inline-block;
  transform-origin: center;
  pointer-events: none;
  animation: sillyTrayItemPop .55s cubic-bezier(.2, 1.6, .4, 1) both;
}
.silly-tray-item svg { width: 100%; height: auto; display: block; }
@keyframes sillyTrayItemPop {
  0%   { transform: translate(-50%, -50%) scale(.2) rotate(var(--rot, 0deg)); opacity: 0; }
  60%  { transform: translate(-50%, -50%) scale(1.1) rotate(var(--rot, 0deg)); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1) rotate(var(--rot, 0deg)); opacity: 1; }
}

/* A traveling character */
.silly-char-fly {
  position: absolute;
  width: 80px; height: 80px;
  will-change: transform;
  opacity: 0;
}

/* Sparkle cursor trail */
.silly-sparkle {
  position: fixed;
  pointer-events: none;
  z-index: 99990;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-yellow);
  box-shadow: 0 0 6px var(--c-yellow-deep);
  opacity: 0.9;
  animation: sillySparkleFade 0.7s ease-out forwards;
}

/* Stars that gently float in silly mode */
.silly-ambient {
  position: fixed;
  top: 80px; left: 12px;
  font-size: 1.8rem;
  z-index: 9985;
  pointer-events: none;
  animation: sillyFloat 6s ease-in-out infinite;
  opacity: 0;
}
body.silly .silly-ambient { opacity: 1; }
.silly-ambient.right {
  left: auto; right: 18px;
  top: auto; bottom: 100px;
  font-size: 1.6rem;
  animation-duration: 7s;
  animation-delay: 1s;
}

/* ---- Keyframes ---- */

@keyframes sillyWiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-1.2deg); }
  75% { transform: rotate(1.2deg); }
}
@keyframes sillyCharBounce {
  0%, 100% { transform: translateY(0) rotate(0); }
  30% { transform: translateY(-3px) rotate(-6deg); }
  60% { transform: translateY(1px) rotate(4deg); }
}
@keyframes sillyBtnHop {
  0%, 100% { transform: translateY(-2px) rotate(0); }
  40% { transform: translateY(-8px) rotate(-3deg); }
  70% { transform: translateY(-2px) rotate(2deg); }
}
@keyframes sillyHouseSway {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}
@keyframes sillyTrayBob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-4px); }
}
@keyframes sillySparkleFade {
  0% { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.3) translateY(6px); }
}
@keyframes sillyFloat {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50% { transform: translateY(-10px) rotate(5deg); }
}

/* ---- New v4 choreographed keyframes (layered rhythms) ---- */

/* Three different heading wiggles, each combined with a pumping/scaling rhythm */
@keyframes funWiggleA {
  0%, 100% { transform: rotate(0) scale(1); }
  35%      { transform: rotate(-1.6deg) scale(1.06); }
  70%      { transform: rotate(1.4deg) scale(0.97); }
}
@keyframes funWiggleB {
  0%, 100% { transform: rotate(0) translateX(0) scale(1); }
  20%      { transform: rotate(1deg) translateX(1px) scale(1.04); }
  60%      { transform: rotate(-1.2deg) translateX(-1px) scale(0.98); }
}
@keyframes funWiggleC {
  0%, 100% { transform: skewX(0deg) scale(1); }
  50%      { transform: skewX(1.5deg) scale(1.05); }
}

/* House: combined sway + breathing scale */
@keyframes funHouseSway {
  0%, 100% { rotate: -2deg; }
  50%      { rotate: 2deg; }
}
@keyframes funHouseBreathe {
  0%, 100% { scale: 1; }
  50%      { scale: 1.025; }
}
@keyframes funHousePulse {
  0%, 100% { filter: brightness(1) saturate(1); }
  25%      { filter: brightness(1.05) saturate(1.15); }
  75%      { filter: brightness(0.98) saturate(1.1); }
}

/* Cards drift on two different cycles */
@keyframes funCardDriftA {
  0%, 100% { transform: rotate(-1.4deg) translateY(0); }
  40%      { transform: rotate(0.6deg) translateY(-3px); }
  70%      { transform: rotate(-0.4deg) translateY(2px); }
}
@keyframes funCardDriftB {
  0%, 100% { transform: rotate(1.4deg) translateY(0); }
  35%      { transform: rotate(-0.7deg) translateY(2px); }
  75%      { transform: rotate(0.5deg) translateY(-3px); }
}

/* Photo frame sway */
@keyframes funFrameSway {
  0%, 100% { transform: rotate(-1.5deg); }
  50%      { transform: rotate(1.5deg); }
}

/* Button hop */
@keyframes funBtnHop {
  0%, 100% { transform: translateY(-2px) rotate(0); }
  40%      { transform: translateY(-9px) rotate(-3deg); }
  70%      { transform: translateY(-2px) rotate(2deg); }
}

/* Color band slow pulse */
@keyframes funBandPulse {
  0%, 100% { filter: brightness(1) saturate(1); }
  50%      { filter: brightness(1.06) saturate(1.18); }
}

/* Brand mark float */
@keyframes funMarkFloat {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-3px) rotate(-4deg); }
}

/* Owl glides in with a gentle figure-eight then lands */
@keyframes birdyGlide {
  0%   { opacity: 0; transform: translate(-100px, 18vh) rotate(-6deg) scale(.9); }
  10%  { opacity: 1; }
  30%  { transform: translate(28vw, 6vh) rotate(8deg) scale(1); }
  50%  { transform: translate(48vw, 22vh) rotate(-6deg) scale(1); }
  70%  { transform: translate(68vw, 10vh) rotate(8deg) scale(1); }
  85%  { opacity: 1; transform: translate(calc(50vw - 40px), calc(100vh - 200px)) rotate(0deg) scale(.7); }
  100% { opacity: 0; transform: translate(calc(50vw - 40px), calc(100vh - 170px)) rotate(0deg) scale(.4); }
}

/* Character paths — each character journeys across and lands at the tray.
   The final keyframe drops them into position above the tray (y = 100vh - 160px),
   and then the JS whisks the traveling element away and adds a permanent
   "collected" figurine to the tray. */
@keyframes flyAcrossRight {
  0%   { opacity: 0; transform: translate(-120px, 0) rotate(-8deg) scale(1); }
  10%  { opacity: 1; }
  35%  { transform: translate(35vw, -12vh) rotate(6deg) scale(1); }
  60%  { transform: translate(65vw, -4vh) rotate(-4deg) scale(1); }
  85%  { opacity: 1; transform: translate(calc(50vw - 40px), calc(100vh - 200px)) rotate(12deg) scale(0.7); }
  100% { opacity: 0; transform: translate(calc(50vw - 40px), calc(100vh - 170px)) rotate(0deg) scale(0.4); }
}
@keyframes flyAcrossLeft {
  0%   { opacity: 0; transform: translate(110vw, 20vh) rotate(8deg) scale(1); }
  10%  { opacity: 1; }
  40%  { transform: translate(60vw, 8vh) rotate(-6deg) scale(1); }
  65%  { transform: translate(30vw, 14vh) rotate(5deg) scale(1); }
  85%  { opacity: 1; transform: translate(calc(50vw - 40px), calc(100vh - 200px)) rotate(-8deg) scale(0.7); }
  100% { opacity: 0; transform: translate(calc(50vw - 40px), calc(100vh - 170px)) rotate(0deg) scale(0.4); }
}
@keyframes bunnyHop {
  0%   { opacity: 0; transform: translate(-80px, calc(100vh - 180px)); }
  8%   { opacity: 1; }
  16%  { transform: translate(10vw, calc(100vh - 220px)) rotate(-5deg); }
  24%  { transform: translate(18vw, calc(100vh - 180px)) rotate(0deg); }
  32%  { transform: translate(26vw, calc(100vh - 220px)) rotate(-5deg); }
  40%  { transform: translate(34vw, calc(100vh - 180px)) rotate(0deg); }
  48%  { transform: translate(42vw, calc(100vh - 220px)) rotate(-5deg); }
  65%  { transform: translate(50vw, calc(100vh - 180px)) rotate(0deg); }
  85%  { opacity: 1; transform: translate(calc(50vw - 40px), calc(100vh - 200px)) rotate(0deg) scale(0.7); }
  100% { opacity: 0; transform: translate(calc(50vw - 40px), calc(100vh - 170px)) rotate(0deg) scale(0.4); }
}
@keyframes rocketHouse {
  0%   { opacity: 0; transform: translate(30vw, 100vh) rotate(0deg) scale(1); }
  10%  { opacity: 1; transform: translate(30vw, 80vh) rotate(0deg) scale(1); }
  40%  { transform: translate(50vw, 30vh) rotate(8deg) scale(1.05); }
  60%  { transform: translate(70vw, 10vh) rotate(-4deg) scale(1); }
  85%  { opacity: 1; transform: translate(calc(50vw - 40px), calc(100vh - 200px)) rotate(0deg) scale(0.7); }
  100% { opacity: 0; transform: translate(calc(50vw - 40px), calc(100vh - 170px)) rotate(0deg) scale(0.4); }
}
@keyframes paperPlaneGlide {
  0%   { opacity: 0; transform: translate(-100px, 15vh) rotate(10deg); }
  12%  { opacity: 1; }
  30%  { transform: translate(25vw, 8vh) rotate(-5deg); }
  50%  { transform: translate(45vw, 22vh) rotate(12deg); }
  70%  { transform: translate(65vw, 16vh) rotate(-8deg); }
  85%  { opacity: 1; transform: translate(calc(50vw - 40px), calc(100vh - 200px)) rotate(0deg) scale(0.7); }
  100% { opacity: 0; transform: translate(calc(50vw - 40px), calc(100vh - 170px)) rotate(0deg) scale(0.4); }
}
@keyframes kiteBounce {
  0%   { opacity: 0; transform: translate(110vw, 30vh) rotate(-15deg); }
  10%  { opacity: 1; }
  30%  { transform: translate(70vw, 15vh) rotate(10deg); }
  50%  { transform: translate(50vw, 25vh) rotate(-10deg); }
  70%  { transform: translate(30vw, 12vh) rotate(15deg); }
  85%  { opacity: 1; transform: translate(calc(50vw - 40px), calc(100vh - 200px)) rotate(0deg) scale(0.7); }
  100% { opacity: 0; transform: translate(calc(50vw - 40px), calc(100vh - 170px)) rotate(0deg) scale(0.4); }
}

/* Rocket flame */
.silly-rocket-flame {
  transform-origin: 50% 0;
  animation: flameFlicker .12s infinite alternate;
}
@keyframes flameFlicker {
  0%   { transform: scaleY(1) scaleX(1); }
  100% { transform: scaleY(1.3) scaleX(.9); }
}

@media (prefers-reduced-motion: reduce) {
  body.silly *, body.silly *::before, body.silly *::after { animation: none !important; transition: none !important; }
}