/* ==========================================================================
   Samia Kids — loaded after samia.css on the Kids site only.
   Bigger type, brighter tints, rounder corners, the star character, the printed
   book covers, storyboard frames, the rules for parents. Everything else is samia.css.
   Every animation here is transform/opacity and stops under reduced motion.
   ========================================================================== */

/* Bigger type and brighter tints for small people ------------------------- */
:root {
  --fs-body: 1.125rem;
  --fs-lead: clamp(1.18rem, 1.06rem + .6vw, 1.45rem);
  --fs-h3: clamp(1.3rem, 1.12rem + .8vw, 1.75rem);
  --fs-small: .98rem;
  --fs-label: .8rem;
  --r: 8px; --r-lg: 14px;
  --sky: #BFDCFF; --lemon: #FFE97A; --mint: #BDF0CF; --lilac: #D9CCFF; --peach: #FFD2A6; --rose: #FFC4E0;
}
body { line-height: 1.62; }
p, li, .stats .l { text-wrap: pretty; }
.center .lead, .section-head.center .lead { text-wrap: balance; }
.lead { max-width: 32em; }
.btn { font-size: 1.02rem; }
.btn.lg { font-size: 1.14rem; }
.pill { font-size: .84rem; }
.hero.peach { background: var(--peach); }
.band.peach { background: var(--peach); } .band.lemon { background: var(--lemon); } .band.rose { background: var(--rose); } .band.sky { background: var(--sky); }
.marquee.pink { background: var(--pink); } .marquee.pink .marquee-track span::after { color: var(--paper); }
.caption.peach { background: var(--peach); } .caption.lemon { background: var(--lemon); }
.pill.peach { background: var(--peach); } .pill.lemon { background: var(--lemon); } .pill.pink { background: var(--pink); }

/* Drawn glyphs inside tiles and rules -------------------------------------- */
.glyph { width: 76px; height: 76px; display: block; flex: none; }
.tile .glyph { margin-bottom: 2px; }
.tile.big { padding: clamp(26px, 3vw, 40px); gap: 14px; }
.tile.big h3 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); }
.tile .link-arrow { margin-top: auto; padding-top: 8px; }

/* The world: one wide drawn scene in a frame ------------------------------- */
.world { border: var(--bw) solid var(--ink); border-radius: var(--r-lg); overflow: hidden; background: var(--sky); box-shadow: var(--shadow-lg); }
.world svg { width: 100%; height: auto; display: block; }

/* Book covers: photographs of the printed books (1100 x 850, the same files Samia Books uses), notes underneath */
.covers { align-items: start; }
.book-card { display: flex; flex-direction: column; gap: 14px; color: inherit; min-width: 0; }
.book-card .cover-art { position: relative; aspect-ratio: 1100 / 850; width: 100%; border: var(--bw) solid var(--ink); border-radius: 3px 6px 6px 3px; background: var(--paper-2); box-shadow: var(--shadow); overflow: hidden; transform-origin: 50% 100%; transition: transform .35s var(--spring), box-shadow .35s var(--ease); }
.book-card .cover-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.book-card .cover-art::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 14px; background: linear-gradient(90deg, rgba(21,19,26,.14), rgba(21,19,26,0)); pointer-events: none; }
.book-card:hover .cover-art, .book-card:focus-within .cover-art { transform: translateY(-6px) rotate(-1.5deg); box-shadow: var(--shadow-lg); }
.book-card:nth-child(even):hover .cover-art, .book-card:nth-child(even):focus-within .cover-art { transform: translateY(-6px) rotate(1.5deg); }
.book-card .meta { display: grid; gap: 8px; justify-items: start; }
.book-card .meta h3 { margin: 4px 0 0; }
.book-card .meta p { margin: 0; }
a.book-card:hover { text-decoration: none; }

/* Storyboard frames: three drawn panels with a caption each ---------------- */
.frames { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.frame { border: var(--bw) solid var(--ink); border-radius: var(--r); overflow: hidden; background: var(--paper-2); box-shadow: 3px 3px 0 var(--ink); min-width: 0; }
.frame svg { width: 100%; height: auto; display: block; border-bottom: var(--bw) solid var(--ink); }
.frame .cap { font-size: var(--fs-small); padding: 10px 14px; color: var(--ink-2); display: flex; gap: 10px; line-height: 1.4; }
.frame .cap b { color: var(--red); font-family: var(--display); font-weight: 900; font-size: 1.1em; }
.frames-note { font-size: .85rem; color: var(--muted); margin: 12px 0 0; }
@media (max-width: 640px) { .frames { grid-template-columns: minmax(0, 1fr); } }

/* The pilot: a big panel, copy beside the frames ---------------------------- */
.pilot { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(24px, 3.4vw, 44px); background: var(--paper-2); }
.pilot h3 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.6rem); line-height: 1; }
.pilot .facts { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--s2) 0; }
@media (max-width: 980px) { .pilot { grid-template-columns: minmax(0, 1fr); } }

/* How a film is made: line icons that draw themselves in ------------------- */
.makes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s2); }
.make { display: grid; gap: 10px; align-content: start; padding: 18px 16px 20px; border: var(--bw) solid var(--ink); border-radius: var(--r); background: var(--paper-2); box-shadow: 3px 3px 0 var(--ink); min-width: 0; }
.make svg { width: 56px; height: 56px; color: var(--ink); }
.make .n { font-family: var(--display); font-weight: 900; font-size: 1.1rem; color: var(--red); line-height: 1; }
.make h3 { margin: 0; font-size: 1.1rem; }
.make p { margin: 0; font-size: var(--fs-small); line-height: 1.45; }
@media (max-width: 1100px) { .makes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .makes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .make { padding: 14px 12px 16px; } }

