:root{--paper:#fff8e9;--ink:#583b27;--muted:#816b52;--orange:#b66b23;--line:#e4c49b;--green:#86572f;--honey:#efb557;--peach:#f6b69a}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;color:var(--ink);background:var(--paper);font-family:'Hiragino Maru Gothic ProN','Yu Gothic',sans-serif;line-height:1.95;font-size:15px;background-image:radial-gradient(#b4834620 .8px,transparent .8px);background-size:9px 9px}a{color:inherit;text-decoration:none}button,input{font:inherit;color:inherit}button{cursor:pointer}a,button,input{outline-offset:5px}header{max-width:1220px;margin:auto;padding:20px 35px;display:flex;justify-content:space-between;align-items:center;gap:20px}.logo{display:flex;gap:10px;align-items:center;font-size:22px;font-weight:800;letter-spacing:2px}.brand-mascot{width:64px;height:64px;border-radius:50%;border:2px solid #e5c297;object-fit:cover;background:white}.brand-text small{display:block;font-size:10px;font-weight:600;letter-spacing:2px;line-height:1.5;color:var(--orange)}.nav{display:flex;gap:25px;font-size:12px;font-weight:700}.nav a{padding:7px 2px;border-bottom:2px solid transparent}.nav a:hover{border-color:var(--honey)}.wrap{max-width:1120px;margin:auto;padding:0 30px}.hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:50px;padding-top:42px;padding-bottom:65px;min-height:670px}.eyebrow{display:inline-block;font-size:11px;letter-spacing:2px;color:var(--orange);font-weight:800}.hero .eyebrow{border:1px dashed #c08a47;border-radius:40px;padding:7px 17px;background:#fff0d4}.hero h1{font-size:clamp(36px,4.5vw,56px);line-height:1.6;letter-spacing:2px;margin:22px 0;font-weight:850}.hero h1 em{font-style:normal;color:var(--orange);background:linear-gradient(transparent 74%,#f9d38e 74%,#f9d38e 92%,transparent 92%)}.hero p{color:var(--muted);font-size:14px;line-height:2.25}.date{font-size:12px;letter-spacing:2px;margin-top:26px;font-weight:700}.pill{display:inline-block;border:2px solid #7d512a;background:var(--honey);box-shadow:3px 4px 0 #7d512a;border-radius:44px 48px 43px 40px;padding:12px 25px;font-size:12px;font-weight:bold;margin-top:25px;transition:transform .2s,box-shadow .2s}.pill:hover{transform:translate(2px,2px);box-shadow:1px 2px 0 #7d512a}.mascot-stage{position:relative;isolation:isolate;max-width:480px;margin:0 auto;width:100%;padding:25px 5px 42px}.mascot-stage:before{content:'';position:absolute;inset:0 -10px 13px;background:#f1c779;border:2px dashed #bd8b4c;border-radius:49% 51% 45% 55%/46% 51% 49% 54%;transform:rotate(4deg);z-index:-1}.mascot-stage img{display:block;width:100%;height:auto;border-radius:47% 49% 42% 45%;border:5px solid #fff;box-shadow:0 7px 20px #a16c2820}.anniversary-badge{position:absolute;top:4px;right:-10px;width:100px;height:100px;display:flex;flex-direction:column;justify-content:center;align-items:center;border:2px solid #945c30;border-radius:50%;background:#fff2d5;transform:rotate(12deg);line-height:1.3;box-shadow:3px 4px 0 #b2824840}.anniversary-badge strong{font-family:Georgia,serif;font-size:38px}.anniversary-badge span{font-size:11px;letter-spacing:1px}.mascot-caption{position:absolute;bottom:14px;left:50%;transform:translateX(-50%) rotate(-3deg);width:max-content;max-width:95%;background:#fffaf0;border:2px solid #b58954;border-radius:48% 8% 10% 5%/10% 14% 6% 13%;padding:10px 21px;font-size:13px;font-weight:700;text-align:center}.strip{display:flex;justify-content:space-around;gap:15px;border-top:2px dashed var(--line);border-bottom:2px dashed var(--line);padding:21px 0;font-size:12px;font-weight:bold;letter-spacing:1px}.strip span{font-size:17px;color:var(--orange);margin-right:8px}section{padding:85px 0}.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:35px;margin-bottom:40px}h2{font-size:31px;line-height:1.65;font-weight:800;margin:12px 0 0;letter-spacing:1px}.section-head>p{max-width:370px;font-size:13px;color:var(--muted);margin-top:27px}.section-head h2:after{content:'';display:block;width:72px;height:5px;border-radius:80% 20% 60% 30%;background:var(--honey);margin-top:13px;transform:rotate(-2deg)}.history{display:grid;grid-template-columns:230px 1fr;gap:55px}.history-intro{align-self:start;background:#ffecc6;border:2px dashed #d2a564;border-radius:32px 42px 34px 26px;padding:26px 20px;font-size:20px;font-weight:700;line-height:1.8;text-align:center}.history-mascot{display:block;width:150px;max-width:100%;margin:18px auto 0;border:4px solid white;border-radius:50%;transform:rotate(-5deg)}.timeline{border-left:3px dashed #c99a5c;padding-left:35px}.event{position:relative;padding:20px 25px;margin-bottom:20px;border:1px solid var(--line);background:#fffdf7;border-radius:20px 25px 22px 17px;box-shadow:0 4px 0 #e4c49b55}.event:before{content:'♪';position:absolute;top:25px;left:-52px;font-size:24px;background:var(--paper);width:30px;text-align:center;line-height:1.5;color:#a7682b}.event:last-child{margin-bottom:0}.event time{font-size:11px;color:var(--orange);font-weight:bold;letter-spacing:1px}.event h3{font-size:19px;line-height:1.7;margin:8px 0;font-weight:700}.event p{font-size:13px;color:var(--muted);margin:0}.tag{display:inline-block;background:#ffedc5;border:1px solid #edcc8e;padding:3px 11px;border-radius:20px;font-size:10px;margin-top:12px}.letter-section{background:#f5ddb1;position:relative;border-top:2px dashed #d9b884;border-bottom:2px dashed #d9b884}.letter{max-width:810px;background:#fffdf6;border:2px solid #ceaa78;border-radius:34px 27px 40px 28px;padding:45px 55px;box-shadow:7px 8px 0 #cda06c50;text-align:center;position:relative}.letter:before{content:'♪';position:absolute;left:25px;top:24px;font-size:30px;color:#d6984d;transform:rotate(-12deg)}.letter-mascot{width:100px;height:100px;object-fit:cover;border:2px dashed #d7b47e;border-radius:50%;display:block;margin:0 auto 15px}.letter h2{font-size:28px;margin:15px 0 32px}.letter p{font-size:14px;line-height:2.35;margin:0 0 24px}.signature{text-align:right;font-size:22px;font-weight:bold;padding-right:15px;color:#9c6635}.letters-top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:30px}.count{font-size:12px;color:var(--muted)}.search{background:#fffdf7;border:2px solid #d1ac79;border-radius:30px;padding:10px 18px;font-size:13px;width:255px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.card{background:#fffdf6;border:2px solid #d9b583;border-radius:23px 28px 22px 27px;padding:25px 23px 21px;text-align:left;position:relative;min-height:185px;box-shadow:3px 4px 0 #efd4a5;transition:transform .2s,box-shadow .2s}.card:nth-child(3n+2){background:#fff0dc;transform:rotate(.7deg)}.card:nth-child(3n){background:#f7edda;transform:rotate(-.5deg)}.card:after{content:'♪';position:absolute;top:16px;right:18px;color:#c08b50;font-size:22px}.card:hover{transform:translateY(-4px);box-shadow:4px 8px 0 #e4c49b}.card .tiny{font-size:10px;color:var(--orange);letter-spacing:1px;font-weight:bold}.card h3{font-size:16px;line-height:1.65;margin:14px 0 10px;overflow-wrap:anywhere}.card p{font-size:12px;color:var(--muted);margin:0}.card .open{display:inline-block;color:#85532d;font-size:11px;margin-top:20px;font-weight:700;border-bottom:1px dashed #b38351}.editor-note{font-size:11px;color:var(--muted);margin-top:24px}.more-thanks{text-align:center;font-weight:700;font-size:17px;margin-top:45px;line-height:2}.goals-section{background:#efd0a0;border-top:2px dashed #c79b61;border-bottom:2px dashed #c79b61}.dream{display:grid;grid-template-columns:1fr 1.1fr;gap:45px;align-items:center;margin-bottom:35px;padding:30px 35px;background:#fff8e9;border:2px solid #c79b61;border-radius:40px 33px 46px 34px;position:relative}.s6{font-family:Georgia,serif;font-size:110px;line-height:1.3;color:#955d2e;text-align:center;font-weight:400;text-shadow:3px 3px #f4cd86}.s6 small{display:block;font-family:sans-serif;font-size:11px;letter-spacing:2px;text-shadow:none}.dream h3{font-size:23px;line-height:1.7;margin:10px 0}.dream p{font-size:13px;color:var(--muted)}.goals{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.goal{background:#fff7e8;border:2px dashed #ba8c55;border-radius:30px 25px 35px 26px;padding:24px}.goal span{display:block;font-size:25px;color:var(--orange)}.goal h3{font-size:16px;margin:10px 0;font-weight:bold}.goal p{font-size:12px;color:var(--muted);margin:0}.closing{text-align:center;padding:65px 20px 85px}.closing-mascot{width:160px;display:block;margin:0 auto 20px;border:5px solid white;border-radius:50%;box-shadow:0 0 0 2px #e8c696}.closing h2{font-size:28px}.closing p{font-size:13px;color:var(--muted)}footer{padding:23px 5%;background:#f0dcbb;border-top:2px dashed #d0ad7d;display:flex;justify-content:space-between;gap:20px;color:#805f3c;font-size:10px;letter-spacing:1px}dialog{width:calc(100% - 34px);max-width:575px;max-height:90dvh;overflow:auto;border:3px solid #b68b55;border-radius:30px 26px 37px 28px;background:#fff9ec;color:var(--ink);padding:38px;box-shadow:7px 9px 0 #c49b65}dialog::backdrop{background:#533820a6;backdrop-filter:blur(4px)}dialog h2{font-size:25px;margin:18px 0}dialog p{font-size:14px;white-space:pre-line;line-height:2.2}.modal-mascot{width:80px;height:80px;display:block;border-radius:50%;border:2px dashed #cfaa79;margin:20px auto 8px}.modal-sign{text-align:right;font-size:21px;font-weight:bold;color:var(--orange);margin-top:20px}dialog .close{float:right;width:38px;height:38px;border:2px solid #cbaa7c;border-radius:50%;background:#f7dbac;font-size:22px}.draft{font-size:10px;color:var(--muted);border:1px dashed #cbaa7c;border-radius:20px;padding:4px 8px}#empty{padding:30px;text-align:center;color:var(--muted)}@media(max-width:760px){header{padding:16px 20px;gap:10px}.brand-mascot{width:43px;height:43px}.logo{font-size:17px;gap:7px;letter-spacing:1px}.brand-text small{font-size:8px}.nav{gap:12px;font-size:10px}.wrap{padding:0 22px}.hero{grid-template-columns:1fr;gap:30px;padding-top:28px;padding-bottom:45px;min-height:0}.hero h1{font-size:36px;margin:18px 0;letter-spacing:1px}.hero p{font-size:13px}.mascot-stage{max-width:365px;padding:22px 9px 42px}.mascot-stage:before{inset:5px 0 20px}.anniversary-badge{width:78px;height:78px;right:0;top:3px}.anniversary-badge strong{font-size:30px}.anniversary-badge span{font-size:9px}.mascot-caption{font-size:11px;padding:10px 15px}.strip{font-size:10px;gap:8px;letter-spacing:0}.strip span{font-size:14px;margin-right:3px}section{padding:60px 0}.section-head{display:block;margin-bottom:30px}.section-head>p{margin-top:17px}h2{font-size:26px}.history{grid-template-columns:1fr;gap:25px}.history-intro{display:flex;align-items:center;justify-content:center;gap:16px;font-size:17px;text-align:left;padding:15px 22px}.history-mascot{width:88px;margin:0}.timeline{margin-left:8px;padding-left:23px}.event{padding:18px;margin-bottom:17px}.event:before{left:-40px;font-size:21px}.event h3{font-size:17px}.letter-section{padding:45px 22px}.letter{padding:30px 22px;border-radius:25px}.letter h2{font-size:23px}.letter p{font-size:13px;line-height:2.25}.letter:before{left:18px;top:14px}.letters-top{align-items:stretch;flex-direction:column;gap:12px}.letters-top label{display:flex;flex-direction:column;gap:7px}.search{width:100%}.cards{grid-template-columns:repeat(2,1fr);gap:14px}.card{padding:21px 15px 18px;min-height:183px}.card:after{right:12px;top:10px;font-size:19px}.card .tiny{font-size:9px}.card h3{font-size:14px}.card p{font-size:11px}.card .open{font-size:10px}.more-thanks{font-size:15px}.dream{grid-template-columns:1fr;gap:15px;padding:23px 25px;border-radius:30px}.s6{font-size:90px}.dream h3{font-size:21px}.goals{grid-template-columns:1fr;gap:17px}.goal{padding:21px}.goal span{font-size:23px}.closing{padding:55px 20px}.closing h2{font-size:23px}.closing-mascot{width:130px}footer{flex-direction:column;gap:5px}dialog{padding:26px}dialog h2{font-size:23px}}@media(max-width:360px){.nav{gap:8px}.brand-mascot{width:36px;height:36px}.hero h1{font-size:32px}.cards{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
