/* The timeline is a small illustrated chapter inside the existing dark site. */
.timeline-overview,.year-page{--ink:#354b42;--forest:#3d6657;--cream:#fcf7e9;--sun:#f5cb71;color:var(--ink);font-family:"Microsoft YaHei",Arial,sans-serif}
.timeline-overview button,.year-page button{font:inherit;cursor:pointer}
.timeline-overview h1,.timeline-overview h2,.year-page h1,.year-page h2{color:var(--ink);font-family:Georgia,"Songti SC","Noto Serif SC",serif}
.timeline-kicker{display:block;color:#688574;font:700 11px Georgia,serif;letter-spacing:.22em}
.timeline-intro{position:relative;display:flex;min-height:min(750px,calc(100svh - 86px));flex-direction:column;align-items:center;justify-content:center;overflow:hidden;padding:85px 24px 110px;text-align:center;background:#d9eee3;background-image:radial-gradient(#fff8d9 1.3px,transparent 1.6px);background-size:38px 38px;isolation:isolate}
.timeline-intro::before{content:"";position:absolute;z-index:-1;inset:auto -8% -145px;height:300px;background:#f9f3e2;border-radius:50% 50% 0 0/58% 58% 0 0;transform:rotate(-3deg)}
.timeline-intro::after{content:"";position:absolute;z-index:-2;inset:auto -12% -105px;height:275px;background:#a9d4b9;border-radius:50% 50% 0 0/65% 65% 0 0;transform:rotate(7deg)}
.timeline-intro h1{position:relative;z-index:1;margin:26px 0 20px;font-size:clamp(46px,6vw,84px);font-weight:600;line-height:1.35;letter-spacing:.03em}
.timeline-intro h1 em{color:#527e6a;font-style:normal}
.timeline-intro p{position:relative;z-index:1;max-width:440px;margin:0;color:#537165;font-size:15px;line-height:2}
.timeline-sun{position:absolute;top:12%;right:16%;color:#f3c55d;font-size:clamp(76px,12vw,155px);line-height:1;animation:timeline-bob 6s ease-in-out infinite}
.timeline-cloud{position:absolute;width:120px;height:33px;border-radius:60px;background:#fffdf0;opacity:.8;box-shadow:25px -16px 0 -2px #fffdf0,-23px -8px 0 -4px #fffdf0}
.timeline-cloud-one{top:21%;left:13%;animation:timeline-drift 7s ease-in-out infinite}
.timeline-cloud-two{right:7%;bottom:33%;transform:scale(.7);animation:timeline-drift 9s ease-in-out infinite reverse}
.timeline-scroll-cue{position:absolute;bottom:78px;display:flex;align-items:center;gap:15px;color:#527464;font-size:12px;letter-spacing:.15em}
.timeline-scroll-cue span{display:grid;width:32px;height:32px;place-items:center;border:1px solid #729883;border-radius:50%;font-size:17px;animation:timeline-bob 2.5s ease-in-out infinite}
.timeline-journey{position:relative;min-height:500px;padding:65px var(--page-gutter) 80px;background:var(--cream);background-image:radial-gradient(#b4a8822a .6px,transparent .8px);background-size:12px 12px}
.timeline-journey-head{display:flex;max-width:1420px;align-items:end;justify-content:space-between;gap:22px;margin:0 auto 60px;text-align:left}
.timeline-journey-head h2{margin:13px 0 9px;color:#385b48;font:700 clamp(42px,5vw,72px)/1.16 Georgia,"Songti SC",serif;letter-spacing:.025em}
.timeline-add{min-height:43px;padding:10px 20px;border:1px solid #55725f;border-radius:3px;color:#f9f6ea;background:#426854;box-shadow:4px 4px 0 #9bbda7;font-size:13px;font-weight:700;transition:transform .25s,box-shadow .25s,background .25s}
.timeline-add:hover,.timeline-add:focus-visible{color:#fff;background:#315b45;transform:translate(-2px,-2px);box-shadow:6px 6px 0 #9bbda7}
.year-path{position:relative;display:grid;max-width:1020px;gap:56px;margin:0 auto;padding:15px 0 40px;list-style:none}
.year-path::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:5px;border-left:5px dotted #95b39b;transform:translateX(-50%)}
.year-stop{position:relative;width:calc(50% - 75px);margin-left:0}
.year-stop:nth-child(even){margin-left:calc(50% + 75px)}
.year-stop-dot{position:absolute;z-index:2;top:48%;left:calc(100% + 51px);display:grid;width:48px;height:48px;place-items:center;border:4px solid #fcf7e9;border-radius:50%;color:#fff;background:#77a188;box-shadow:0 0 0 2px #77a188;font-size:22px;transform:translateY(-50%)}
.year-stop:nth-child(even) .year-stop-dot{left:auto;right:calc(100% + 51px)}
.year-card{position:relative;display:flex;width:100%;min-height:245px;flex-direction:column;align-items:flex-start;overflow:hidden;padding:27px 30px 23px;border:2px solid #4b6c58;border-radius:12px;text-align:left;background:#ecedd5;box-shadow:8px 9px 0 #96b49c;transform:rotate(-1.3deg);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.year-stop:nth-child(even) .year-card{transform:rotate(1.4deg)}
.year-card-1{background:#f8e5bc;box-shadow:8px 9px 0 #d8b988}
.year-card-2{background:#d9e7ef;box-shadow:8px 9px 0 #a4bbcb}
.year-card-3{background:#f2dce0;box-shadow:8px 9px 0 #c9a5aa}
.year-card:hover,.year-card:focus-visible,.year-stop:nth-child(even) .year-card:hover,.year-stop:nth-child(even) .year-card:focus-visible{transform:translateY(-7px) rotate(0);box-shadow:11px 15px 0 #7fa18a}
.year-card-top{position:relative;z-index:1;display:flex;width:100%;justify-content:space-between;gap:12px;color:#506f5b;font:700 11px Georgia,"Microsoft YaHei",sans-serif;letter-spacing:.08em}
.year-card strong{position:relative;z-index:1;display:block;margin:23px 0 7px;color:#315342;font:700 clamp(58px,6vw,83px)/1 Georgia,serif;letter-spacing:-.045em}
.year-card strong small{margin-left:6px;font:500 19px "Microsoft YaHei",sans-serif;letter-spacing:0}
.year-card-preview{position:relative;z-index:1;display:block;max-width:88%;overflow:hidden;color:#587064;font-size:12px;white-space:nowrap;text-overflow:ellipsis}
.year-card-preview i{font-style:normal}
.year-card-enter{position:relative;z-index:1;display:flex;width:100%;align-items:center;justify-content:space-between;margin-top:auto;padding-top:22px;color:#315b46;font-size:13px;font-weight:700}
.year-card-enter b{font-size:22px;font-weight:400}
.year-card-deco{position:absolute;right:13px;bottom:38px;color:#72a18475;font-size:95px;line-height:1;transform:rotate(12deg);transition:transform .35s}
.year-card:hover .year-card-deco{transform:rotate(-8deg) scale(1.13)}
.memory-labels{margin:90px calc(-1 * var(--page-gutter)) 0;padding:65px var(--page-gutter) 75px;border-top:2px dashed #b8c9b7;color:var(--ink);background:transparent}
.memory-board-inner{max-width:1420px;margin:auto}
.memory-labels-head{text-align:left}
.memory-labels-head .timeline-kicker{color:#6f9078;font:700 12px "Courier New",monospace;letter-spacing:.13em}
.memory-board-title{display:flex;align-items:baseline;flex-wrap:wrap;gap:20px}
.timeline-overview .memory-labels-head h2{margin:13px 0 9px;color:#385b48;font:700 clamp(42px,5vw,72px)/1.16 Georgia,"Songti SC",serif;letter-spacing:.025em}
.memory-board-title>span{color:#b68e5b;font:700 14px "Courier New",monospace}
.memory-labels-head p{max-width:650px;margin:0;color:#697e70;font-size:15px;line-height:1.8}
.memory-filter-tabs{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:37px auto 46px}
.memory-filter-caption{margin-right:8px;color:#7c8b7a;font:700 12px "Courier New",monospace}
.memory-filter-tab{min-height:43px;padding:8px 18px;border:1px solid #94ae99;border-radius:0;color:#466d55;background:#fffcf3;font:700 12px "Courier New","Microsoft YaHei",monospace;transition:transform .2s,background .2s,box-shadow .2s,color .2s}
.memory-filter-tab:hover,.memory-filter-tab:focus-visible{transform:translate(-2px,-2px);border-color:#426854;color:#315b46;box-shadow:3px 3px 0 #b8ccaf}
.memory-filter-tab[aria-pressed="true"]{border-color:#426854;color:#fffdf5;background:#426854;box-shadow:3px 3px 0 #a7c2a4}
.memory-label-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:29px 24px;margin:0;padding:0;list-style:none}
.memory-label-item{position:relative;min-width:0;padding:9px 7px;isolation:isolate}
.memory-label-item::before{content:"";position:absolute;z-index:-1;inset:10px 8px;border:1px dashed #aebca8;transform:rotate(-2deg)}
.memory-label-item:nth-child(2n)::before{transform:rotate(2deg)}
.memory-label{--accent:#64876b;--tape:#eacb86a8;--tilt:-1.3deg;position:relative;display:flex;width:100%;min-height:225px;flex-direction:column;align-items:flex-start;padding:24px 26px 20px;border:2px solid var(--accent);border-radius:0;color:#354b42;text-align:left;background:#fffdf5;background-image:repeating-linear-gradient(0deg,transparent 0,transparent 34px,#6a8a6b12 35px);box-shadow:6px 6px 0 var(--accent);transform:rotate(var(--tilt));transition:transform .22s ease-out,box-shadow .22s ease-out}
.memory-label::before{content:"";position:absolute;top:-13px;right:-11px;width:73px;height:22px;background:var(--tape);clip-path:polygon(5% 0,100% 8%,95% 100%,0 90%);transform:rotate(43deg);transition:transform .22s ease-out}
.memory-label::after{content:"";position:absolute;bottom:23px;left:28px;width:45px;height:2px;background:var(--accent)}
.memory-label-1{--accent:#84a9b4;--tape:#b5d0d5ad;--tilt:.8deg;border-style:dashed}
.memory-label-2{--accent:#b99aaa;--tape:#dcc1cbab;--tilt:1.6deg}
.memory-label-3{--accent:#b99c68;--tape:#e8d19ab8;--tilt:-1.6deg}
.memory-label-4{--accent:#8da483;--tape:#bfcaa6ad;--tilt:.5deg}
.memory-label-5{--accent:#a1a6bd;--tape:#c6ccdcad;--tilt:-.7deg}
.memory-label:hover,.memory-label:focus-visible{z-index:2;transform:translateY(-9px) rotate(0) scale(1.02);box-shadow:11px 13px 0 var(--accent)}
.memory-label:hover::before,.memory-label:focus-visible::before{transform:translate(3px,-4px) rotate(48deg)}
.memory-label:active{transform:translateY(2px) rotate(0) scale(.985);box-shadow:2px 2px 0 var(--accent)}
.memory-label:focus-visible{outline:3px solid #315b46;outline-offset:5px}
.memory-label-top{display:flex;width:100%;min-height:43px;align-items:flex-start;justify-content:space-between;gap:10px}
.memory-label-icon{display:grid;width:41px;height:41px;flex:none;place-items:center;border:1px dashed var(--accent);border-radius:0;color:var(--accent);background:#fffaf0;font-size:24px;line-height:1;transform:rotate(-7deg);transition:transform .22s ease-out}
.memory-label:hover .memory-label-icon,.memory-label:focus-visible .memory-label-icon{transform:translateY(-3px) rotate(7deg)}
.memory-label-chips{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px}
.memory-card-chip{max-width:100px;padding:3px 6px;border:1px solid var(--accent);border-radius:0;color:#416550;background:#fffdf5;font:700 10px "Courier New","Microsoft YaHei",monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.memory-label strong{display:block;margin:11px 0 7px;color:#315342;font:700 24px/1.3 Georgia,"Songti SC",serif;overflow-wrap:anywhere}
.memory-label-excerpt{display:-webkit-box;overflow:hidden;color:#627366;font:14px/1.7 "Microsoft YaHei",Arial,sans-serif;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:pre-line;overflow-wrap:anywhere}
.memory-label-foot{display:flex;width:100%;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:18px;color:#768575;font:11px "Courier New","Microsoft YaHei",monospace}
.memory-label-foot span{color:var(--accent);font-size:18px}
.timeline-end{margin:60px 0 0;color:#789384;font:12px Georgia,"Microsoft YaHei",sans-serif;letter-spacing:.16em;text-align:center}
.timeline-empty{max-width:620px;margin:70px auto;padding:50px 25px;border:2px dashed #9db9a3;text-align:center;background:#fffaf0}
.timeline-empty>span{color:#93b497;font-size:58px}
.timeline-empty h2{margin:8px 0;font-size:28px}
.timeline-empty p{color:#687d6d;font-size:13px;line-height:1.8}
.timeline-empty .timeline-add{margin-top:16px}
.year-page{min-height:calc(100svh - 86px);padding:0 var(--page-gutter) 70px;background:#eee7d9;background-image:repeating-linear-gradient(0deg,transparent 0,transparent 31px,#aaaf9d33 32px),radial-gradient(#a5977b30 .6px,transparent .9px);background-size:auto,11px 11px}
.year-page-inner{max-width:1180px;margin:auto}
.year-page-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:31px 0 12px}
.year-back{min-height:43px;padding:7px 0;border:0;color:#3f6752;background:transparent;font-size:13px;font-weight:700}
.year-back:hover,.year-back:focus-visible{text-decoration:underline;text-underline-offset:5px}
.year-page-head{position:relative;max-width:870px;margin:36px auto 60px;padding:35px 30px 42px;text-align:center;background:#fbf7e9;border:2px solid #466551;box-shadow:9px 10px 0 #b8bca1;transform:rotate(-.7deg)}
.year-page-head::before{content:"";position:absolute;top:-15px;left:calc(50% - 43px);width:86px;height:25px;background:#d7aa67a8;clip-path:polygon(3% 0,100% 5%,95% 100%,0 92%)}
.year-page-head h1{margin:14px 0 8px;font:700 clamp(72px,10vw,125px)/1 Georgia,serif;letter-spacing:-.06em}
.year-page-head h1 small{margin-left:10px;font:500 23px "Microsoft YaHei",sans-serif;letter-spacing:0}
.year-page-head p{max-width:580px;margin:0 auto;color:#667568;font-size:14px;line-height:1.9}
.year-page-stamp{position:absolute;right:32px;bottom:16px;display:flex;width:74px;height:74px;flex-direction:column;align-items:center;justify-content:center;border:2px dashed #b6856e;border-radius:50%;color:#b6856e;font-size:32px;line-height:1;transform:rotate(15deg)}
.year-page-stamp small{font:8px Georgia,serif;letter-spacing:.1em}
.scrap-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:50px 30px;margin:0;padding:0 5px;list-style:none}
.scrap-item{min-width:0}
.scrap-note{position:relative;display:flex;width:100%;min-height:285px;flex-direction:column;align-items:flex-start;padding:35px 24px 24px;border:1px solid #ad9c70;color:#3c493b;text-align:left;background:#f9e9aa;box-shadow:6px 7px 0 #bcb59c;transform:rotate(-2deg);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.scrap-note-1{background:#cfe9e0;transform:rotate(2deg)}
.scrap-note-2{background:#f6d8d4;transform:rotate(-1deg)}
.scrap-note-3{background:#dce5f6;transform:rotate(1.5deg)}
.scrap-note:hover,.scrap-note:focus-visible{transform:translateY(-8px) rotate(0);box-shadow:10px 15px 0 #a8a08a}
.scrap-tape{position:absolute;top:-13px;left:calc(50% - 42px);width:84px;height:27px;background:#e2aa78ad;clip-path:polygon(2% 6%,100% 0,96% 94%,0 100%)}
.scrap-item:nth-child(2n) .scrap-tape{background:#b7bf86ad;transform:rotate(-8deg)}
.scrap-photo{display:block;width:100%;height:150px;margin-bottom:19px;padding:6px 6px 18px;background:#fffdf6;box-shadow:2px 3px 0 #0002;transform:rotate(2deg)}
.scrap-photo img{display:block;width:100%;height:100%;object-fit:cover}
.scrap-date{color:#6c7466;font-size:11px;letter-spacing:.07em}
.scrap-note strong{display:block;margin:13px 0 10px;color:#324837;font:700 24px/1.35 Georgia,"Songti SC",serif;overflow-wrap:anywhere}
.scrap-excerpt{display:-webkit-box;max-height:4.8em;overflow:hidden;color:#5d675b;font-size:13px;line-height:1.6;-webkit-box-orient:vertical;-webkit-line-clamp:3;white-space:pre-line;overflow-wrap:anywhere}
.scrap-open{display:flex;width:100%;align-items:center;justify-content:space-between;margin-top:auto;padding-top:23px;color:#446952;font-size:12px;font-weight:700}
.scrap-open span{font-size:20px;font-weight:400}
.year-page-bottom{padding:65px 0 0;text-align:center}

/* Memory detail continues the paper-and-scrapbook language of the timeline. */
.memory-detail-page{min-height:calc(100svh - 86px);color:#354b42;background:#eee7d9;background-image:repeating-linear-gradient(0deg,transparent 0,transparent 31px,#aaaf9d33 32px),radial-gradient(#a5977b30 .6px,transparent .9px);background-size:auto,11px 11px;font-family:"Microsoft YaHei",Arial,sans-serif}
.memory-detail-inner{max-width:1080px;margin:0 auto}
.memory-detail-page .detail-back{display:inline-flex;margin-bottom:34px;color:#3f6752;font-weight:700;text-decoration:none}
.memory-detail-page .detail-back:hover{text-decoration:underline;text-underline-offset:5px}
.memory-detail-page .detail-top{position:relative;align-items:center;margin-bottom:52px;padding:42px 46px;border:2px solid #466551;color:#354b42;background:#fbf7e9;box-shadow:9px 10px 0 #b8bca1;transform:rotate(-.35deg)}
.memory-detail-page .detail-top::before{content:"";position:absolute;top:-15px;left:calc(50% - 43px);width:86px;height:25px;background:#d7aa67a8;clip-path:polygon(3% 0,100% 5%,95% 100%,0 92%)}
.memory-detail-page .detail-title h1{max-width:780px;margin:13px 0 0;color:#315342;font:700 clamp(42px,6vw,72px)/1.18 Georgia,"Songti SC","Noto Serif SC",serif;letter-spacing:.015em;overflow-wrap:anywhere}
.memory-detail-page .eyebrow{color:#688574;font:700 11px Georgia,"Songti SC",serif;letter-spacing:.22em}
.memory-detail-page .tag{border:1px solid #9caf9d;border-radius:0;color:#446952;background:#f4eedc;font:700 11px "Courier New","Microsoft YaHei",monospace}
.memory-detail-page .button{border:1px solid #55725f;border-radius:3px;color:#f9f6ea;background:#426854;box-shadow:4px 4px 0 #9bbda7;font-weight:700}
.memory-detail-page .button:hover,.memory-detail-page .button:focus-visible{color:#fff;background:#315b45;border-color:#315b45;box-shadow:6px 6px 0 #9bbda7;transform:translate(-2px,-2px)}
.memory-detail-page .memory-story{position:relative;margin:0 0 58px;padding:42px 46px 48px;border:1px solid #9eaa91;border-radius:0;color:#3c493b;background:#fffdf5;background-image:repeating-linear-gradient(0deg,transparent 0,transparent 38px,#6a8a6b16 39px);box-shadow:7px 8px 0 #b9baa4;transform:rotate(.25deg)}
.memory-detail-page .memory-story::before{content:"";position:absolute;top:-14px;right:52px;width:90px;height:27px;background:#e5c684a8;clip-path:polygon(3% 4%,100% 0,96% 95%,0 100%);transform:rotate(4deg)}
.memory-detail-page .memory-story p{margin:24px 0 0;color:#46574b;font:16px/2.35 Georgia,"Songti SC","Noto Serif SC",serif;letter-spacing:.035em}
.memory-detail-page .section-title{align-items:end;margin-bottom:24px;padding-bottom:16px;border-color:#aab79e}
.memory-detail-page .section-title h2{margin:8px 0 0;color:#315342;font:700 clamp(28px,4vw,42px)/1.2 Georgia,"Songti SC",serif}
.memory-detail-page .detail-photos{gap:22px}
.memory-detail-page .photo-tile{padding:8px 8px 23px;border:1px solid #b9aa8b;border-radius:0;background:#fffdf6;box-shadow:4px 5px 0 #bcb59c;transform:rotate(-.7deg)}
.memory-detail-page .photo-tile:nth-child(even){transform:rotate(.8deg)}
.memory-detail-page .photo-tile img{height:100%;object-fit:cover}
.memory-detail-page .empty{border-color:#9db9a3;color:#687d6d;background:#fffaf0}
.memory-detail-page .detail-delete{padding-top:32px;border-top:1px dashed #aebca8;text-align:right}
.memory-detail-page .detail-delete .link-button{color:#8b6557}

@keyframes timeline-bob{50%{translate:0 -9px}}
@keyframes timeline-drift{50%{translate:22px 0}}
@media(max-width:900px){.scrap-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.memory-label-list{grid-template-columns:repeat(2,minmax(0,1fr))}.year-stop{width:calc(50% - 52px)}.year-stop:nth-child(even){margin-left:calc(50% + 52px)}.year-stop-dot{left:calc(100% + 28px)}.year-stop:nth-child(even) .year-stop-dot{right:calc(100% + 28px)}}
@media(max-width:700px){.timeline-intro{min-height:calc(100svh - 110px);padding:95px 24px 135px}.timeline-intro h1{font-size:clamp(43px,10vw,64px)}.timeline-sun{top:8%;right:6%;font-size:80px}.timeline-cloud-one{top:17%;left:-15px;transform:scale(.6)}.timeline-cloud-two{right:-24px;bottom:25%}.timeline-journey{padding:52px 23px 65px}.timeline-journey-head{align-items:start;flex-direction:column;margin-bottom:45px}.year-path{gap:35px;padding-left:43px}.year-path::before{left:14px;transform:none}.year-stop,.year-stop:nth-child(even){width:100%;margin-left:0}.year-stop-dot,.year-stop:nth-child(even) .year-stop-dot{top:55px;right:auto;left:-50px;width:38px;height:38px;font-size:17px}.year-card,.year-stop:nth-child(even) .year-card{min-height:225px;transform:rotate(-.7deg)}.year-card strong{font-size:66px}.memory-labels{margin-inline:-23px;padding-inline:23px}.year-page{padding:0 20px 55px}.year-page-toolbar{padding-top:20px}.year-page-head{margin:28px 0 45px}.year-page-stamp{right:8px;bottom:7px;transform:scale(.68) rotate(15deg)}.scrap-grid{gap:38px 20px}}
@media(max-width:520px){.timeline-intro p{font-size:13px}.timeline-kicker{font-size:9px}.timeline-journey-head .timeline-add{width:100%}.year-card{padding:23px}.year-card-deco{font-size:74px}.year-card-top{font-size:10px}.year-card-preview{font-size:11px}.memory-labels{margin-top:65px;padding-block:55px 65px}.memory-filter-tabs{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;margin:29px -23px 32px;padding:2px 23px 12px;scrollbar-width:thin}.memory-filter-caption,.memory-filter-tab{flex:none}.memory-label-list{grid-template-columns:1fr;gap:14px}.memory-label{min-height:235px;padding:25px 23px 22px}.year-page-toolbar .timeline-add{padding:8px 10px;font-size:11px}.year-page-head{padding:35px 19px 40px}.year-page-head h1{font-size:76px}.year-page-head p{font-size:12px}.scrap-grid{grid-template-columns:1fr;gap:35px;padding:0 6px}.scrap-note{min-height:255px}.scrap-photo{height:175px}}
@media(max-width:700px){.memory-detail-page{padding-top:30px}.memory-detail-page .detail-top{align-items:flex-start;padding:35px 24px 32px;transform:none}.memory-detail-page .detail-top>.button{flex:none}.memory-detail-page .memory-story{padding:34px 25px 38px;transform:none}.memory-detail-page .memory-story p{font-size:15px;line-height:2.15}.memory-detail-page .section-title{align-items:flex-start}.memory-detail-page .detail-photos{gap:14px}}
@media(max-width:470px){.memory-detail-page .detail-top{display:block}.memory-detail-page .detail-top>.button{margin-top:24px}.memory-detail-page .detail-title h1{font-size:38px}.memory-detail-page .section-title{display:block}.memory-detail-page .section-title>.button{margin-top:18px}.memory-detail-page .photo-tile{padding:5px 5px 15px}}
@media(prefers-reduced-motion:reduce){.timeline-sun,.timeline-cloud,.timeline-scroll-cue span{animation:none}.year-card,.scrap-note,.timeline-add,.memory-label,.memory-filter-tab,.memory-label::before,.memory-label-icon{transition:none}.memory-label:hover,.memory-label:focus-visible,.memory-label:active{transform:rotate(var(--tilt))}.memory-label:hover::before,.memory-label:focus-visible::before{transform:rotate(43deg)}}

/* Mirror Bucket List's immersive painted cover for the opening chapter. */
.timeline-intro {
  position: relative;
  display: flex;
  min-height: min(690px, calc(100svh - 68px));
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 90px 24px 120px;
  color: #f8f1dd;
  text-align: center;
  background: linear-gradient(180deg,#173a2f70,#173a2fb8),url('/renoir-la-grenouillere.jpg') center 53%/cover no-repeat;
  isolation: isolate;
}
.timeline-intro::before {
  display: none;
}
.timeline-intro::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: -8%;
  right: -8%;
  bottom: -145px;
  height: 245px;
  border-radius: 50% 50% 0 0 / 68% 68% 0 0;
  background: #fcf7e9;
  transform: none;
}
.timeline-hero-frame {
  position: absolute;
  inset: 23px;
  border: 1px solid #d8c27f8a;
  pointer-events: none;
}
.timeline-intro-inner { position: relative; z-index: 1; width: min(100%, 950px); margin: auto; }
.timeline-intro .timeline-kicker { color: #ebdfa9; font: 700 12px Georgia, 'Songti SC', serif; letter-spacing: .26em; text-shadow: 0 2px 12px #12291e; }
.timeline-flourish { display: grid; width: 200px; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; column-gap: 14px; margin: 33px auto 15px; color: #e8d49d; font-size: 16px; line-height: 1; }
.timeline-flourish::before,.timeline-flourish::after { content: ''; width: 100%; height: 1px; background: #e2cb88; }
.timeline-intro h1 { margin: 0 0 23px; color: #fff8e8; font: 400 clamp(76px, 8.8vw, 126px)/1.05 "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif; letter-spacing: -.035em; text-shadow: 0 3px 24px #0c211ac9; text-rendering: optimizeLegibility; }
.timeline-intro p { max-width: 640px; margin: 0 auto; color: #f9f2de; font: 17px/2 Georgia, 'Songti SC', serif; letter-spacing: .1em; text-shadow: 0 2px 14px #0b241ac9; }
.timeline-intro .timeline-scroll-cue { position: absolute; z-index: 1; bottom: 69px; display: flex; align-items: center; gap: 15px; color: #f3e8c6; font: 13px Georgia, 'Songti SC', serif; letter-spacing: .13em; text-shadow: 0 2px 10px #132b21; }
.timeline-intro .timeline-scroll-cue span { border-color: #e6d39d; color: #fff4d3; }
@media (max-width: 700px) {
  .timeline-intro { min-height: calc(100svh - 110px); padding: 90px 28px 122px; }
  .timeline-intro { background-position: center,58% center; }
  .timeline-hero-frame { inset: 14px; }
  .timeline-intro-inner { width: calc(100vw - 56px); max-width: 100%; min-width: 0; }
  .timeline-intro .timeline-kicker { font-size: 9px; letter-spacing: .16em; }
  .timeline-intro h1 { font-size: clamp(58px, 14vw, 84px); }
  .timeline-intro p { max-width: 340px; font-size: 14px; line-height: 1.9; }
  .timeline-intro .timeline-scroll-cue { bottom: 52px; }
}
@media (max-width: 390px) {
  .timeline-intro h1 { font-size: 65px; }
  .timeline-intro p { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .timeline-intro .timeline-scroll-cue span { animation: none; }
}

/* Begin the original paper surface immediately below the painted cover. */
.timeline-journey {
  padding-top: 118px;
  background-color: #f1ecdf;
  background-image: radial-gradient(#7f8f7824 .7px, transparent .9px);
  background-size: 12px 12px;
}
@media (max-width: 700px) {
  .timeline-journey {
    padding-top: 96px;
  }
}
