@charset "UTF-8";
:root{--ink:oklch(24% .043 255);--cream:oklch(94% .027 85);--gold:oklch(77% .081 81);--muted:oklch(76% .024 85);--text:oklch(31% .04 255);--serif:Georgia,'Times New Roman',serif}
*{box-sizing:border-box}body{margin:0;background:var(--ink);color:var(--cream);font-family:'Segoe UI',Arial,sans-serif;min-height:100svh;background-image:radial-gradient(ellipse at 50% 60%,oklch(33% .048 252 / .5),transparent 65%)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:8px}button{cursor:pointer}a{color:inherit;text-decoration:none}.frame{position:fixed;inset:16px;border:1px solid oklch(77% .081 81 / .2);pointer-events:none;z-index:20}.frame:before,.frame:after{content:'✦';position:absolute;top:-10px;color:var(--gold);background:var(--ink);padding:0 9px;font-size:16px}.frame:before{left:24px}.frame:after{right:24px}header{max-width:1440px;margin:auto;padding:43px 64px 16px;display:flex;align-items:center;justify-content:space-between}.wordmark{font:italic 23px var(--serif)}.wordmark span{display:block;font:10px 'Segoe UI',sans-serif;letter-spacing:2.4px;margin-top:10px;color:var(--muted)}.edition{font-size:11px;letter-spacing:2.6px;color:var(--muted)}main{max-width:1250px;margin:auto;display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;min-height:calc(100svh - 200px);padding:30px 64px 65px;gap:24px}.eyebrow{font-size:10px;letter-spacing:2px;line-height:2;color:var(--gold);max-width:350px}h1{font:400 clamp(46px,5.2vw,76px)/1.18 var(--serif);letter-spacing:-2.5px;margin:27px 0}h1 em{color:var(--gold);font-weight:400}.lead{font-size:16px;line-height:1.9;color:var(--muted)}.letter-area{padding-top:30px;text-align:center;min-width:0}.stage{height:420px;position:relative;display:flex;align-items:flex-end;justify-content:center;perspective:1400px}.envelope{position:relative;width:440px;height:286px;flex-shrink:0;transform:rotate(-6deg);transition:transform 1s cubic-bezier(.16,1,.3,1);filter:drop-shadow(0 25px 25px oklch(10% .02 255 / .3))}.envelope-back{position:absolute;inset:0;background:oklch(78% .041 85);border-radius:4px}.pocket{position:absolute;inset:0;background:oklch(88% .033 85);z-index:3;clip-path:polygon(0 0,50% 55%,100% 0,100% 100%,0 100%)}.fold-left,.fold-right,.fold-bottom{position:absolute;inset:0;z-index:4;pointer-events:none}.fold-left{background:linear-gradient(35deg,oklch(88% .03 85),oklch(94% .026 85));clip-path:polygon(0 0,54% 57%,0 100%)}.fold-right{background:linear-gradient(-35deg,oklch(89% .03 85),oklch(95% .026 85));clip-path:polygon(100% 0,46% 57%,100% 100%)}.fold-bottom{background:linear-gradient(0deg,oklch(91% .028 85),oklch(95% .026 85));clip-path:polygon(0 100%,50% 47%,100% 100%)}.flap{position:absolute;inset:0;z-index:6;background:linear-gradient(180deg,oklch(95% .026 85),oklch(87% .04 85));clip-path:polygon(0 0,100% 0,50% 58%);transform-origin:top;transition:transform .85s cubic-bezier(.4,0,.2,1),filter .85s;backface-visibility:visible}.seal{position:absolute;top:43%;left:calc(50% - 31px);z-index:7;width:62px;height:62px;border-radius:50%;border:3px double oklch(64% .085 75);color:oklch(39% .06 70);background:radial-gradient(circle at 32% 25%,oklch(83% .09 85),oklch(62% .095 75));box-shadow:0 3px 5px oklch(30% .04 65 / .35),inset 0 0 0 5px oklch(80% .08 80 / .7);transition:opacity .25s,transform .3s}.seal span{font-size:32px}.seal:hover{transform:scale(1.09)}.envelope-caption{position:absolute;bottom:28px;left:0;right:0;z-index:5;color:oklch(45% .05 75);pointer-events:none}.envelope-caption span{font-size:10px;letter-spacing:2px}.envelope-caption i{display:block;font:italic 18px var(--serif);margin-top:8px}.invitation{position:absolute;bottom:14px;left:20px;width:400px;background:var(--cream);color:var(--text);padding:14px;z-index:2;visibility:hidden;transform:translateY(0) scale(.9);transform-origin:bottom;box-shadow:0 8px 28px oklch(10% .015 255 / .18)}.card-border{border:1px solid oklch(67% .06 80 / .6);padding:23px 17px 25px;position:relative}.cap{height:36px;width:65px;color:oklch(53% .075 80);margin-bottom:10px}.card-kicker{font-size:9px;letter-spacing:2.5px;margin:4px 0 12px}h2{font:500 36px/1.25 var(--serif);margin:0;outline:none}.degree{font-size:11px;letter-spacing:5px;margin:9px 0 0}.rule{height:24px;display:flex;align-items:center;gap:12px;margin:7px 30px;color:oklch(59% .07 80)}.rule:before,.rule:after{content:'';height:1px;flex:1;background:oklch(73% .06 80 / .5)}.rule span{font-size:12px}.graduate{font:italic 27px var(--serif);margin:6px 0}.school{font-size:13px;margin:4px 0 15px}.message{font-size:12px;line-height:1.8;margin:0 0 17px}.details{border-top:1px solid oklch(73% .06 80 / .4);padding-top:12px}.details div+div{margin-top:12px}.details span{display:block;font-size:9px;letter-spacing:2px;margin-bottom:5px;color:oklch(48% .05 75)}.details strong{font-size:13px;font-weight:500}.details p{font-size:12px;margin:5px 0}.signoff{font:italic 15px var(--serif);margin:20px 0 0}.controls{min-height:116px;padding-top:42px;position:relative}.open-button{border:0;border-bottom:1px solid oklch(77% .081 81 / .5);padding:9px 0;background:none;color:var(--cream);font-size:15px;letter-spacing:.3px}.open-button span{margin-left:23px;color:var(--gold)}.open-button:hover{color:var(--gold)}.hint{font-size:12px;letter-spacing:.2px;color:var(--muted);margin:13px 0}.reset{border:0;background:none;color:var(--gold);padding:10px;font-size:14px}.stage.open .envelope{transform:translateY(75px) rotate(0)}.stage.open .seal{opacity:0;transform:scale(.65);pointer-events:none}.stage.open .flap{transform:rotateX(180deg);filter:brightness(.8);z-index:1}.stage.open .invitation{visibility:visible;animation:letter-flight 3.6s .65s ease-in-out both}.stage.open{margin-bottom:80px}.stage.open .envelope-caption{opacity:.55}.letter-area:has(.open) .controls{padding-top:26px}.letter-area:has(.open) .hint{display:none}.confetti{position:absolute;inset:0;pointer-events:none;z-index:10;overflow:visible}.confetti i{position:absolute;left:50%;top:42%;width:5px;height:9px;background:var(--gold);opacity:0;animation:celebrate 1.9s ease-out forwards;animation-delay:var(--delay);transform:rotate(var(--rotation))}.confetti i:nth-child(3n){background:var(--cream)}@keyframes celebrate{0%{opacity:0;transform:translate(0,0) rotate(0)}15%{opacity:.9}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--rotation))}}footer{max-width:1440px;margin:auto;padding:25px 64px 36px;display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:2px;color:var(--muted)}.footer-star{font-size:17px;color:var(--gold)}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}[hidden]{display:none!important}
@media(min-width:1400px){main{gap:80px}.stage{height:460px}}
@media(max-width:900px){header{padding:36px 38px 10px}.edition{display:none}main{grid-template-columns:1fr;padding:24px 30px 20px;gap:0}.intro{text-align:center}.eyebrow{max-width:none;margin:8px auto}h1{font-size:54px;margin:18px 0 15px}h1 br{display:none}.lead{font-size:14px}.letter-area{padding-top:0}.stage{height:345px}.stage.open{height:500px;margin-bottom:55px}.stage.open .envelope{transform:translateY(45px) rotate(0)}footer{padding:28px 38px 35px;font-size:8px;letter-spacing:1px}.controls{padding-top:35px}}
@media(max-width:520px){.frame{inset:10px}header{padding:29px 28px 15px}.wordmark{font-size:20px}.wordmark span{font-size:9px}main{padding:15px 22px 8px}h1{font-size:41px;letter-spacing:-1.4px}h1 br{display:block}.eyebrow{font-size:9px;max-width:280px}.lead{font-size:14px;margin-bottom:0}.stage{height:280px}.envelope{width:310px;height:206px}.invitation{width:290px;left:10px;padding:10px;bottom:10px}.card-border{padding:19px 9px}.cap{height:30px}.card-kicker{font-size:8px}h2{font-size:30px}.graduate{font-size:24px}.message{font-size:11px}.seal{width:54px;height:54px;left:calc(50% - 27px);top:40%}.envelope-caption{bottom:18px}.envelope-caption span{font-size:8px}.envelope-caption i{font-size:15px}.stage.open{height:535px;margin-bottom:15px}.stage.open .envelope{transform:translateY(0) rotate(0)}.controls{padding-top:29px}.hint{font-size:11px}footer{justify-content:center;gap:20px;padding:22px 25px 30px}footer>span:last-child{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}.confetti{display:none}}

