@font-face{font-family:Optima;src:url('../fonts/OPTIMA.woff2') format('woff2');font-display:swap}@font-face{font-family:Avenir;src:url('../fonts/Avenir Regular.woff2') format('woff2');font-display:swap}
:root{color-scheme:dark;--cream:#f2dbb1;--white:#fffaf5}*{box-sizing:border-box}body{margin:0;color:var(--white);font-family:Avenir,sans-serif;background:#2b0c0a url('../images/background.webp') center/cover fixed no-repeat}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}.page{min-height:100svh;padding:100px 28px 66px;display:flex;flex-direction:column;align-items:center}header{margin-bottom:90px}.logo{width:314px;height:auto;display:block}main{width:100%;max-width:954px;text-align:center}h1{font-family:Optima,serif;font-weight:400;text-transform:uppercase;font-size:50px;line-height:1.2;margin:0 0 18px;white-space:nowrap}.intro{font-size:36px;line-height:1.4;margin:0;letter-spacing:.2px}.emotions{border:0;padding:0;margin:62px auto 50px;display:flex;justify-content:center;gap:66px}.emotion{position:relative;cursor:pointer}.emotion input{position:absolute;opacity:0;width:100%;height:100%;inset:0;margin:0;cursor:pointer}.emotion-content{display:flex;flex-direction:column;align-items:center;gap:18px;text-transform:uppercase;font-size:18px}.emotion img{width:104px;height:104px;border-radius:50%;transition:transform .2s,box-shadow .2s,background .2s}.emotion:hover img{transform:translateY(-4px)}.emotion input:checked+.emotion-content img{box-shadow:0 0 0 5px #f2dbb12b;background:#f2dbb11c;transform:translateY(-4px)}.emotion input:checked+.emotion-content{color:var(--cream)}.emotion input:focus-visible+.emotion-content img{outline:2px solid white;outline-offset:7px}.reason-panel{text-align:left;border:1px solid #ffffff73;border-radius:14px;padding:28px 44px 20px;margin-bottom:44px;background:#13060512}.reason-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.reason-heading h2{font-family:Optima,serif;font-size:34px;font-weight:400;margin:0}.reason-heading>span{font-size:15px;white-space:nowrap}.reason-panel p{margin:0 0 25px;font-size:17px}.select-wrap{position:relative}.select-wrap:after{content:'';position:absolute;right:18px;top:12px;width:10px;height:10px;border-right:1px solid #fff9;border-bottom:1px solid #fff9;transform:rotate(45deg);pointer-events:none}select{appearance:none;width:100%;border:1px solid #ffffff70;border-radius:5px;padding:8px 40px 8px 14px;background:#1e090744;color:var(--white);font-size:16px}option{background:#321411;color:white}.submit-button{border:1px solid #ffffff60;border-radius:25px;min-width:154px;padding:5px 28px;background:transparent;color:var(--white);font-family:Optima,serif;text-transform:uppercase;font-size:23px;line-height:1.2;transition:background .2s}.submit-button:hover{background:#f2dbb11f}.submit-button:disabled{opacity:.55;cursor:wait}button:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--cream);outline-offset:4px}footer{margin-top:auto;padding-top:86px;text-align:center;font-size:15px;letter-spacing:.2px}footer a{color:inherit;text-decoration:none}footer a:hover{text-decoration:underline}.form-error{color:#ffd1bd;margin:0 0 22px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}dialog{color:var(--white);background:#300f0d url('../images/background.webp') center/cover;border:1px solid #f2dbb175;border-radius:18px;padding:48px;max-width:580px;width:calc(100% - 32px);text-align:center;box-shadow:0 30px 100px #0008}dialog::backdrop{background:#110403c9;backdrop-filter:blur(6px)}.close-dialog{position:absolute;right:15px;top:10px;border:0;background:none;color:var(--cream);font-size:30px}.dialog-logo{width:165px}dialog h2{font:400 31px/1.2 Optima,serif;margin:0 0 20px}dialog p{font-size:17px;line-height:1.65}dialog .signature{margin-top:25px}dialog strong{font-weight:600}.done-button{margin-top:12px;font-size:18px}
@media(min-width:1500px){.page{padding-top:108px}header{margin-bottom:94px}}
@media(max-width:1050px){.page{padding-top:65px}header{margin-bottom:65px}h1{font-size:clamp(26px,4.6vw,46px);white-space:normal}.intro{font-size:clamp(19px,3.4vw,30px)}}
@media(max-width:600px){.page{padding:46px 22px 30px}.logo{width:220px}header{margin-bottom:52px}h1{font-size:30px;line-height:1.18;margin-bottom:16px}.intro{font-size:20px;max-width:340px;margin:auto}.emotions{gap:clamp(16px,5vw,28px);margin:43px auto 38px}.emotion img{width:clamp(54px,16vw,76px);height:auto}.emotion-content{font-size:12px;gap:14px}.reason-panel{padding:22px 20px;margin-bottom:30px}.reason-heading{align-items:flex-start}.reason-heading h2{font-size:25px;max-width:205px}.reason-heading>span{font-size:11px;padding-top:6px}.reason-panel p{font-size:14px;margin:8px 0 20px}select{font-size:14px;padding-top:11px;padding-bottom:11px}.select-wrap:after{top:15px}footer{font-size:12px;line-height:1.8;padding-top:58px;max-width:330px}dialog{padding:40px 25px 30px}dialog h2{font-size:28px}dialog p{font-size:15px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Fluid sizing, touch targets, and small-screen form layout. */
html{min-width:0}main,form,fieldset,.reason-panel,.select-wrap{min-width:0;max-width:100%}
h1{white-space:normal;overflow-wrap:break-word}.logo{max-width:100%}
.emotions{width:min(100%,620px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,3vw,44px)}
.emotion-content{min-width:0}.emotion img{width:min(104px,100%);height:auto;aspect-ratio:1}
select,textarea{min-height:44px;font-size:16px}.submit-button{min-height:44px}
.custom-reason-field{margin-top:20px}.custom-reason-field label{display:block;margin-bottom:9px;font-size:16px}
textarea{display:block;box-sizing:border-box;width:100%;max-width:100%;padding:12px 14px;border:1px solid #ffffff70;border-radius:5px;background:#1e090744;color:var(--white);font:16px/1.5 Avenir,sans-serif;resize:vertical}
textarea::placeholder{color:#fff9}textarea:focus-visible{outline:2px solid var(--cream);outline-offset:4px}.custom-reason-field small{display:block;margin-top:7px;color:#ffffffb3;font-size:12px}
footer{overflow-wrap:anywhere}.form-error{overflow-wrap:anywhere}dialog{max-height:calc(100svh - 32px);overflow-y:auto;overscroll-behavior:contain}.close-dialog{min-width:44px;min-height:44px}
@media(max-width:600px){body{background-attachment:scroll}.page{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right));padding-bottom:max(30px,env(safe-area-inset-bottom))}.emotions{max-width:370px;gap:clamp(12px,4vw,24px)}.emotion-content{font-size:clamp(10px,3vw,12px)}.reason-heading{flex-wrap:wrap}.reason-heading h2{max-width:none;flex:1 1 170px}.reason-heading>span{padding-top:0}.reason-panel{padding:20px 16px}select{font-size:16px}.intro{font-size:clamp(17px,5vw,20px)}}
@media(max-width:350px){h1{font-size:26px}.logo{width:190px}.reason-heading{gap:6px}.reason-heading h2{font-size:23px}.emotions{gap:12px}.emotion-content{font-size:10px}}
@media(max-height:600px) and (min-width:601px){.page{padding-top:30px;padding-bottom:25px}header{margin-bottom:30px}.logo{width:230px}.emotions{margin-top:30px;margin-bottom:30px}footer{padding-top:35px}}

/* Match the reference proportions at 1920px and scale down on laptops. */
@media (min-width:601px){
  .page{padding:clamp(38px,5.625vw,108px) 28px clamp(28px,3.44vw,66px)}
  header{margin-bottom:clamp(36px,4.9vw,94px)}
  .logo{width:clamp(190px,16.36vw,314px)}
  main{max-width:clamp(560px,49.7vw,954px)}
  h1{font-size:clamp(28px,2.605vw,50px);line-height:1.2;margin-bottom:clamp(12px,.94vw,18px)}
  .intro{font-size:clamp(19px,1.875vw,36px);line-height:1.4}
  .emotions{width:clamp(370px,32.1vw,616px);grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(30px,3.44vw,66px);margin:clamp(32px,3.23vw,62px) auto clamp(28px,2.6vw,50px)}
  .emotion img{width:min(100%,104px)}
  .emotion-content{font-size:clamp(12px,.94vw,18px);gap:clamp(12px,.94vw,18px)}
  .reason-panel{padding:clamp(18px,1.46vw,28px) clamp(24px,2.3vw,44px) clamp(16px,1.04vw,20px);border-radius:clamp(9px,.73vw,14px);margin-bottom:clamp(26px,2.3vw,44px)}
  .reason-heading h2{font-size:clamp(23px,1.77vw,34px)}
  .reason-heading>span{font-size:clamp(12px,.78vw,15px)}
  .reason-panel p{font-size:clamp(13px,.885vw,17px);margin-bottom:clamp(16px,1.3vw,25px)}
  select{min-height:38px;padding-top:7px;padding-bottom:7px}
  .select-wrap:after{top:11px}
  .submit-button{min-width:clamp(112px,8.02vw,154px);min-height:38px;font-size:clamp(17px,1.2vw,23px);padding:5px 24px}
  footer{font-size:clamp(11px,.782vw,15px);padding-top:clamp(44px,4.48vw,86px)}
  .custom-reason-field label{font-size:14px}
}
@media (min-width:601px) and (max-height:700px){
  .page{padding-top:30px;padding-bottom:24px}
  header{margin-bottom:32px}
  .emotions{margin-top:30px;margin-bottom:28px}
  footer{padding-top:38px}
}
@media (max-width:600px){
  .page{padding-top:36px}
  .logo{width:185px}
  header{margin-bottom:38px}
  main{max-width:420px}
  h1{font-size:clamp(24px,6.2vw,29px)}
  .intro{font-size:clamp(16px,4.25vw,19px)}
  .emotions{max-width:310px;margin-top:34px;margin-bottom:30px;gap:22px}
  .emotion img{max-width:62px}
  .reason-heading h2{font-size:23px}
  .reason-panel{padding:18px 16px;margin-bottom:26px}
  .reason-panel p{font-size:13px;margin-bottom:16px}
  .submit-button{font-size:19px;min-width:128px}
  footer{padding-top:40px}
}

/* A more compact presentation across screen sizes. */
@media (min-width:601px){
  .page{padding-top:clamp(32px,4.4vw,84px);padding-bottom:30px}
  header{margin-bottom:clamp(30px,3.65vw,70px)}
  .logo{width:clamp(165px,13.65vw,262px)}
  main{max-width:clamp(500px,42.2vw,810px)}
  h1{font-size:clamp(25px,2.2vw,42px);margin-bottom:12px}
  .intro{font-size:clamp(17px,1.56vw,30px)}
  .emotions{width:clamp(330px,27vw,518px);gap:clamp(24px,2.75vw,53px);margin:clamp(26px,2.6vw,50px) auto clamp(24px,2.1vw,40px)}
  .emotion img{max-width:86px}
  .emotion-content{font-size:clamp(11px,.8vw,15px);gap:12px}
  .reason-panel{padding:20px 30px 17px;margin-bottom:28px}
  .reason-heading h2{font-size:clamp(21px,1.46vw,28px)}
  .reason-panel p{font-size:13px;margin-bottom:18px}
  .reason-heading>span{font-size:12px}
  .submit-button{min-width:120px;font-size:18px}
  footer{font-size:12px;padding-top:40px}
}
@media (max-width:600px){
  .page{padding-top:30px}
  header{margin-bottom:30px}
  .logo{width:160px}
  h1{font-size:clamp(22px,5.6vw,26px)}
  .intro{font-size:16px}
  .emotions{max-width:280px;gap:20px;margin:28px auto 26px}
  .emotion img{max-width:55px}
  .emotion-content{font-size:10px;gap:10px}
  .reason-heading h2{font-size:21px}
  .reason-panel{padding:16px 14px;margin-bottom:22px}
  .submit-button{font-size:17px;min-width:116px}
  footer{font-size:11px;padding-top:32px}
}

/* Slightly roomier proportions and gentle interaction feedback. */
@media(min-width:601px){
  main{max-width:clamp(530px,44.3vw,850px)}
  .logo{width:clamp(175px,14.4vw,276px)}
  h1{font-size:clamp(26px,2.3vw,44px)}
  .intro{font-size:clamp(18px,1.65vw,32px)}
  .emotions{width:clamp(350px,28.4vw,545px);margin-top:clamp(28px,2.75vw,53px)}
  .emotion img{max-width:91px}
  .reason-heading h2{font-size:clamp(22px,1.56vw,30px)}
  .reason-panel{padding:22px 32px 19px}
}
@media(max-width:600px){
  .logo{width:170px}
  h1{font-size:clamp(23px,5.9vw,28px)}
  .intro{font-size:17px}
  .emotions{max-width:294px}
  .emotion img{max-width:59px}
  .reason-heading h2{font-size:22px}
}
.emotion img{transition:transform .34s cubic-bezier(.22,1,.36,1),box-shadow .34s ease,background .34s ease}
.emotion-content{transition:color .3s ease}
.emotion:hover img{transform:translateY(-2px)}
.emotion input:checked+.emotion-content img{transform:translateY(-2px);box-shadow:0 0 0 3px #f2dbb11f;background:#f2dbb112}
.submit-button,select,textarea{transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease}
.submit-button:hover{background:#f2dbb115;border-color:#f2dbb1a0}
dialog[open]{animation:dialog-enter .32s cubic-bezier(.22,1,.36,1)}
dialog[open]::backdrop{animation:backdrop-enter .32s ease}
@keyframes dialog-enter{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes backdrop-enter{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Center the introduction with natural spacing between words. */
h1,.intro{text-align:center;text-align-last:auto;word-spacing:normal;letter-spacing:normal}
.intro{max-width:none}

.submit-button.is-loading{display:inline-flex;align-items:center;justify-content:center;gap:9px;opacity:.85}
.submit-button.is-loading::before{content:'';width:13px;height:13px;border:1.5px solid #f2dbb140;border-top-color:var(--cream);border-radius:50%;animation:saving-spin .8s linear infinite}
@keyframes saving-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.submit-button.is-loading::before{animation:none}}

.success-animation{width:112px;height:112px;margin:20px auto 16px;pointer-events:none}
.success-animation svg{display:block;width:100%;height:100%}
@media(max-width:600px){.success-animation{width:96px;height:96px;margin:16px auto 12px}}

/* Frosted glass stays inside the selected emoji circle. */
.emotion img{box-sizing:border-box;transition:transform .34s cubic-bezier(.22,1,.36,1),box-shadow .34s ease,background .34s ease,filter .34s ease}
.emotion input:checked+.emotion-content img{
  background:radial-gradient(circle at 30% 20%,#fff7e55c 0%,#f2dbb133 45%,#ffffff14 100%);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:inset 0 0 0 1px #f2dbb1d9,inset 0 2px 7px #ffffff40,0 0 0 3px #f2dbb129,0 6px 20px #00000030,0 0 20px #f2dbb12b;
  transform:translateY(-2px);
}
@media(prefers-reduced-motion:reduce){.emotion img{transition:none}}