*{box-sizing:border-box}body{margin:0;background:#f4efe5;color:#3e2b1d;font-family:Georgia,'Times New Roman',serif}.welcome{min-height:100svh;display:grid;grid-template-columns:1.05fr 1fr}.art{position:relative;min-height:760px;background:linear-gradient(180deg,rgba(244,239,229,.75),transparent 35%,rgba(37,42,25,.65)),url('/assets/journey.png') center 42%/cover}.brand{position:absolute;top:55px;left:24px;right:24px;text-align:center}.eyebrow{font:11px/1.6 Arial,sans-serif;letter-spacing:2.7px;color:#765023}.brand h1{font-size:clamp(30px,3.5vw,60px);font-weight:400;letter-spacing:4px;margin:14px 0}.tagline{font-size:11px;letter-spacing:5px}.art-note{position:absolute;bottom:52px;left:42px;color:#fff9eb}.art-note span{font-size:27px}.art-note p{font-size:15px;letter-spacing:.5px}.registration{display:flex;align-items:center;justify-content:center;padding:40px 55px;background:radial-gradient(ellipse at top right,#fffdf6,transparent 70%)}.form-wrap{width:100%;max-width:415px}.ornament{font-size:44px;color:#a87934;margin-bottom:20px}.form-wrap h2{font-size:36px;line-height:1.17;font-weight:400;margin:17px 0}.intro{font:15px/1.75 Arial,sans-serif;color:#756956;margin-bottom:30px}label{display:block;font:600 13px Arial,sans-serif;margin:21px 0 9px}label span{font-size:11px;color:#786b59;font-weight:400;margin-left:9px}input:not([type=hidden]){width:100%;border:1px solid #d8cbb5;background:#fffdf8;padding:15px 16px;border-radius:3px;font:15px Arial,sans-serif;color:#3e2b1d}input::placeholder{color:#9c9180;font-size:13px}input:focus{outline:2px solid #a87934;outline-offset:3px}small{display:block;font:11px Arial,sans-serif;color:#786b59;margin-top:8px}button{width:100%;margin-top:28px;padding:17px 21px;background:#79572b;border:1px solid #79572b;color:#fff9ed;border-radius:3px;font:16px Georgia,serif;letter-spacing:1px;cursor:pointer}button:hover{background:#61421f}button:focus-visible{outline:3px solid #a87934;outline-offset:4px}button span{float:right}.footnote{font:12px/1.6 Arial,sans-serif;text-align:center;color:#86765e;margin-top:20px}.divider{text-align:center;color:#ad8b52;margin:28px 0 22px;display:flex;align-items:center;gap:17px}.divider:before,.divider:after{content:'';height:1px;background:#ded1bc;flex:1}footer{text-align:center;font-size:12px;letter-spacing:3px}footer span{display:block;font-size:8px;letter-spacing:2px;margin-top:10px}.notice{background:#faeade;border:1px solid #bf8d70;padding:14px;font:14px/1.6 Arial,sans-serif;margin:18px 0}.success{background:#eef2e6;border-color:#a2b285}@media(min-width:1500px){.registration{padding:65px}.art{min-height:100svh}}@media(max-width:760px){.welcome{display:block}.art{min-height:300px;background-position:center 32%}.brand{top:25px}.brand h1{font-size:35px}.art-note{left:25px;bottom:20px}.art-note span{font-size:21px}.art-note p{margin-bottom:0}.registration{padding:32px 25px 40px}.ornament{display:none}.form-wrap h2{font-size:32px}}

/* Compact panel: only empty outer padding moves beyond the viewport. */
body{overflow-x:clip}
.welcome{grid-template-columns:minmax(0,1fr) minmax(380px,440px)}
.art{min-height:100svh;background-image:linear-gradient(180deg,rgba(244,239,229,.65),transparent 38%,rgba(52,47,28,.15)),url('/assets/journey.png')}
.brand h1{font-size:clamp(42px,5vw,76px);letter-spacing:3px}
.art-note{left:clamp(22px,4vw,64px);right:22px;bottom:38px;width:fit-content;max-width:calc(100% - 44px);padding:19px 25px 17px;color:#523b22;background:linear-gradient(110deg,rgba(250,244,225,.94),rgba(244,235,210,.82));border-top:1px solid #b5945d;border-bottom:1px solid #b5945d;box-shadow:0 8px 30px #30251018}
.art-note span{font-size:clamp(19px,2vw,29px);font-weight:400;letter-spacing:.5px}
.art-note p{font:italic 16px/1.6 Georgia,'Times New Roman',serif;letter-spacing:.4px;margin:8px 0 0;color:#79572b}
.registration{position:relative;padding:28px 40px 26px 26px;background:linear-gradient(110deg,#f4efe5,#fffdf6);box-shadow:-10px 0 35px #39260e12;transition:transform .4s ease}
.form-wrap{max-width:350px;min-width:0}
.ornament{font-size:30px;margin-bottom:12px}
.form-wrap .eyebrow{font-size:10px;letter-spacing:2px}
.form-wrap h2{font-size:30px;margin:12px 0}
.intro{font-size:13px;line-height:1.6;margin-bottom:19px}
label{margin:15px 0 7px}
input:not([type=hidden]){padding:12px 13px}
button{padding:13px 18px;margin-top:20px}
.play-button{display:block;width:100%;border:1px solid #a78955;background:transparent;color:#765023;text-align:center;text-decoration:none;font:16px Georgia,serif;letter-spacing:1px;padding:13px 18px;margin-top:10px;border-radius:3px}
.play-button span{float:right}
.play-button:disabled{cursor:not-allowed;opacity:.65}
.play-button:not(:disabled):hover{background:#eee2c9}
.play-button:focus-visible{outline:3px solid #a87934;outline-offset:4px}
.download-note{text-align:center;font-size:10px;margin-top:7px}
.footnote{margin-top:14px;font-size:11px}
.divider{margin:18px 0 16px}
@media(min-width:1000px) and (hover:hover) and (pointer:fine){.registration{transform:translateX(22px)}.registration:hover,.registration:focus-within,.registration:has(.notice){transform:translateX(0)}}
@media(max-width:760px){.welcome{display:block}.art{min-height:420px}.brand h1{font-size:44px}.art-note{left:20px;right:20px;bottom:22px;padding:13px 16px;max-width:calc(100% - 40px)}.art-note span{font-size:20px}.art-note p{font-size:14px}.registration{padding:28px 24px;transform:none}.form-wrap{max-width:390px}.form-wrap h2{font-size:29px}}
@media(prefers-reduced-motion:reduce){.registration{transition:none}}

/* Airier registration and restrained brand typography. */
.welcome{grid-template-columns:minmax(0,1fr) minmax(430px,500px)}
.form-wrap{max-width:405px}
.brand{left:80px;right:16px}
.art-note{padding:0;background:none;border:0;box-shadow:none;color:#3e2b1d;text-shadow:0 1px 5px #fff5dd,0 0 18px #fff5dd}
.art-note span{font-family:Georgia,'Times New Roman',serif;font-size:clamp(20px,2.1vw,30px);font-weight:400;letter-spacing:1.2px}
.art-note p{font:400 11px/1.8 Georgia,'Times New Roman',serif;letter-spacing:2.7px;text-transform:uppercase;color:#523b22;margin-top:10px}
.brand-crest{display:block;width:90px;height:104px;margin:0 auto 12px;background:url('/assets/brand-symbols.png') -19px center/451px 104px no-repeat;mix-blend-mode:multiply}
@media(max-width:1000px) and (min-width:761px){.welcome{grid-template-columns:minmax(0,1fr) 430px}.brand{left:36px;right:12px}.brand h1{font-size:40px}.tagline{letter-spacing:3px}.art-note span{font-size:21px}}
@media(max-width:760px){.welcome{display:block}.brand{left:42px;right:14px}.form-wrap{max-width:405px}.art-note{padding:0}.art-note span{font-size:20px}.art-note p{font-size:10px;letter-spacing:1.7px}.brand-crest{display:block}}
.brand-crest{mask-image:radial-gradient(ellipse at center,#000 38%,transparent 73%);-webkit-mask-image:radial-gradient(ellipse at center,#000 38%,transparent 73%)}
.art-note{text-shadow:0 1px 2px #fff7e5,0 0 7px #fff7e5,0 0 15px #fff7e5}

/* Shared axis and consistent spacing for the registration column. */
.brand{left:24px;right:24px}
.registration{padding:32px 40px;align-items:center}
.form-wrap{max-width:405px;margin-inline:auto}
.brand-crest{margin:0 auto 16px}
.form-wrap>.eyebrow{text-align:center;margin:0 0 12px;line-height:1.6}
.form-wrap>h2{text-align:center;margin:0 0 14px;line-height:1.2;font-size:30px}
.form-wrap>.intro{text-align:center;margin:0 auto 24px;max-width:380px;line-height:1.65}
.form-wrap form{margin:0}
.form-wrap label{display:flex;align-items:baseline;gap:10px;margin:16px 0 8px;line-height:1.4}
.form-wrap label:first-of-type{margin-top:0}
.form-wrap label span{margin-left:0}
.form-wrap input:not([type=hidden]){display:block;min-height:44px}
.form-wrap small{line-height:1.5;margin-top:6px}
.form-wrap button,.form-wrap .play-button{position:relative;display:block;min-height:48px;text-align:center;padding:14px 42px;line-height:18px}
.form-wrap button{margin-top:22px}
.form-wrap button span,.form-wrap .play-button span{float:none;position:absolute;right:18px;top:50%;transform:translateY(-50%)}
.form-wrap .play-button{margin-top:10px}
.form-wrap .notice{margin:0 0 20px;padding:13px 15px}
.form-wrap .footnote{margin:16px 0 0;line-height:1.6}
.form-wrap .divider{margin:22px 0 20px}
.form-wrap footer{line-height:1.5}
@media(max-width:1000px) and (min-width:761px){.registration{padding:28px 32px}.form-wrap>h2{font-size:28px}}
@media(max-width:760px){.brand{left:20px;right:20px}.registration{padding:30px 24px}.form-wrap>h2{font-size:28px}}

/* Position the complete title in the marked area ahead of the elf. */
.art{container-type:inline-size}
.brand{left:59%;right:5%;top:17%;text-align:center}
.brand h1{font-size:clamp(22px,5.4cqw,76px);letter-spacing:.035em;white-space:nowrap;margin:14px 0}
.brand .eyebrow{font-size:clamp(8px,.8cqw,11px);letter-spacing:.22em}
.brand .tagline{font-size:clamp(8px,.8cqw,11px);letter-spacing:.35em;line-height:1.8}
@media(max-width:760px){.brand{left:20px;right:20px;top:25px}.brand h1{font-size:44px}.brand .eyebrow,.brand .tagline{font-size:10px}}

/* Warm antique gold, coordinated with the Register button. */
.art .brand,.art .brand h1,.art .brand .eyebrow,.art .brand .tagline,.art .art-note,.art .art-note p{color:#79572b}
.art .brand{text-shadow:0 1px 2px rgba(255,248,226,.85),0 0 12px rgba(255,248,226,.45)}
.art .art-note{text-shadow:0 1px 2px #fff7e5,0 0 7px #fff7e5,0 0 15px rgba(255,247,229,.85)}