/* The real pages and signup note sit on an illustrated woodland desk. */
.landing-page.is-coloring-room {overflow:hidden}
.landing-page.is-coloring-room .site-header {display:none}
.landing-page.is-destination main > .coloring-room {
  position:relative;display:block;padding:0;margin:0;max-width:none;height:100dvh;
  overflow:hidden;background:#795030 url('assets/optimized/coloring-craft-desk-v1-24379d99bb62-1672w.webp') center/cover no-repeat;
}
.craft-desk {position:relative;width:100%;height:100%}
.craft-back {
  position:absolute;top:max(14px,env(safe-area-inset-top));left:20px;z-index:3;
  padding:12px 22px;color:#382615;font:500 clamp(15px,1.5vw,22px) Fredoka,sans-serif;
  background:linear-gradient(175deg,#e5b66d,#bc7f3f);border:2px solid #8b562a;
  border-radius:6px 12px 7px 5px;box-shadow:0 3px 0 #704221,0 6px 12px #32190950;
  transform:rotate(-2deg);text-decoration:none;
}
.coloring-room .craft-note {
  position:absolute;left:9%;top:24%;width:35%;max-height:71%;overflow:auto;
  padding:clamp(18px,2.4vw,38px);color:#47351f;text-align:left;
  background:linear-gradient(110deg,#fff6df,#f5e6bb);border-radius:2px 6px 4px 3px;
  box-shadow:3px 8px 18px #32190955;transform:rotate(-2deg);
}
.craft-note::before {content:'';position:absolute;width:32%;height:19px;background:#d9bc778a;left:34%;top:0;transform:rotate(2deg)}
.coloring-room h2 {font-family:Fredoka,sans-serif;font-size:clamp(24px,3vw,42px);line-height:1.08;letter-spacing:0;margin:7px 0 12px;color:#4a5b31}
.coloring-room .eyebrow {font-size:12px;color:#86623a;margin:0}
.coloring-room .craft-intro > p:not(.eyebrow) {font-size:clamp(13px,1.25vw,17px);line-height:1.45;margin:0 0 20px}
.coloring-room .craft-folder {
  display:flex;position:relative;flex-direction:column;gap:5px;align-items:center;justify-content:center;
  width:100%;padding:19px 12px 14px;margin-top:22px;min-height:105px;
  background:linear-gradient(165deg,#e2b566,#c79344);border:1px solid #a67936;
  border-radius:0 7px 5px 5px;color:#443216;box-shadow:0 4px 4px #63442135;
  font:500 clamp(17px,1.6vw,23px) Fredoka,sans-serif;transform:none;
}
.craft-folder::before {content:'';position:absolute;left:-1px;top:-13px;width:42%;height:13px;background:#dfb063;border:1px solid #a67936;border-bottom:0;border-radius:6px 9px 0 0}
.craft-folder small {font:400 12px 'DM Sans',sans-serif}
.folder-stamp {font-size:12px;letter-spacing:1px;text-transform:uppercase;opacity:.8}
.coloring-room .craft-folder:hover {background:linear-gradient(165deg,#edc17b,#d9a657)}
.craft-note:has(#coloring-signup:not([hidden])) .craft-intro,
.craft-note #coloring-toggle[aria-expanded="true"] {display:none}
.coloring-room .coloring-signup {position:relative;padding:0;margin:0;max-width:none;background:none;border:0;border-radius:0}
.craft-note-close,.craft-preview-close {position:absolute;right:0;top:0;border:0;background:transparent;color:#594328;font:28px Fredoka,sans-serif;padding:0 8px;min-height:44px;min-width:44px;cursor:pointer}
.coloring-room .craft-note-title {font:500 clamp(20px,2vw,28px) Fredoka,sans-serif;color:#4a5b31;margin:0 36px 15px 0;line-height:1.15}
.coloring-room #coloring-form > label:first-of-type {font-size:14px;line-height:1.3}
.coloring-room #coloring-email {background:#fffaf0;border:0;border-bottom:2px solid #a88b5b;border-radius:0;padding:10px 5px;font-size:16px;width:100%;margin:8px 0 10px}
.coloring-room .coloring-consent {font-size:13px;line-height:1.4;gap:9px}
.coloring-room .coloring-consent input {accent-color:#577443;flex-shrink:0}
.coloring-room .coloring-privacy {font-size:12px;line-height:1.4;margin:10px 0}
.coloring-room .coloring-submit {border-radius:5px;padding:10px 16px;font:500 17px Fredoka,sans-serif;background:#577443;min-height:44px}
.coloring-room .coloring-status {font-size:13px;margin:7px 0 0}
.coloring-room .coloring-unlocked p {font-size:15px;line-height:1.4}
.coloring-room .craft-pages {position:absolute;left:51%;top:31%;width:41%;height:52%;max-width:none;margin:0;gap:7%;align-items:center}
.coloring-room .color-preview {cursor:pointer;border:0;padding:0;width:46%;max-height:100%;border-radius:2px;overflow:hidden;box-shadow:4px 7px 12px #32190970;background:#fffdf4}
.coloring-room .color-preview:nth-child(2) {transform:rotate(6deg) translateY(10px)}
.coloring-room .color-preview img {border-radius:0;padding:7px;object-fit:contain}
.coloring-room .preview-watermark {font-size:10px;background:#fff9e7e8;color:#655333}
.coloring-room button:focus-visible,.craft-back:focus-visible {outline:3px solid #fff4bd;outline-offset:4px}
.craft-preview-dialog {width:min(90vw,560px);max-height:92dvh;overflow:auto;padding:22px;background:#fff6df;border:0;border-radius:5px;box-shadow:0 15px 70px #1d100a90}
.craft-preview-dialog::backdrop {background:#28180cb0}
.craft-preview-dialog h2 {font:500 22px Fredoka,sans-serif;margin:0 42px 16px 0;color:#4a5b31}
.craft-preview-dialog img {display:block;width:100%;max-height:68dvh;object-fit:contain;background:white}
.craft-preview-dialog p {font-size:13px;margin:12px 0 0;text-align:center;color:#715b3b}
.craft-preview-close {right:8px;top:8px}
@media (orientation:portrait) {
  .coloring-room .craft-pages {left:17%;top:12%;width:68%;height:27%;gap:9%}
  .coloring-room .color-preview {width:43%;height:auto;aspect-ratio:3/4}
  .coloring-room .craft-note {left:10%;top:43%;width:80%;max-height:54%;padding:22px}
  .coloring-room h2 {font-size:clamp(24px,5vw,36px)}
  .coloring-room .craft-intro > p:not(.eyebrow) {font-size:14px;margin-bottom:15px}
  .coloring-room .craft-folder {min-height:95px;font-size:21px}
  .craft-back {left:14px;padding:10px 15px;font-size:16px}
}
@media (orientation:landscape) and (max-height:550px) {
  .coloring-room .craft-note {top:19%;max-height:78%;left:7%;width:40%;padding:16px}
  .coloring-room h2 {font-size:24px;margin-bottom:8px}
  .coloring-room .craft-intro > p:not(.eyebrow) {font-size:13px;margin-bottom:8px}
  .coloring-room .craft-folder {min-height:70px;padding:8px;margin-top:18px;font-size:17px;gap:2px}
  .coloring-room .craft-pages {top:24%;height:68%;left:53%;width:38%}
  .craft-back {font-size:14px;padding:8px 13px;top:8px}
  .coloring-room .craft-note-title {font-size:20px;margin-bottom:8px}
}
@media (prefers-reduced-motion:no-preference) {
  .coloring-room .color-preview {transition:transform .2s}
  .coloring-room .color-preview:hover {transform:rotate(-1deg) translateY(-5px)}
}