/* Vietnamese-safe fonts without an external font download. */
h1{letter-spacing:-1px;line-height:1.3}h2{font-weight:400;line-height:1.4;letter-spacing:0}
.invitation{font-family:'Segoe UI',Arial,sans-serif;transform-origin:50% 100%}
.graduate,.signoff{line-height:1.5}.card-kicker{line-height:1.6}
.stage{--sway:75px;--lift:-230px;--rest:-110px}
.stage.open{height:690px;margin-bottom:0}.stage.open .envelope{transform:rotate(0)}
.stage.open .card-border>*{opacity:0}.stage.revealed .card-border>*{opacity:1;transition:opacity .55s ease-out}
.stage.revealed .invitation{animation:none;transform:translate(0,var(--rest));z-index:8}
@keyframes letter-flight{
0%{transform:translate(0,0) rotate(0) scale(.36);z-index:2}
19%{transform:translate(0,-220px) rotate(-8deg) scale(.48);z-index:2}
20%{transform:translate(0,-220px) rotate(-8deg) scale(.48);z-index:8}
37%{transform:translate(calc(-1 * var(--sway)),var(--lift)) rotate(-17deg) scale(.55);z-index:8}
56%{transform:translate(var(--sway),-180px) rotate(14deg) scale(.62);z-index:8}
72%{transform:translate(calc(-.65 * var(--sway)),-200px) rotate(-10deg) scale(.7);z-index:8}
85%{transform:translate(calc(.3 * var(--sway)),-160px) rotate(5deg) scale(.82);z-index:8}
100%{transform:translate(0,var(--rest)) rotate(0) scale(1);z-index:8}}
@media(max-width:900px){.stage.open{height:680px;margin-bottom:0}.stage.open .envelope{transform:rotate(0)}}
@media(max-width:520px){.stage{--sway:38px;--lift:-200px;--rest:-80px}.stage.open{height:600px}.envelope{width:min(310px,calc(100vw - 58px))}.invitation{width:calc(100% - 20px)}h1{letter-spacing:-.5px}.message{font-size:12px}.school,.details strong{font-size:14px}.signoff{font-size:15px}}
@media(prefers-reduced-motion:reduce){.stage.open .card-border>*{opacity:1;transition:none}}

