@import "https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Playfair+Display:ital,wght@0,500;0,600;1,500&display=swap";@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--spacing:.25rem;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.relative{position:relative}.start{inset-inline-start:var(--spacing)}.end{inset-inline-end:var(--spacing)}.table{display:table}.grow{flex-grow:1}}:root{--ink:#322920;--paper:#f4eee4;--rose:#b65b62;--line:#cfc2b2}*{box-sizing:border-box}body{color:var(--ink);background:#e7ded1;margin:0;font-family:DM Mono,monospace}button{font:inherit;cursor:pointer}.site{background:radial-gradient(circle at 76% 15%,#fffaf1 0,transparent 26rem),var(--paper);min-height:100svh;padding:27px clamp(24px,7vw,110px) 48px;position:relative;overflow:hidden}.grain{pointer-events:none;opacity:.36;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 150 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E");position:absolute;inset:0}header,.intro,.opened,.edit-note{z-index:1;position:relative}header{justify-content:space-between;align-items:center;display:flex}.eyebrow,.date,.letter-kicker{letter-spacing:.16em;text-transform:uppercase;margin:0;font-size:10px}.intro{text-align:center;max-width:700px;margin:clamp(85px,15vh,160px) auto 0;animation:.8s both appear}.date{color:var(--rose)}h1,h2,h3{font-family:Playfair Display,Georgia,serif;font-weight:500}h1{letter-spacing:-.055em;max-width:570px;margin:22px auto 18px;font-size:clamp(51px,8vw,92px);line-height:.98}.intro-copy{color:#716457;max-width:390px;margin:0 auto;font-size:12px;line-height:1.8}.password-site{place-items:center;display:grid}.video-gate{z-index:1;text-align:center;width:min(100%,560px);padding:clamp(24px,5vw,42px) 0;animation:.7s both appear;position:relative}.video-gate h1{margin-top:14px;font-size:clamp(45px,7vw,73px)}.player-frame{background:#281e23;border:7px solid #fffaf4;width:min(100%,390px);margin:28px auto 0;overflow:hidden;box-shadow:9px 10px #d8ccbe}.player-frame video{object-fit:contain;background:#281e23;width:100%;max-height:62svh;display:block}.password-card{text-align:center;background:#fffaf4c7;justify-items:center;gap:10px;width:min(100%,460px);margin:30px auto 0;padding:28px;display:grid;box-shadow:7px 8px #d8ccbe}.password-card h2{margin:0;font-size:clamp(31px,5vw,43px)}.password-card>p{color:#716457;margin:0 auto 8px;font-size:12px;line-height:1.8}.password-card label{color:#8b7c6e;letter-spacing:.12em;text-transform:uppercase;justify-self:start;font-size:9px}.password-card input{width:100%;color:var(--ink);background:#fffaf1;border:1px solid #cfc2b2;padding:13px;font:12px DM Mono,monospace}.password-card .primary-button{margin-top:4px}.password-error{color:var(--rose);font-size:10px}.envelope-button{color:var(--rose);letter-spacing:.14em;text-transform:uppercase;background:0 0;border:0;justify-items:center;gap:16px;margin:43px auto 0;font-size:10px;transition:transform .25s;display:grid}.envelope-button:hover{transform:translateY(-5px)}.envelope{background:#dfb4b1;width:198px;height:126px;display:block;position:relative;box-shadow:9px 10px #d8ccbe}.envelope:before,.envelope:after{content:"";z-index:1;width:0;height:0;position:absolute;bottom:0}.envelope:before{border-bottom:63px solid #d59d9c;border-right:99px solid #0000;left:0}.envelope:after{border-bottom:63px solid #d9a4a1;border-left:99px solid #0000;right:0}.envelope-flap{transform-origin:top;border-top:72px solid #ecc8c3;border-left:99px solid #0000;border-right:99px solid #0000;width:0;height:0;transition:transform .55s;position:absolute;top:0;left:0}.envelope-button:hover .envelope-flap{transform:rotateX(165deg)}.seal{z-index:2;color:#f8e9df;background:var(--rose);border-radius:50%;place-items:center;width:34px;height:34px;display:grid;position:absolute;top:49px;left:82px}.opened{max-width:940px;margin:clamp(36px,7vh,74px) auto 0;animation:.65s both appear}nav{border-bottom:1px solid var(--line);justify-content:center;gap:27px;display:flex}nav button,.text-button{color:#8b7c6e;text-transform:uppercase;letter-spacing:.12em;background:0 0;border:0;padding:0 0 11px;font-size:10px}nav button.active{color:var(--ink);border-bottom:2px solid var(--rose)}.letter,.gift-page{max-width:650px;margin:48px auto}.letter-kicker{color:var(--rose)}h2{letter-spacing:-.045em;margin:11px 0 30px;font-size:clamp(39px,5vw,61px);line-height:1}.letter-copy{color:#564a3e;max-width:555px;font-size:13px;line-height:1.9}.letter-copy p{margin:0 0 16px}.signature{margin:33px 0 32px;font-family:Playfair Display,serif;font-size:17px;font-style:italic;line-height:1.45}.signature span{font-size:22px}.primary-button{color:#fff8ee;background:var(--rose);letter-spacing:.11em;text-transform:uppercase;border:0;padding:14px 18px;font-size:10px;box-shadow:4px 4px #94474f}.primary-button span{padding-left:10px;font-size:16px}.gift-reveal{max-width:560px;margin:0 auto;position:relative}.gift-feature{background:#ead8ce;animation:.35s both appear;overflow:hidden;box-shadow:8px 8px #d0c1b3}.gift-photo{background-color:#fffaf5;background-position:50%;background-repeat:no-repeat;background-size:contain;height:330px;position:relative}.gift-photo:after{content:"";background:linear-gradient(#0000 72%,#32292024);position:absolute;inset:0}.gift-photo span{z-index:1;color:#6b5d51;letter-spacing:.12em;font-size:9px;position:absolute;bottom:13px;right:16px}.gift-message{background:#f9f0e6;padding:22px 25px 25px}.tiny-label{color:var(--rose);text-transform:uppercase;letter-spacing:.16em;margin:0;font-size:9px}.gift-message h3{margin:8px 0 9px;font-size:32px}.gift-message>p:last-child{color:#62574d;margin:0;font-size:11px;line-height:1.75}.gift-arrow{z-index:2;width:42px;height:42px;color:var(--ink);background:#fff8ef;border:1px solid #c9b7a7;border-radius:50%;font-size:19px;position:absolute;top:145px;box-shadow:2px 2px #c8b7a8}.gift-arrow--left{left:-70px}.gift-arrow--right{right:-70px}.gift-dots{justify-content:center;gap:8px;margin:25px 0 11px;display:flex}.gift-dots button{background:#c9b7a7;border:0;border-radius:50%;width:7px;height:7px;padding:0}.gift-dots button.selected{background:var(--rose);border-radius:9px;width:22px}.gift-hint{color:#958677;text-align:center;text-transform:uppercase;letter-spacing:.11em;margin:0;font-size:9px}.back{margin-top:33px}@keyframes appear{0%{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}@media (width<=700px){.gift-arrow--left{left:-13px}.gift-arrow--right{right:-13px}}@media (width<=600px){.site{padding:22px 22px 52px}.intro{margin-top:16vh}.gift-photo{height:310px}.opened{margin-top:55px}}
