/* Paper scenery is clipped to the outer margins. The device and text keep their own plane. */
.has-paper-margins { --paper-unfold:1; --paper-travel:.5; isolation:isolate; }
.paper-margins { position:absolute; inset:0; z-index:-1; pointer-events:none; --paper-mid:#c4d2ab; --paper-bright:#e7e7cb; --paper-dark:#92b18d; --paper-edge:#f2edda; --gutter:max(58px,calc((100vw - 1180px)/2 - 18px)); }
.hero>.paper-margins,.site-footer>.paper-margins { left:calc((100% - 100vw)/2); right:calc((100% - 100vw)/2); }
.margin-clip { position:absolute; top:0; bottom:0; width:var(--gutter); overflow:clip; perspective:900px; }
.margin-left { left:0; }
.margin-right { right:0; }
.margin-drift { position:absolute; width:clamp(160px,17vw,290px); height:320px; top:28%; transform:translateY(calc((.5 - var(--paper-travel))*110px)); }
.margin-left .margin-drift { right:18px; }
.margin-right .margin-drift { left:18px; top:51%; }
.margin-fan { width:100%; height:100%; position:relative; transform:rotate(-22deg); transform-origin:50% 100%; filter:drop-shadow(5px 9px 5px #4a482116); }
.margin-right .margin-fan { transform:rotate(25deg); }
.margin-petal { position:absolute; width:39%; height:85%; left:31%; bottom:0; transform-origin:50% 100%; transform:rotate(calc(var(--blade-angle)*var(--paper-unfold))) rotateY(calc((1 - var(--paper-unfold))*77deg)); }
.petal-breathe { width:100%; height:100%; transform-origin:50% 100%; animation:paper-breathe 12s ease-in-out infinite; animation-delay:calc(var(--blade)*-1.4s); }
.margin-petal svg { width:100%; height:100%; overflow:visible; }
.margin-petal:nth-child(even) { filter:brightness(.96); }
.fan-binding { position:absolute; width:15px; height:15px; border:2px solid var(--paper-edge); left:calc(50% - 8px); bottom:-4px; background:var(--paper-mid); clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); }
.margin-bird { width:100%; transform:translateX(calc((1 - var(--paper-unfold))*60px)) rotate(-14deg); filter:drop-shadow(3px 9px 4px #4b346f16); }
.margin-bird>svg { width:100%; overflow:visible; animation:paper-hover 14s ease-in-out infinite; }
.bird-wing { transform-box:view-box; transform-origin:50% 70%; }
.wing-left { transform:rotateY(calc((1 - var(--paper-unfold))*80deg)); animation:wing-left-rest 14s ease-in-out infinite; }
.wing-right { transform:rotateY(calc((1 - var(--paper-unfold))*-80deg)); animation:wing-right-rest 14s ease-in-out infinite; }
.margin-ribbons { position:relative; width:100%; height:100%; transform:rotate(-18deg); filter:drop-shadow(4px 7px 4px #5c294714); }
.margin-right .margin-ribbons { transform:rotate(24deg); }
.paper-ribbon { position:absolute; width:33%; height:88%; left:calc(12% + var(--ribbon)*22%); top:calc(var(--ribbon)*6%); transform-origin:50% 100%; transform:translateY(calc((1 - var(--paper-unfold))*190px)) rotate(calc((var(--ribbon) - 1)*18deg*var(--paper-unfold))); }
.ribbon-piece { display:block; position:absolute; width:100%; transform-origin:50% 100%; background:linear-gradient(90deg,var(--paper-mid) 0 49%,var(--paper-bright) 50% 100%); box-shadow:inset 1px 0 0 var(--paper-edge); }
.ribbon-top { height:46%; top:0; clip-path:polygon(0 10%,100% 0,100% 100%,0 86%); transform:rotateX(calc((1 - var(--paper-unfold))*85deg)); animation:ribbon-curl 16s ease-in-out infinite; }
.ribbon-middle { height:30%; top:40%; clip-path:polygon(0 0,100% 22%,100% 100%,0 78%); background:linear-gradient(75deg,var(--paper-dark) 0 49%,var(--paper-mid) 50%); }
.ribbon-tail { height:35%; top:63%; clip-path:polygon(0 0,100% 20%,100% 94%,50% 80%,0 100%); }
.margins-hero { --paper-mid:#dacaac; --paper-bright:#eee2c4; --paper-dark:#b9b697; }
.margins-hero .margin-left .margin-drift { top:62%; width:180px; height:210px; right:32px; }
.margins-hero .margin-right .margin-drift { top:8%; opacity:.65; }
.margins-reader { z-index:0; --gutter:max(95px,calc((100vw - 930px)/2)); --paper-mid:#7b9b7a; --paper-bright:#b7c9a4; --paper-dark:#4a755d; --paper-edge:#c9d7b3; }
.margins-reader .margin-left .margin-drift { top:44%; right:30px; }
.margins-reader .margin-right .margin-drift { top:15%; left:40px; width:170px; height:240px; }
.margins-words { --paper-mid:#cbb6dd; --paper-bright:#e8d7ef; --paper-dark:#9e80bc; --paper-edge:#f9ebf6; }
.margins-words .margin-left .margin-drift { top:45%; height:265px; width:210px; }
.margins-words .margin-right .margin-drift { top:12%; width:190px; }
.margins-library { --paper-mid:#dca990; --paper-bright:#f2d8b9; --paper-dark:#b97e6d; --paper-edge:#ffebd2; }
.margins-library .margin-left .margin-drift { top:17%; }
.margins-library .margin-right .margin-drift { top:54%; height:235px; width:200px; }
.margins-launch { --paper-mid:#baacd0; --paper-bright:#e0cee6; --paper-dark:#907ca6; --paper-edge:#f2e6eb; }
.margins-launch .margin-left .margin-drift { top:18%; }
.margins-launch .margin-right .margin-drift { top:59%; height:220px; }
.margins-footer { --paper-mid:#a7c6c3; --paper-bright:#d9e2d1; --paper-dark:#789d9d; --paper-edge:#eaf0dd; }
.margins-footer .margin-drift { top:0; width:140px; height:155px; }
.margins-footer .margin-right .margin-drift { top:5px; left:10px; width:100px; }
.word-section,.site-footer { position:relative; }
.word-section>.section-wrap,.stories-section>.section-wrap { max-width:1180px; }
.word-content { position:relative; }
.word-flight { display:none; }
.book-reveal,.scene-heading,.scene-footer,.scene-caption { z-index:1; }
.scene-footer,.scene-caption { position:relative; }
.word-intro h2,.stories-heading h2 { font-weight:450; letter-spacing:-.035em; line-height:1.13; }
.word-intro>p:last-child,.stories-heading>p { font-size:16px; line-height:1.8; }
.story-book:nth-child(2),.story-book:nth-child(4) { transform:none; }
.site-header nav { gap:17px; }
.site-header nav>a.index-tab { position:relative; display:flex; align-items:center; gap:10px; padding:15px 20px 14px 16px; font-family:var(--serif); font-size:16px; font-weight:450; isolation:isolate; transition:transform .2s; }
.index-tab::before { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(100deg,#f2ead9,#fffaf0); box-shadow:0 1px 0 #c9bfa860,0 4px 8px #50492c07; clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%); }
.index-tab::after { content:''; position:absolute; top:0; right:0; width:10px; height:10px; background:#d9ae91; clip-path:polygon(0 0,100% 100%,0 100%); transform-origin:100% 0; transition:transform .2s; }
.tab-stories::after { background:#c5b1d2; }
.index-tab .paper-icon { width:22px; height:22px; opacity:.65; }
.tab-stories .paper-icon { width:17px; color:#566c57; }
.site-header nav>a.index-tab:hover { text-decoration:none; transform:translateY(-3px) rotate(-1deg); }
.index-tab:hover::after { transform:rotate(15deg); }
.nav-preview { font-size:13px; min-height:52px; }
.site-footer { min-height:184px; padding-block:38px 44px; border-top:0; gap:32px; }
.site-footer::before { content:''; position:absolute; height:3px; left:0; right:0; top:0; background:linear-gradient(#bdb69f66 0 1px,#fffaf0 1px 2px,transparent 2px); }
.site-footer>.footer-line { font-size:17px; color:#758671; }
.publisher-slip { position:relative; display:flex; align-items:center; gap:15px; padding:19px 30px 18px 20px; color:#355766; background:linear-gradient(100deg,#f8f3e9,#fffaf0); box-shadow:0 1px 0 #d3c7ac,0 5px 13px #5a4d2808; transform:rotate(-1.5deg); }
.publisher-slip>svg { width:33px; height:36px; }
.publisher-slip strong { display:block; font-family:var(--serif); font-weight:450; font-size:18px; letter-spacing:-.02em; }
.publisher-slip small { display:block; margin-top:5px; font-size:10px; letter-spacing:.12em; color:#667a7c; }
.publisher-slip>i { position:absolute; top:0; bottom:0; width:13px; right:0; border-left:1px solid #d3c6a63b; background:linear-gradient(100deg,transparent,#e6ddc855); }
.publisher-slip::after { content:''; position:absolute; width:18px; height:22px; right:22px; top:-6px; clip-path:polygon(0 0,100% 0,100% 100%,50% 77%,0 100%); background:linear-gradient(135deg,#b2cdd0 48%,#75949e 49%); }
.motion-paused .paper-margins * { animation-play-state:paused!important; }
@keyframes paper-breathe { 0%,100% { transform:rotate(0) rotateY(0); } 45%,55% { transform:rotate(2.3deg) rotateY(11deg); } }
@keyframes paper-hover { 0%,100% { translate:0 0; rotate:0deg; } 50% { translate:-5px -9px; rotate:2deg; } }
@keyframes wing-left-rest { 0%,35%,100% { rotate:0deg; } 60%,75% { rotate:-4deg; } }
@keyframes wing-right-rest { 0%,35%,100% { rotate:0deg; } 60%,75% { rotate:5deg; } }
@keyframes ribbon-curl { 0%,100% { rotate:0deg; } 50% { rotate:3deg; } }
@media (max-width:1100px) and (min-width:801px) {
  .site-header nav { gap:12px; }
  .site-header nav>a.index-tab { font-size:14px; padding:13px; }
  .book-reveal,.scene-footer { width:min(800px,78vw,calc((100svh - 310px)*1.376)); }
}
@media (max-width:800px) {
  .paper-margins { --gutter:60px; height:115px; bottom:auto; }
  .margin-drift,.margins-words .margin-left .margin-drift,.margins-library .margin-right .margin-drift,.margins-reader .margin-right .margin-drift { width:95px; height:120px; }
  .margin-left .margin-drift { top:-14px!important; right:19px; }
  .margin-right .margin-drift { top:3px!important; left:19px; }
  .margins-words .margin-right .margin-drift { width:80px; }
  .margins-hero .margin-left .margin-drift { width:90px; height:110px; }
  .margins-hero .margin-right { display:none; }
  .margins-reader { height:100%; --gutter:29px; }
  .margins-reader .margin-drift { top:52%!important; }
  .margins-footer { height:105px; }
  .margins-footer .margin-right .margin-drift { width:60px; left:26px; }
  .margin-petal { height:100%; }
  .site-header nav>a.index-tab { display:none; }
  .scene-heading h2 { font-size:clamp(34px,7.5vw,55px); line-height:1.15; }
  .scene-heading h2>span { display:block; }
  .scene-heading>p:last-child { font-size:13px; line-height:1.65; max-width:360px; }
  .scene-heading>p:last-child>span+span { margin-top:8px; }
  .book-reveal { width:100%; max-width:580px; }
  .scene-footer { width:100%; max-width:580px; font-size:11px; letter-spacing:0; gap:18px; }
  .scene-device { display:block; }
  .scene-device strong { display:block; margin-top:3px; font-size:13px; }
  .scene-device .paper-icon { display:none; }
  .scene-caption { font-size:9px; }
  .character-star,.character-bird { display:none; }
  .word-section { padding-top:116px; }
  .word-intro>p:last-child,.stories-heading>p { font-size:14px; line-height:1.75; }
  .stories-section { padding-top:112px; }
  .coming-section { padding-top:110px; }
  .site-footer { padding-block:37px 65px; gap:24px; }
  .publisher-slip { padding:14px 24px 14px 15px; gap:10px; }
  .publisher-slip strong { font-size:16px; }
  .publisher-slip>svg { width:26px; }
}
@media (max-width:500px) {
  .site-header { height:90px; }
  .nav-preview { font-size:11px; max-width:170px; gap:10px; line-height:1.4; }
  .site-footer .wordmark { font-size:25px; }
  .site-footer { gap:14px; }
  .publisher-slip { padding-inline:12px 19px; gap:7px; }
  .publisher-slip strong { font-size:14px; }
  .publisher-slip>svg { width:22px; }
}
@media (prefers-reduced-motion:reduce) {
  .paper-margins * { animation:none!important; }
  .margin-drift,.margin-petal,.bird-wing,.paper-ribbon,.ribbon-top { transition:none!important; }
}