/* Painted Meals: site styles */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:#FBF8EE;color:#2E2118;font-family:'EB Garamond',Georgia,serif;font-size:17px;line-height:1.6;-webkit-text-size-adjust:100%}
img{max-width:100%}
a{color:#2E2118}a:hover{color:#8A5A3B}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
button{font:inherit}

/* hero */
.f-hero{background-image:url(img/hero.jpg);background-size:cover;background-position:center}

/* folded letter */
.f-img{background-image:url(img/painting-pear.jpg);background-size:cover;background-position:center}
.lt-face,.lt-back{position:absolute;inset:0;display:block;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.lt-face{background-image:url(img/welcome-letter.jpg);background-size:100% 300%;background-repeat:no-repeat}
.lt-p1{background-position:0 0}.lt-p2{background-position:0 50%}.lt-p3{background-position:0 100%}
.lt-back{transform:rotateX(180deg);background:#F1DCB3}
.lt-flap{transition:transform 0.65s cubic-bezier(0.45,0.05,0.25,1)}
.lt-btn,.lt-art,.lt-rec,.lt-pear{transition:transform 0.8s cubic-bezier(0.45,0.05,0.25,1)}
.is-closed .lt-pear{transform:translate3d(0,0,1.5px);transition-delay:0s}
.is-open .lt-pear{transform:translate3d(27cqw,1cqw,1.5px) rotate(14deg) scale(1.15);transition-delay:1.65s}
.is-closed .lt-top{transform:translateZ(3px) rotateX(-180deg);transition-delay:1.5s}
.is-closed .lt-bot{transform:translateZ(2px) rotateX(180deg);transition-delay:0.95s}
.is-closed .lt-art,.is-closed .lt-rec{transition-delay:0s}
.is-closed .lt-art{transform:translate3d(0,0,1px)}
.is-closed .lt-rec{transform:translate3d(0,0,0.5px)}
.is-open .lt-rec{transform:translate3d(4cqw,18.2cqw,0.5px) rotate(4deg) scale(1.1);transition-delay:1.45s}
.is-open .lt-top{transform:none;transition-delay:0s}
.is-open .lt-bot{transform:none;transition-delay:0.55s}
.is-open .lt-art{transform:translate3d(-4cqw,-19.8cqw,1px) rotate(-5deg) scale(1.1);transition-delay:1.3s}
.lt-btn:focus-visible{outline:2px solid #8A5A3B;outline-offset:6px}
@media (prefers-reduced-motion:reduce){.lt-flap,.lt-btn,.lt-art,.lt-rec,.lt-pear{transition:none}}

/* year of letters */
.env-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px}
@media (max-width:1000px){.env-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (max-width:520px){.env-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.env-btn{position:relative;aspect-ratio:3/2;min-height:52px;border:none;padding:0;cursor:pointer;box-shadow:0 6px 14px rgba(60,40,10,.15);transition:transform .2s}
.env-btn:focus-visible{outline:2px solid #8A5A3B;outline-offset:4px}
.env-btn svg{position:absolute;inset:0;width:100%;height:100%}
.env-btn span{position:absolute;left:8px;bottom:6px;font-family:'Instrument Serif',serif;font-size:15px;letter-spacing:.08em}

/* write a letter */
.w-field:focus-visible,.w-btn:focus-visible{outline:2px solid #8A5A3B;outline-offset:3px}
.theme-btn{text-align:left;cursor:pointer;padding:16px;background:#FFFDF6;font-family:'EB Garamond',serif;color:#2E2118;display:flex;flex-direction:column;gap:10px;min-height:140px;transition:transform .2s;border:1px solid #D8D1BC}
.theme-btn[aria-pressed="true"]{border:2px solid #8A5A3B;transform:translateY(-4px)}
.theme-swatch{position:relative;display:block;width:44px;height:30px;border:1px solid rgba(46,33,24,.35)}
.theme-swatch svg{position:absolute;inset:0;width:100%;height:100%}
.path-btn{text-align:left;cursor:pointer;padding:28px;border:1px solid #D9C6AE;background:transparent;font-family:'EB Garamond',serif;color:#2E2118;display:flex;flex-direction:column;gap:8px;min-height:170px;position:relative}
.path-btn[aria-pressed="true"]{border:2px solid #8A5A3B;background:#FFFDF6}
.quiz-opt{min-height:44px;padding:8px 18px;border-radius:999px;cursor:pointer;font-family:'EB Garamond',serif;font-size:16px;border:1px solid #8A5A3B;background:#FFFDF6;color:#2E2118}
.quiz-opt[aria-pressed="true"]{background:#8A5A3B;color:#FFFFFF}

/* signup stamp */
.pfg-x{background:radial-gradient(circle at 10px 8px,#C9A882 7.5px,transparent 8px) 0 0/20px 16px repeat-x}
.pfg-y{background:radial-gradient(circle at 8px 10px,#C9A882 7.5px,transparent 8px) 0 0/16px 20px repeat-y}
.su-field{min-height:44px;padding:0 14px;border:1px solid #2E2118;background:transparent;font-family:inherit;font-size:16px;color:#2E2118;width:100%;border-radius:0}
.su-field:focus-visible{outline:2px solid #8A5A3B;outline-offset:2px}
.su-label{font-size:13px;letter-spacing:.18em}
.intent{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;border:0;margin:0;padding:0}
.intent legend{font-size:13px;letter-spacing:.18em;margin-bottom:6px;padding:0}
.intent label{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid #D9C6AE;cursor:pointer;line-height:1.3;min-height:44px}
.intent input{margin-top:3px;accent-color:#8A5A3B}
.intent label:has(input:checked){border:2px solid #8A5A3B;background:#FFFDF6;padding:11px 13px}
.intent small{display:block;color:#6B5848;font-size:14px}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;color:#5A4636}
.consent input{margin-top:3px;accent-color:#8A5A3B;width:18px;height:18px;flex:0 0 auto}
.su-btn{align-self:center;margin-top:8px;min-height:44px;padding:0 36px;background:#2E2118;color:#FBF8EE;border:none;border-radius:999px;font-family:inherit;font-size:13px;letter-spacing:.24em;cursor:pointer}
.su-btn[disabled]{opacity:.6;cursor:wait}
.su-msg{margin:0;padding:14px 16px;font-size:15px;line-height:1.45;text-align:left}
.su-msg.ok{background:#F1E6D2;border:1px solid #8A5A3B}
.su-msg.err{background:#F7E1DA;border:1px solid #A9472F;color:#6E2A1C}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* footer */
.foot-links a{color:#FBF8EE;text-decoration:none;min-height:44px;display:flex;align-items:center}
.foot-links a:hover{color:#E5D2B8}
