/* A notebook with three short chapters, made from flat shapes and paper. */
.title-line{display:block}
.hero-copy>h1,.page-intro h1{animation:none}
.js-motion .title-line{animation:title-unfold .85s var(--ease) both;animation-delay:calc(var(--title-order,0)*95ms + 60ms)}
@keyframes title-unfold{from{opacity:0;transform:translate3d(0,24px,0)}to{opacity:1;transform:none}}
.js-motion .picture-reveal:not(.picture-seen) img{opacity:.15;transform:translate3d(20px,0,0) scale(1.03);clip-path:inset(0 100% 0 0)}
.picture-reveal img{transition:transform 1.1s var(--ease),opacity .65s,clip-path 1.1s var(--ease)}
.hero-slide figcaption{transition:transform .75s var(--ease),opacity .45s}
.hero-slide:not(.active) figcaption{transform:translateY(18px);opacity:0}
.text-link>span{transition:transform .3s var(--ease)}
@media(hover:hover) and (pointer:fine){.text-link:hover>span{transform:translate(3px,-3px)}}
.word-ribbon{display:flex;align-items:center;gap:28px;padding:18px 22px;background:#e6eadc;border-block:1px solid #bfc9b0;overflow:hidden;margin-top:70px}
.ribbon-caption{font-size:11px;line-height:1.7;flex:0 0 146px}
.ribbon-window{overflow:hidden;flex:1;min-width:0;mask-image:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent)}
.ribbon-track{display:flex;width:max-content;animation:quiet-words 32s linear infinite;animation-play-state:paused}
.ribbon-track>div{display:flex;align-items:center;gap:42px;padding-right:42px;flex:none}
.ribbon-track span{font-size:23px;font-weight:440;letter-spacing:-.035em;white-space:nowrap}
.ribbon-track i{font-style:normal;color:#8d9e77;font-size:20px}
.ribbon-visible:not(.ribbon-paused) .ribbon-track{animation-play-state:running}
.ribbon-toggle,.story-next{display:grid;place-items:center;flex:none;width:44px;height:44px;border:1px solid #acb79d;border-radius:50%;font-size:18px}
.ribbon-toggle{font-size:14px}
@keyframes quiet-words{to{transform:translate3d(-50%,0,0)}}
.story-book{--chapter-position:0;margin-block:50px 0;padding:36px;background:#e9ecdf;border:1px solid #d3dac7}
.story-book-head{display:flex;justify-content:space-between;align-items:center;gap:25px;padding-bottom:24px}
.story-book-head h2{font-size:26px;margin-top:9px}
.story-book-head .text-link{font-size:12px}
.story-stage{border:1px solid #d6dacd;background:var(--paper);overflow:hidden;position:relative}
.story-frame{display:grid;grid-template-columns:1.04fr 1fr;min-height:410px;gap:30px;align-items:center;padding:45px;border-bottom:1px solid var(--line)}
.story-frame:last-child{border-bottom:0}
.story-frame-copy{min-width:0}
.story-frame-copy h3{font-size:clamp(27px,2.7vw,40px);line-height:1.55;margin-top:28px;letter-spacing:-.045em}
.story-frame-copy p{font-size:16px;line-height:1.95;max-width:425px;color:var(--muted);margin-top:25px}
.story-ready .story-stage{display:grid}
.story-ready .story-frame{grid-area:1/1;border:0;opacity:0;visibility:hidden;pointer-events:none;transform:translate3d(38px,0,0);transition:opacity .4s ease,transform .8s var(--ease),visibility 0s .8s}
.story-ready .story-frame.is-active{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .65s .1s,transform .95s var(--ease),visibility 0s}
.story-ready .story-frame.is-active h3 mark{animation:marker-stroke .95s .12s both}
.story-controls{display:flex;align-items:center;gap:28px;padding-top:20px}
.story-buttons{display:flex;gap:14px;flex:none}
.story-buttons button{font-size:11px;min-height:44px;padding:9px 12px;border-bottom:2px solid transparent;color:var(--muted);transition:background .25s,color .25s,border-color .35s}
.story-buttons button span{margin-left:5px}
.story-buttons button[aria-pressed=true]{background:#dce4cd;color:var(--ink);border-color:#879a6e}
.story-progress{flex:1;height:1px;background:#c4cdb6}
.story-progress span{display:block;width:33.333%;height:2px;background:#81946d;transform:translateX(calc(var(--chapter-position)*100%));transition:transform .85s var(--ease)}
.story-announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.story-art{min-width:0;display:grid;place-items:center;min-height:320px;position:relative;background:#ecede4;border-radius:48% 48% 4px 4px}
.story-frame:nth-child(2) .story-art{background:#eeead8}
.story-frame:nth-child(3) .story-art{background:#ebe6ed}
.name-art{position:relative;width:290px;height:290px;display:grid;place-items:center}
.name-art img{width:170px;height:170px;position:relative;z-index:1}
.orbit{position:absolute;border:1px solid #b2bea5;border-radius:50%;inset:20px}
.orbit-two{inset:0 34px;transform:rotate(35deg)}
.name-caption{position:absolute;bottom:10px;font-family:Georgia,serif;font-size:12px;font-style:italic;letter-spacing:.02em}
.art-spark{position:absolute;right:15px;top:17px;color:#a2b28b;font-size:35px}
.story-seen .is-active .name-art img{animation:name-settle 1.1s var(--ease) both}
.story-seen .is-active .orbit{animation:orbit-draw 1.5s var(--ease) both}
@keyframes name-settle{from{opacity:0;transform:rotate(-12deg) scale(.8)}to{opacity:1;transform:none}}
@keyframes orbit-draw{from{opacity:0;scale:.7}to{opacity:1;scale:1}}
.door-art{width:300px;height:320px;position:relative;display:flex;justify-content:center;align-items:flex-end;padding-bottom:38px;color:#3b4934}
.door-frame{width:166px;height:238px;border:2px solid #4b583e;border-radius:86px 86px 2px 2px;background:#cdd9b8;position:relative;perspective:900px;z-index:2}
.door-leaf{position:absolute;inset:-2px;border-radius:86px 86px 2px 2px;border:2px solid #4b583e;background:#e8cc72;transform-origin:0 65%;backface-visibility:hidden}
.door-leaf svg{position:absolute;width:118px;left:22px;top:44px;fill:currentColor}
.door-knob{position:absolute;right:20px;bottom:52px;width:12px;height:12px;background:#4b583e;border-radius:50%}
.door-inside{position:absolute;inset:0;display:grid;align-content:center;justify-content:end;padding-right:15px;font-size:35px;color:#f7f5ed;line-height:1}
.door-floor{position:absolute;bottom:33px;width:260px;height:1px;background:#a9b492}
.door-shadow{position:absolute;width:170px;height:15px;bottom:31px;border-radius:50%;background:#b6bca166}
.door-sun{position:absolute;left:20px;top:24px;color:#b69c53;font-size:37px}
.door-label{position:absolute;bottom:9px;font-size:8px;letter-spacing:.11em}
.story-ready.story-seen .is-active .door-leaf{animation:yellow-door 1.8s .2s var(--ease) both}
.story-ready.story-seen .is-active .door-sun{animation:sun-arrive 1.1s var(--ease) both}
@keyframes yellow-door{0%,15%{transform:rotateY(0)}100%{transform:rotateY(-58deg)}}
@keyframes sun-arrive{from{opacity:0;transform:translateY(12px) rotate(-30deg)}to{opacity:1;transform:none}}
.everyday-art{width:100%;min-height:280px;display:flex;justify-content:center;align-items:center;padding:0 15px;position:relative}
.path-rule{position:absolute;width:82%;border-top:1px dashed #9aab87;top:55%}
.little-note{width:31%;max-width:120px;min-height:146px;border:1px solid #acba9c;background:#e0e8d3;padding:17px 13px;position:relative;box-shadow:3px 4px 0 #f7f5ed;transform:rotate(-6deg);z-index:1}
.little-note>span{font-family:Georgia,serif;font-style:italic;font-size:24px;color:#7f906b;display:block;border-bottom:1px solid #adbb9b;margin-bottom:18px;padding-bottom:6px}
.little-note>b{font-weight:500;font-size:13px;line-height:1.8;display:block;word-break:keep-all}
.note-two{transform:translateY(-25px) rotate(3deg);background:#e6d6c8;border-color:#c7ae9c;margin-inline:-2px;z-index:2}
.note-three{transform:translateY(12px) rotate(7deg);background:#dbe5e7;border-color:#a8bec4}
.story-ready.story-seen .is-active .little-note{animation:notes-arrive .9s var(--ease) both}
.story-ready.story-seen .is-active .note-two{animation-delay:.12s}.story-ready.story-seen .is-active .note-three{animation-delay:.24s}
@keyframes notes-arrive{from{opacity:0;translate:18px 25px}to{opacity:1;translate:0 0}}
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.value-note{padding:28px;border:1px solid #cdd5bf;border-top:3px solid #99ab84;background:#edf0e5;position:relative}
.value-note:nth-child(2){background:#e8eef0;border-color:#c5d5d8;border-top-color:#9ebac2}
.value-note:nth-child(3){background:#f0e8df;border-color:#decbbb;border-top-color:#c8ad96}
.value-note>span{font-family:Georgia,serif;font-size:27px;font-style:italic;color:#8b9b79}
.value-note h3{font-size:24px;margin-top:29px}
.value-note p{font-size:16px;line-height:1.95;margin-top:18px;color:var(--muted)}
.origin-timeline{display:grid;grid-template-columns:1fr 1fr;gap:50px;border-block:1px solid var(--line);margin-block:45px 24px;padding-block:24px}
.origin-timeline>div{display:flex;gap:28px;align-items:center}
.origin-timeline span{font-family:Georgia,serif;font-size:28px;color:#839171}
.origin-timeline p{font-size:14px;color:var(--muted);line-height:1.8}
.practice-notes{border:1px solid #d6ddcc;background:#eff1e7;padding:26px;margin-top:25px}
.practice-notes h3{font-size:19px;margin-bottom:19px}
.practice-notes ul{display:grid;grid-template-columns:1fr 1fr;gap:20px 28px}
.practice-notes li{border-top:1px solid #ccd4bf;padding-top:15px}
.practice-notes strong{font-size:15px;font-weight:550}
.practice-notes li p{font-size:14px;line-height:1.85;color:var(--muted);margin-top:8px}
.practice-notes>.fine{font-size:12px;margin-top:25px}
.practice-notes .practice-summary{font-size:15px;line-height:1.95;color:var(--muted)}
.family-practice{display:grid;grid-template-columns:1fr 1.5fr;gap:10%;border-block:1px solid var(--line)}
.family-practice h2{margin-top:20px;font-size:38px}
.family-practice p{color:var(--muted);font-size:16px;line-height:1.95}
.family-practice .text-link{margin-top:25px}
.letter-meta{display:flex;justify-content:space-between;gap:18px;font-size:11px;letter-spacing:.04em;color:#6d795e;padding-bottom:16px;border-bottom:1px solid #cdd5be}
.letter-source{font-size:11px!important;line-height:1.8!important;color:#718066;border-top:1px solid #cbd3bd;padding-top:16px;margin-top:29px!important}
.letter-side-note{display:block;font-family:Georgia,serif;font-style:italic;text-align:center;font-size:15px;margin-top:28px;color:#8b9c78}
.letter-followup{display:grid;grid-template-columns:1fr 2fr;gap:8%;align-items:start;padding-top:35px}
.letter-followup .letter-paper{background-color:#f2eee7;transform:rotate(-.6deg)}
.letter-date-note{display:flex;flex-direction:column;align-items:flex-start;padding-top:40px}
.letter-date-note>strong{font-family:Georgia,serif;font-size:80px;font-weight:400;letter-spacing:-.06em;line-height:1.4;color:#a9b895}
.letter-date-note>span:last-child{font-size:13px;color:var(--muted);margin-top:10px}
.archive-links{display:flex;gap:40px;flex-wrap:wrap;margin-block:15px 50px}
.room-directions{font-size:14px!important;line-height:1.9;color:#5b6c51}
@media(max-width:1100px){.story-book{padding:25px}.story-frame{padding:30px;gap:25px}.name-art{width:260px;height:260px}.door-art{width:260px}.little-note{padding-inline:9px}.little-note>b{font-size:12px}.story-frame-copy h3{font-size:29px}.story-frame-copy p{font-size:15px}}
@media(max-width:760px){
 .word-ribbon{padding:14px 12px;gap:12px;margin-top:40px}.ribbon-caption{flex-basis:88px;font-size:9px}.ribbon-track span{font-size:20px}.ribbon-track>div{gap:26px;padding-right:26px}.ribbon-toggle{width:44px;height:44px;border:0}
 .story-book{padding:21px 17px;margin-top:26px}.story-book-head{align-items:flex-start;gap:12px;padding-bottom:19px}.story-book-head h2{font-size:21px}.story-book-head .text-link{font-size:10px;gap:9px;max-width:96px;line-height:1.8}.story-book-head .eyebrow{font-size:8px}
 .story-frame{grid-template-columns:1fr;gap:25px;padding:27px 21px 22px;min-height:560px;align-content:space-between}.story-frame-copy h3{font-size:25px;margin-top:18px;line-height:1.5}.story-frame-copy p{font-size:14px;margin-top:18px;line-height:1.9}.story-frame-copy .eyebrow{font-size:9px}.story-art{min-height:238px}.name-art{width:235px;height:235px}.name-art img{width:140px;height:140px}.name-caption{font-size:10px;bottom:14px}.art-spark{font-size:28px;right:11px;top:20px}
 .door-art{width:235px;height:240px;padding-bottom:29px}.door-frame{width:128px;height:184px}.door-leaf svg{width:92px;left:15px;top:35px}.door-inside{font-size:27px;padding-right:11px}.door-knob{width:9px;height:9px;right:14px;bottom:38px}.door-floor{width:208px;bottom:24px}.door-shadow{width:145px;bottom:21px}.door-label{font-size:6px;bottom:2px}.door-sun{font-size:30px;top:21px;left:8px}
 .everyday-art{min-height:238px;padding:0 5px}.little-note{width:33%;min-height:125px;padding:12px 8px}.little-note>b{font-size:10px}.little-note>span{font-size:21px;margin-bottom:12px}.note-two{transform:translateY(-19px) rotate(3deg)}.note-three{transform:translateY(9px) rotate(6deg)}
 .story-controls{gap:10px;padding-top:15px}.story-buttons{gap:3px;flex:1;justify-content:space-between}.story-buttons button{font-size:10px;padding-inline:9px}.story-buttons button span{margin-left:3px}.story-next{width:44px;height:44px;border:0}.story-progress{display:none}
 .values-grid{grid-template-columns:1fr;gap:16px}.value-note{padding:24px}.value-note h3{font-size:23px;margin-top:17px}.value-note p{font-size:15px;margin-top:13px}.value-note>span{font-size:23px}.origin-timeline{grid-template-columns:1fr;gap:19px;margin-top:30px}.origin-timeline>div{gap:24px}.origin-timeline p{font-size:13px}.origin-timeline span{font-size:26px}
 .practice-notes{padding:22px 20px}.practice-notes h3{font-size:18px}.practice-notes ul{grid-template-columns:1fr;gap:18px}.practice-notes li p{font-size:14px}
 .family-practice{grid-template-columns:1fr;gap:25px}.family-practice h2{font-size:30px}.family-practice p{font-size:15px}
 .letter-side-note{font-size:11px;margin-top:13px}.letter-meta{font-size:10px}.letter-followup{grid-template-columns:1fr;gap:23px;padding-top:15px}.letter-date-note{padding-top:0;flex-direction:row;align-items:center;gap:18px;flex-wrap:wrap}.letter-date-note>strong{font-size:45px;order:-1}.letter-date-note>span:last-child{display:none}.letter-followup .letter-paper{transform:none}.archive-links{gap:15px;margin-block:5px 35px}.archive-links .text-link{font-size:13px}
}
@media(max-width:370px){.story-book{padding:18px 11px}.story-frame{padding:25px 17px 20px;min-height:590px}.story-frame-copy h3{font-size:23px}.name-art{width:210px;height:220px}.door-art{width:210px}.story-book-head h2{font-size:20px}.story-book-head .text-link{font-size:9px}.story-buttons button{padding-inline:6px;font-size:9px}.story-buttons{gap:0}}
html.motion-reduced .title-line,html.motion-reduced .story-art *,html.motion-reduced .ribbon-track{animation:none!important}
html.motion-reduced .story-frame,html.motion-reduced .story-progress span,html.motion-reduced .picture-reveal img{transition:none!important}
html.motion-reduced .picture-reveal img{opacity:1!important;transform:none!important;clip-path:none!important}
html.motion-reduced .ribbon-toggle{display:none}
@media(prefers-reduced-motion:reduce){.story-art *,.ribbon-track,.title-line{animation:none!important}.picture-reveal img{opacity:1!important;transform:none!important;clip-path:none!important}.ribbon-toggle{display:none}}