h1,h2,.graduate,.signoff{font-family:'Segoe UI',Arial,sans-serif;font-style:normal}h1{font-weight:300;letter-spacing:-1.5px}h1 em{font-style:normal;font-weight:400}h2{font-weight:500}.graduate{font-weight:400}.signoff{font-size:14px}
/* Fluid layout, including long recipient names and enlarged text. */
html{overflow-x:clip}body{overflow-x:clip}
main{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);padding-inline:clamp(28px,4vw,64px)}
.intro,.letter-area{min-width:0}.letter-area{width:100%}
.envelope{width:min(440px,90%);height:auto;aspect-ratio:440/286}
.invitation{left:4%;width:92%;bottom:12px}
.card-border{padding:24px clamp(12px,3vw,24px)}
.recipient{font-size:clamp(19px,2vw,25px);font-weight:500;color:oklch(45% .06 75);line-height:1.5;margin:4px 0 18px;overflow-wrap:anywhere}
.envelope-caption{padding-inline:20px}.envelope-caption span{display:block;font-size:13px;line-height:1.5;letter-spacing:1px;overflow-wrap:anywhere}
.message{font-size:14px;line-height:1.7}.school,.details strong,.details p{font-size:14px;line-height:1.65}.details span,.card-kicker{font-size:11px;line-height:1.6}
h2{font-size:clamp(25px,3vw,36px)}.graduate{font-size:clamp(22px,2.5vw,28px)}
.card-border p,.card-border strong{overflow-wrap:anywhere}.lead{max-width:38ch}.stage.open{height:var(--open-height,780px);margin-bottom:0}.stage{isolation:isolate}
.open-button,.reset{min-height:46px;min-width:130px}.controls{padding-inline:8px}.hint{font-size:13px;line-height:1.6}
@media(max-width:1050px){main{grid-template-columns:1fr;max-width:760px;gap:12px;padding:24px 30px}.intro{text-align:center}.eyebrow{margin-inline:auto;max-width:440px}.lead{margin-inline:auto}.edition{display:none}h1{font-size:clamp(36px,6vw,54px);margin:18px 0;line-height:1.25}h1 br{display:block}.letter-area{padding-top:0}.stage{height:335px}.stage.open{height:var(--open-height,780px)}header{padding:32px 32px 12px}}
@media(max-width:520px){main{padding:12px 20px 18px;gap:6px}header{padding:28px 25px 12px}.frame{inset:9px}.stage{height:260px;--sway:32px}.stage.open{height:var(--open-height,780px)}.envelope{width:92%}.invitation{padding:9px;left:3%;width:94%}.card-border{padding:20px 12px}.lead{font-size:15px;line-height:1.7;max-width:29ch}.eyebrow{font-size:10px;letter-spacing:1.2px;max-width:290px}.envelope-caption{bottom:13px}.envelope-caption span{font-size:12px}.envelope-caption i{margin-top:3px;font-size:14px}.recipient{font-size:20px}.message br{display:none}.card-kicker{letter-spacing:1.6px}.controls{padding-top:24px}footer{padding:20px 24px 30px}.signoff{line-height:1.7}.rule{margin-inline:20px}}
@media(max-width:360px){h1{font-size:34px}.stage{height:230px}.seal{width:48px;height:48px;left:calc(50% - 24px)}.envelope-caption i{display:none}.card-border{padding-inline:10px}.degree{letter-spacing:3px}}

