@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600&family=Prata&display=swap');
:root{--paper:#f4efe5;--ink:#243e32;--muted:#6c7569;--line:#cdd0bf;--pink:#edb8c4}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Be Vietnam Pro',sans-serif;font-size:14px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible{outline:3px solid #b84c65;outline-offset:5px}header{height:109px;margin:0 5.5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{text-decoration:none;font-family:Georgia,serif;font-size:34px;letter-spacing:-1.5px;line-height:1}.brand span{display:block;font:9px 'Be Vietnam Pro',sans-serif;letter-spacing:4.1px;margin-top:10px}.occasion{font-size:9px;letter-spacing:1.7px;display:flex;align-items:center;gap:32px}.occasion b{font-weight:400;font-size:15px;letter-spacing:2px;border:1px solid var(--line);padding:12px 17px;border-radius:50%}main{min-height:calc(100vh - 180px)}footer{margin:0 5.5%;padding:24px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:10px;letter-spacing:.4px;color:var(--muted)}.hero{max-width:1320px;margin:auto;padding:64px 5.5% 68px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:6%}.eyebrow{text-transform:uppercase;font-size:10px;letter-spacing:2.6px;line-height:1.7;display:block;margin-bottom:22px}.eyebrow:before{content:'✳';margin-right:12px;font-size:18px;vertical-align:middle}h1,h2,h3,p{margin:0}h1,h2{font-family:'Prata',Georgia,serif;font-weight:400}h1{font-size:clamp(44px,5.1vw,72px);line-height:1.24;letter-spacing:-2.5px}h1 em{font-style:normal;color:#9d5263;display:block}.intro{font-size:14px;line-height:1.95;max-width:390px;margin:27px 0;color:#5d695d}.primary{background:var(--ink);color:#fffdf6;border:1px solid var(--ink);border-radius:3px;padding:19px 27px;display:inline-flex;align-items:center;justify-content:space-between;gap:35px;transition:background .2s,transform .2s}.primary:hover{background:#405c48;transform:translateY(-2px)}.arrow{font-size:21px;font-family:Arial}.micro{font-size:10px;color:var(--muted);margin-top:17px;line-height:1.8}.hero-art{height:510px;position:relative}.arch{position:absolute;left:12%;top:0;width:73%;height:465px;background:#d7dec8;border-radius:48% 48% 2px 2px;overflow:hidden}.arch img{width:100%;height:100%;object-fit:cover;object-position:center}.photo-note{position:absolute;left:0;bottom:6px;width:41%;background:#fffcf4;padding:9px 9px 16px;transform:rotate(-9deg);box-shadow:0 8px 25px #243e321c}.photo-note img{width:100%;height:185px;object-fit:cover}.photo-note p{text-align:center;font-family:Georgia,serif;font-style:italic;margin-top:9px;font-size:17px}.seal{position:absolute;right:0;bottom:54px;width:116px;height:116px;background:var(--pink);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(13deg);font-size:10px;line-height:1.8;letter-spacing:1px;text-align:center}.seal strong{font-family:Georgia,serif;font-size:34px;font-weight:400;line-height:1.1}.spark{position:absolute;right:2%;top:16%;font-size:58px;font-family:Georgia}.vertical{position:absolute;right:-14px;top:49%;writing-mode:vertical-rl;font-size:9px;letter-spacing:2px}.chapter{padding:42px 6% 60px;max-width:1140px;margin:auto}.q-top{display:flex;align-items:center;gap:24px;margin-bottom:37px}.back,.text-btn{border:0;background:none;color:var(--ink);padding:10px 0;text-decoration:underline;text-underline-offset:5px}.back{text-decoration:none;font-size:20px;width:36px}.progress{height:2px;background:#d9d8c9;flex:1}.progress div{height:100%;background:#8a9c75;transition:width .25s}.counter{font-size:11px;letter-spacing:2px}.question-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:9%;align-items:center}.scene{height:400px;border-radius:48% 48% 3px 3px;background:#e4dfd2;position:relative;overflow:hidden;display:grid;place-items:center}.scene svg{width:100%;height:100%}.scene-label{position:absolute;bottom:20px;letter-spacing:2px;font-size:9px}.q-copy h2{font-size:31px;line-height:1.5;letter-spacing:-.8px}.story{color:var(--muted);line-height:1.85;margin:17px 0 23px;font-size:13px}.answers{display:grid;gap:10px}.answer{width:100%;background:#faf7ef;border:1px solid #c7ccba;text-align:left;padding:15px 17px;display:flex;align-items:center;gap:15px;color:var(--ink);line-height:1.65;border-radius:3px;transition:all .15s}.answer:hover{background:#e3e8d6;border-color:#819174;transform:translateX(3px)}.answer .letter{flex-shrink:0;font-size:10px;border:1px solid #c7ccba;border-radius:50%;height:25px;width:25px;display:grid;place-items:center}.result{max-width:1120px;margin:auto;padding:48px 6% 60px}.result-heading{text-align:center;margin-bottom:35px}.result-heading h2{font-size:39px;line-height:1.4}.result-heading .eyebrow{margin-bottom:10px}.result-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:7%;align-items:start}.result-photo{background:var(--tone);padding:16px 16px 25px;transform:rotate(-2deg)}.result-photo img{width:100%;height:380px;object-fit:cover}.result-photo p{text-align:center;font-family:Georgia,serif;font-size:24px;margin-top:19px;font-style:italic}.result-copy h3{font-family:'Prata',Georgia,serif;font-size:25px;font-weight:400;line-height:1.55}.result-copy>p{line-height:1.9;margin:17px 0;color:#5d695d}.tags{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0}.tags span{padding:8px 11px;border:1px solid #bac4ac;border-radius:30px;font-size:10px}.letter-note{padding:21px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);line-height:1.9}.letter-note small{display:block;font-size:9px;letter-spacing:2px;margin-bottom:9px}.product{margin-top:21px;line-height:1.8}.product strong{display:block;font-size:14px}.product p{font-size:12px;color:var(--muted);margin-top:5px}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:25px}.actions button{padding:14px 17px}.secondary{background:transparent;border:1px solid var(--ink);border-radius:3px;color:var(--ink)}.result-bottom{margin-top:32px;display:flex;gap:28px;align-items:center}.fine{font-size:10px;line-height:1.8;color:var(--muted);margin-top:25px}.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-top:28px}.mini{background:none;border:1px solid var(--line);padding:8px;color:var(--ink)}.mini img{width:100%;height:160px;object-fit:cover}.mini span{display:block;margin:12px 0;font-size:11px}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:var(--ink);color:white;max-width:90%;padding:13px 20px;border-radius:4px;display:none;z-index:10;font-size:12px}#toast.visible{display:block}.fade{animation:appear .4s ease-out}@keyframes appear{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1500px){.hero{padding-top:80px;padding-bottom:80px}.hero-art{height:550px}.arch{height:510px}}@media(max-width:760px){header{height:88px;margin:0 6%}.brand{font-size:29px}.brand span{font-size:8px}.occasion{font-size:0;gap:0}.occasion b{font-size:12px;padding:10px}.hero{padding:32px 7% 40px;gap:28px;grid-template-columns:1fr}.hero-copy{text-align:center}.eyebrow{font-size:8px;margin-bottom:15px;letter-spacing:2px}h1{font-size:44px;letter-spacing:-1.5px}.intro{font-size:12px;line-height:1.9;margin:18px auto;max-width:320px}.hero-art{height:365px;max-width:380px;width:100%;margin:auto}.arch{height:330px;left:15%;width:69%}.photo-note{width:40%;bottom:0}.photo-note img{height:135px}.photo-note p{font-size:14px}.seal{height:85px;width:85px;bottom:30px;font-size:8px}.seal strong{font-size:26px}.spark{font-size:42px}.primary{padding:16px 23px}.micro{font-size:9px}.vertical{right:0}footer{font-size:8px;padding:20px 0;gap:15px}.chapter{padding:20px 6% 38px}.q-top{margin-bottom:15px}.question-layout{grid-template-columns:1fr;gap:20px}.scene{height:180px;border-radius:100px 100px 3px 3px;max-width:330px;width:100%;margin:auto}.scene svg{height:270px;transform:translateY(-32px)}.scene-label{bottom:10px;font-size:8px}.q-copy h2{font-size:25px}.story{font-size:12px;margin:11px 0 18px}.q-copy .eyebrow{margin-bottom:8px}.answer{font-size:12px;padding:12px 14px}.result{padding:30px 7%}.result-heading h2{font-size:30px}.result-grid{grid-template-columns:1fr;gap:32px}.result-photo{max-width:370px;margin:auto}.result-photo img{height:330px}.result-copy h3{font-size:24px}.result-copy>p{font-size:13px}.gallery{grid-template-columns:repeat(2,1fr)}.result-bottom{gap:20px}.actions button{flex:1;font-size:12px}.fine{font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

h1:focus,h2:focus{outline:none}