/* The rules for parents: three big numbered panels ------------------------- */
.rules { display: grid; gap: var(--s3); }
.rule { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s2) var(--s3); align-items: start; padding: clamp(22px, 3vw, 36px); border: var(--bw) solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--shadow); background: var(--paper-2); }
.rule .n { font-family: var(--display); font-weight: 900; font-size: clamp(2.6rem, 2rem + 2.6vw, 4.4rem); line-height: .9; color: var(--red); letter-spacing: -.03em; font-variation-settings: "wdth" 76; }
.rule h3 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem); margin: 0 0 .3em; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rule .glyph { width: 56px; height: 56px; }
.rule ul { margin: var(--s2) 0 0; padding-left: 1.2em; display: grid; gap: 6px; }
.rule.lemon { background: var(--lemon); } .rule.sky { background: var(--sky); } .rule.mint { background: var(--mint); }
@media (max-width: 600px) { .rule { grid-template-columns: minmax(0, 1fr); } }

/* Always / never lists ------------------------------------------------------ */
.nevers { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: var(--fs-small); }
.nevers li { display: flex; gap: 10px; align-items: flex-start; }
.nevers li::before { content: "✕"; flex: none; width: 20px; height: 20px; border: 1.5px solid var(--ink); border-radius: 2px; background: var(--rose); color: var(--ink); font-weight: 900; font-size: .72rem; display: grid; place-items: center; margin-top: 4px; }
.checks li::before { margin-top: 4px; }

/* How to draw the star: four panels whose lines draw themselves ------------ */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }
.step { display: grid; gap: 10px; align-content: start; }
.step .panel { aspect-ratio: 1; display: grid; place-items: center; padding: 12px; background: var(--paper-2); }
.step .panel svg { width: 100%; height: 100%; }
.step .n { font-family: var(--display); font-weight: 900; font-size: 1.5rem; color: var(--red); line-height: 1; }
.step h3 { margin: 0; font-size: 1.2rem; }
.step p { margin: 0; font-size: var(--fs-small); }
@media (max-width: 980px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .steps { grid-template-columns: minmax(0, 1fr); max-width: 320px; margin-inline: auto; } }

/* The star's faces: a sheet of expressions -------------------------------- */
.faces { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s2); }
.face { display: grid; gap: 8px; justify-items: center; text-align: center; padding: 16px 10px 14px; border: var(--bw) solid var(--ink); border-radius: var(--r); background: var(--paper-2); box-shadow: 3px 3px 0 var(--ink); min-width: 0; }
.face svg { width: 100%; max-width: 110px; height: auto; }
.face b { font-family: var(--display); text-transform: uppercase; font-size: .95rem; color: var(--ink); letter-spacing: .02em; }
.face.lemon { background: var(--lemon); } .face.sky { background: var(--sky); } .face.mint { background: var(--mint); } .face.rose { background: var(--rose); } .face.lilac { background: var(--lilac); } .face.peach { background: var(--peach); }
@media (max-width: 980px) { .faces { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px) { .faces { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The star in the mark: the logo beside the explanation --------------------- */
.mark-note { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s3); align-items: center; padding: clamp(20px, 3vw, 32px); }
.mark-note img { width: 112px; height: 112px; }
@media (max-width: 480px) { .mark-note { grid-template-columns: minmax(0, 1fr); } .mark-note img { width: 88px; height: 88px; } }

/* The night band on the home page: small stars behind, the big star framed -- */
.band.night { overflow: hidden; }
.band.night .sky { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.band.night .wrap { position: relative; }
.night-art { border: var(--bw) solid var(--ink); border-radius: var(--r-lg); background: var(--night-2); box-shadow: 8px 8px 0 var(--sun), 8px 8px 0 2px var(--ink); overflow: hidden; max-width: 440px; width: 100%; margin-inline: auto; }
.night-art svg { width: 100%; height: auto; display: block; }

/* Contact tiles: the mailbox is the heading ----------------------------------- */
.mailbox { word-break: break-word; }
.mailbox h3 { font-family: var(--sans); text-transform: none; letter-spacing: 0; font-weight: 700; font-size: 1.1rem; font-variation-settings: normal; }

/* Motion that is only on this site ------------------------------------------- */
.float.slow { animation-duration: 9s; }
.twinkle.late { animation-delay: -2.5s; }
.bob { animation: bob 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-6px) rotate(3deg); } }
@media (prefers-reduced-motion: reduce) {
  .book-card .cover-art { transition: none; }
  .bob { animation: none !important; }
}
.nevers li > span { flex: 1; min-width: 0; }

/* Ink text on tints (brief rule 9): notes, links, arrows and form notes on the bright tints go ink ------ */
.tile:not(.paper):not(.ink):not(.red):not(.blue) { --muted: var(--ink-2); }
.tile:not(.paper):not(.ink):not(.red):not(.blue) a:not(.link-arrow):not(.btn) { color: var(--ink); text-decoration: underline; text-underline-offset: .16em; }
.tile:not(.paper):not(.ink):not(.red):not(.blue) .link-arrow .arrow { color: var(--ink); }
.band:is(.peach, .lemon, .sky, .mint, .lilac, .rose, .sun) .actions > .link-arrow .arrow { color: var(--ink); }
.band:not(.night):not(.ink) .form-note, .stats .l { color: var(--ink-2); }
.workflow > div::before { color: var(--ink); } /* the numerals sit on this site's brighter tints, where red falls under 3:1 */

/* Status pills sit at their own width inside a tile, not stretched across it */
.tile > .pill { align-self: flex-start; }