/* Hero portrait positioned flush at bottom-right corner */
.intro{position:relative;z-index:4}
.letter-area{position:relative;z-index:5}
.envelope{z-index:5}
.hero-portrait{position:fixed;bottom:0;right:0;left:auto;height:clamp(480px,65vh,760px);width:auto;max-width:44vw;display:flex;align-items:flex-end;justify-content:flex-end;pointer-events:none;z-index:1;user-select:none;transition:transform .8s cubic-bezier(.16,1,.3,1),opacity .6s ease}
.hero-portrait-pic{height:100%;display:flex;align-items:flex-end;justify-content:flex-end}
.hero-portrait-img{width:auto;height:100%;max-height:100%;object-fit:contain;object-position:bottom right;filter:drop-shadow(0 15px 35px oklch(10% .02 255 / .5)) drop-shadow(0 0 40px oklch(77% .081 81 / .12));-webkit-mask-image:linear-gradient(to top,transparent 0%,black 12%,black 100%),linear-gradient(to left,black 75%,transparent 100%);mask-image:linear-gradient(to top,transparent 0%,black 12%,black 100%),linear-gradient(to left,black 75%,transparent 100%);-webkit-mask-composite:source-in;mask-composite:intersect;animation:hero-portrait-appear .5s cubic-bezier(.16,1,.3,1) both}
body:has(.stage.open) .hero-portrait{opacity:.25;transform:translateY(25px) scale(.96)}
@keyframes hero-portrait-appear{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}

/* Laptop & Compact Desktop Responsive Screen Optimization */
@media(max-width:1440px), (max-height:890px){
  header{padding:22px 48px 8px}
  .wordmark{font-size:21px}
  main{padding:12px 48px 24px;min-height:calc(100svh - 130px);gap:28px}
  h1{font-size:clamp(38px,4.2vw,56px);letter-spacing:-1.8px;margin:16px 0}
  .lead{font-size:15px;line-height:1.7}
  .stage{height:360px}
  .envelope{width:400px;height:260px}
  .controls{min-height:90px;padding-top:20px}
  footer{padding:16px 48px 22px}
  .hero-portrait{height:clamp(400px,60vh,620px);max-width:40vw}
}

@media(max-height:760px){
  header{padding:14px 36px 4px}
  main{padding:8px 36px 14px;min-height:calc(100svh - 96px);gap:18px}
  h1{font-size:clamp(30px,3.5vw,44px);margin:10px 0;letter-spacing:-1.4px}
  .eyebrow{font-size:9px;line-height:1.5}
  .lead{font-size:14px;line-height:1.6}
  .stage{height:300px}
  .envelope{width:340px;height:221px}
  .controls{min-height:70px;padding-top:12px}
  footer{padding:10px 36px 14px}
  .hero-portrait{height:clamp(300px,52vh,440px);max-width:36vw;opacity:.9}
}

@media(max-width:1050px){.hero-portrait{height:clamp(360px,52vh,520px);max-width:50vw}}
@media(max-width:768px){.hero-portrait{position:absolute;bottom:0;right:0;left:auto;height:clamp(300px,42vh,420px);max-width:62vw;opacity:.8}}
@media(max-width:520px){.hero-portrait{height:clamp(240px,36vh,330px);max-width:68vw;opacity:.7}}