/* Homepage illustration. Movement stays inside the decorative scene. */
.storybook-hero { display:none; }
#planner[data-storybook="true"] .storybook-hero { display:block; position:relative; isolation:isolate; overflow:clip; height:460px; margin:0 -20px 20px; border:0; border-radius:0; }
#planner[data-storybook="true"] .planner-hero { display:none!important; }
body .storybook-copy { position:relative; z-index:2; padding:60px 0 0 20px; width:46%; }
body .storybook-copy h1 { font-family:Georgia,serif; font-size:clamp(36px,4.4vw,56px); line-height:1.08; letter-spacing:-1.4px; color:var(--ink); margin:0 0 20px; max-width:none; }
body .storybook-copy p { color:var(--ink); font-size:18px; line-height:1.6; max-width:330px; margin:0; }
.storybook-scene { position:absolute; inset:0; pointer-events:none; }
.storybook-scene img { position:absolute; display:block; object-fit:contain; max-width:none; }
.storybook-sky { position:absolute; inset:-80px; background-image:repeating-linear-gradient(0deg,transparent 0 2px,#8d8d7110 2px 3px),repeating-linear-gradient(90deg,transparent 0 2px,#8d8d7110 2px 3px); mask-image:linear-gradient(transparent,#000 25%,#000 70%,transparent); }
.storybook-clouds { width:240px; height:160px; top:3px; right:14%; }
.storybook-hills { width:110%; height:410px; bottom:-96px; right:-6%; object-fit:fill!important; }
.storybook-barn { width:300px; height:230px; bottom:86px; left:46%; }
.storybook-path { width:170px; height:200px; bottom:-55px; left:calc(46% + 10px); }
.storybook-playground { width:320px; height:230px; bottom:27px; right:0; }
.storybook-meadow { width:220px; height:235px; bottom:-15px; left:1%; }
.storybook-butterfly { width:56px; height:56px; top:140px; right:13%; }
.storybook-hero::after { content:""; position:absolute; inset:auto 0 0; height:48px; background:linear-gradient(transparent,var(--paper)); pointer-events:none; z-index:1; }
#planner[data-storybook-theme="guides"] .guides-panel>.board-heading { display:none; }
body .brand-mark { width:36px; min-width:36px; height:40px; overflow:visible; }
body .brand-mark img { width:36px; height:36px; object-fit:contain; display:block; }
@media(min-width:701px) and (max-width:1000px) {
  .storybook-barn { width:240px; left:43%; }
  .storybook-path { left:calc(43% - 14px); bottom:-51px; }
  .storybook-playground { width:260px; right:-2%; }
  .storybook-meadow { width:170px; height:200px; }
}
@media(max-width:700px) {
  #planner[data-storybook="true"] .storybook-hero { height:320px; margin:0 -10px 18px; }
  body .storybook-copy { padding:24px 10px 0; width:100%; }
  body .storybook-copy h1 { font-size:clamp(26px,8vw,33px); line-height:1.07; margin-bottom:10px; letter-spacing:-.7px; }
  body .storybook-copy p { font-size:15px; line-height:1.45; max-width:300px; }
  .storybook-clouds { width:95px; height:65px; top:125px; right:3%; }
  .storybook-hills { width:120%; height:190px; bottom:-31px; right:-10%; }
  .storybook-barn { width:145px; height:115px; bottom:40px; left:12%; }
  .storybook-path { width:75px; height:105px; bottom:-34px; left:calc(12% + 6px); }
  .storybook-playground { width:155px; height:120px; bottom:3px; right:0; }
  .storybook-meadow { width:86px; height:110px; bottom:-8px; left:0; }
  .storybook-butterfly { width:25px; height:25px; top:165px; right:40%; }
  .storybook-hero::after { height:24px; }
  body .brand-mark { width:30px; min-width:30px; }
  body .brand-mark img { width:30px; height:30px; }
}
@media(prefers-reduced-motion:reduce) { .storybook-scene [data-depth] { transform:none!important; } }

/* Each destination has its own composition and decorative assets. */
.storybook-scene>div[class^="scene-"] { position:absolute; inset:0; display:none; }
#planner[data-storybook-theme="places"] .scene-places,
#planner[data-storybook-theme="weekend"] .scene-weekend,
#planner[data-storybook-theme="guides"] .scene-guides { display:block; }
.fair-cloth { position:absolute; inset:-90px; background:repeating-linear-gradient(90deg,#c6774a07 0 28px,transparent 28px 56px); mask-image:linear-gradient(transparent,#000 30%,#000 80%,transparent); }
.fair-bunting { width:580px; height:240px; right:0; top:-50px; object-fit:fill!important; }
.fair-balloons { width:105px; height:170px; right:3%; top:115px; }
.fair-tents { width:580px; height:340px; right:3%; bottom:0; }
.fair-tickets { width:250px; height:150px; left:5%; bottom:8px; }
.table-cloth { position:absolute; inset:-90px; background-image:repeating-linear-gradient(0deg,#6e846512 0 1px,transparent 1px 5px),repeating-linear-gradient(90deg,#6e846512 0 1px,transparent 1px 5px); mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent); }
.table-map { width:500px; height:335px; right:3%; top:18px; rotate:-8deg; }
.table-notebook { width:280px; height:190px; right:20%; bottom:12px; rotate:9deg; }
.table-tools { width:205px; height:150px; right:0; bottom:35px; rotate:-12deg; }
@media(min-width:701px) and (max-width:1000px) {
  .fair-tents { width:420px; height:280px; right:0; }
  .fair-bunting { width:380px; right:0; }
  .fair-balloons { width:80px; right:2%; }
  .table-map { width:350px; height:260px; right:2%; top:45px; }
  .table-notebook { width:230px; right:17%; }
  .table-tools { width:150px; right:0; }
}
@media(max-width:700px) {
  .fair-bunting { width:220px; height:80px; right:1%; top:126px; }
  .fair-balloons { width:42px; height:72px; right:0; top:165px; }
  .fair-tents { width:230px; height:150px; right:0; bottom:0; }
  .fair-tickets { width:105px; height:75px; left:0; bottom:6px; }
  .table-map { width:195px; height:130px; right:8%; top:151px; rotate:-7deg; }
  .table-notebook { width:132px; height:90px; left:3%; right:auto; bottom:5px; }
  .table-tools { width:82px; height:64px; right:0; bottom:5px; }
}