/* Warm civic identity and responsive screen layouts; animation stays brief and respects reduced motion. */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Barlow+Condensed:wght@500;600;700&display=swap');
.landing-form{margin-top:32px}
:root{--cream:#f7f3e8;--ink:#272921;--yellow:#ffcf36;--gold:#e8a820;--line:#d8d6c9;font-family:'Barlow Condensed','Arial Narrow',sans-serif;color:var(--ink);background:var(--cream);font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100svh;display:flex;flex-direction:column}button,textarea{font:inherit}button,a,label[for=upload]{-webkit-tap-highlight-color:transparent}header{margin:0 48px;padding:28px 0 24px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px;font-size:18px;font-weight:700;line-height:.96;letter-spacing:.7px;color:inherit;text-decoration:none}.brand-star{font-size:43px;color:var(--gold);line-height:1}.header-note{font-size:14px;letter-spacing:1.5px}main{flex:1;display:grid;place-items:center;padding:34px 24px 42px}.screen{width:100%;max-width:650px;text-align:center}[hidden]{display:none!important}.hero-star{position:relative;color:var(--yellow);font-size:150px;line-height:1;width:160px;margin:0 auto 19px;transform:rotate(-12deg);text-shadow:0 3px 0 #d99b1c;-webkit-text-stroke:1px #dba123}h1,h2{font-family:'Archivo Black','Arial Black',sans-serif;font-weight:900;letter-spacing:-3px;line-height:1.02;margin:0;font-size:clamp(40px,6vw,70px)}.hero-second-line{display:inline-block;transform:rotate(-1.5deg)}.intro{font-family:Arial,sans-serif;font-size:16px;line-height:1.5;margin:22px 0 30px;color:#67675d}form{max-width:420px;margin:auto}label{display:block;font-size:18px;font-weight:600;letter-spacing:1.5px;margin-bottom:12px}.input-wrap{position:relative}textarea{resize:vertical;width:100%;min-height:92px;border:1.5px solid var(--ink);border-radius:5px;background:#fffdf6;padding:17px 45px 17px 19px;color:var(--ink);font-family:Arial,sans-serif;font-size:18px;line-height:1.5;box-shadow:0 3px 0 #e1ded1}textarea::placeholder{color:#8a8a7e}.input-star{position:absolute;right:17px;bottom:17px;font-size:23px;color:#969889}.primary{cursor:pointer;min-height:55px;border:1.5px solid var(--ink);border-radius:6px;padding:11px 26px;background:var(--yellow);color:var(--ink);font-size:21px;font-weight:700;letter-spacing:1.5px;box-shadow:0 4px 0 var(--ink);transition:transform .1s,box-shadow .1s}.primary{min-width:164px;margin-top:23px}.primary span{margin-left:24px}.primary:hover{background:#ffdb59}.primary:active{transform:translateY(4px);box-shadow:0 0 0 var(--ink)}button:disabled{opacity:.5;cursor:wait}.footnote{font-size:13px;letter-spacing:1.6px;margin:28px 0 0;color:#77796c}footer{margin:0 48px;border-top:1px solid var(--line);padding:22px 0;display:flex;justify-content:space-between;gap:20px;font-size:12px;letter-spacing:1.4px;color:#727668}.footer-seal{display:flex;gap:8px;align-items:center}.footer-seal:first-letter{color:var(--gold)}.small-star{font-size:66px;color:var(--gold);transform:rotate(-10deg);margin-bottom:15px}h2{font-size:clamp(38px,6vw,58px)}.camera-frame{position:relative;max-width:360px;aspect-ratio:1;margin:auto;border:2px solid var(--ink);border-radius:8px;background:#e5e5d9;padding:8px;overflow:hidden}video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1);border-radius:3px}#camera-message{position:absolute;inset:0;display:grid;place-items:center;padding:50px;font-size:20px}.camera-corner{position:absolute;bottom:18px;left:18px;font-size:12px;letter-spacing:2px;background:var(--cream);padding:5px 8px}.text-button{display:block;border:0;background:none;margin:22px auto 0;font-size:14px;letter-spacing:1px;color:var(--ink);text-decoration:underline;text-underline-offset:4px;cursor:pointer;padding:5px}.back{color:#757767}#camera-error{font-family:Arial,sans-serif;font-size:14px;line-height:1.5;max-width:400px;margin:16px auto 0}.result-label{font-size:16px;letter-spacing:2px;margin:0 0 22px}#photo-preview{width:min(100%,365px);aspect-ratio:4/5;object-fit:cover;border-radius:6px}#stamp{position:fixed;inset:0;background:#f7f3e8f5;display:grid;place-items:center;z-index:10}#stamp div{font-family:'Archivo Black',sans-serif;display:grid;font-size:48px;transform:rotate(-9deg);animation:stamp .55s ease-out}#stamp span{color:var(--gold);font-size:180px;line-height:1.2}@keyframes stamp{0%{transform:scale(2) rotate(8deg);opacity:0}65%{transform:scale(.93) rotate(-9deg);opacity:1}100%{transform:scale(1) rotate(-9deg)}}:focus-visible{outline:3px solid #476f8c;outline-offset:5px}@media(min-width:1000px) and (min-height:850px){main{padding-top:55px;padding-bottom:65px}.hero-star{margin-bottom:27px}.intro{margin-bottom:37px}}@media(max-width:600px){header{margin:0 22px;padding:22px 0}.header-note{font-size:12px;max-width:95px;text-align:right;line-height:1.4}main{padding:28px 22px 36px}.hero-star{font-size:120px;width:130px;margin-bottom:22px}h1{letter-spacing:-2px;font-size:clamp(34px,9.5vw,55px)}footer{margin:0 22px;font-size:12px;line-height:1.4}.footer-seal span{max-width:95px}.intro{font-size:15px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Falling stars are decorative, never capture input, and clear after one pass. */
.star-shower{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:20;contain:strict}
.falling-star{position:absolute;top:-70px;left:var(--left);font-family:Arial,sans-serif;font-size:var(--size);line-height:1;color:var(--gold);text-shadow:0 2px 0 #b57d19;animation:star-rain var(--duration) cubic-bezier(.35,.05,.65,.8) var(--delay) both}
.falling-star:nth-child(3n){color:var(--yellow)}
@keyframes star-rain{from{transform:translate3d(0,0,0) rotate(0deg)}to{transform:translate3d(var(--drift),calc(100vh + 140px),0) rotate(var(--rotation))}}
@media(prefers-reduced-motion:reduce){.star-shower{display:none}}

/* Emphasize YOU twice on entry without shifting the surrounding headline. */
.hero-you{display:inline-block;transform-origin:right center}
.hero-you.is-arriving{animation:you-bulge 1.1s ease-in-out 2}
@keyframes you-bulge{0%,100%{transform:scale(1)}50%{transform:scale(1.1,1.2)}}

/* The name belongs before the accomplishment; submission feedback stays with its action. */
#person-name{font:18px Arial,sans-serif;width:100%;border:1.5px solid var(--ink);border-radius:5px;background:#fffdf6;padding:16px 19px;margin-bottom:22px;color:var(--ink)}
#submission-actions{margin-top:24px}#submission-actions .primary{margin-top:0}
#submission-status{font:15px/1.5 Arial,sans-serif;max-width:400px;margin:16px auto 0}