:root { color-scheme: light; font-family: Inter, "Segoe UI", Arial, sans-serif; color: #202820; background: #f4f3ed; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; }
[hidden] { display: none !important; }
.site-header { display: flex; justify-content: space-between; align-items: center; padding: 30px 6vw; border-bottom: 1px solid #dedfd5; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-size: 20px; font-weight: 700; letter-spacing: -.7px; }
.brand-mark { display: grid; place-items: center; width: 32px; height: 32px; background: #d8ef78; border-radius: 50%; font-size: 24px; }
.header-note, footer { font-size: 13px; color: #626b60; }
main { width: min(1120px, 88vw); margin: auto; padding: 95px 0; display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: center; }
.eyebrow { font-size: 11px; letter-spacing: 2.4px; font-weight: 700; margin: 0 0 26px; color: #5c6d45; }
h1 { font-size: clamp(44px, 6.5vw, 82px); line-height: 1.06; letter-spacing: -.065em; margin: 0; font-weight: 600; white-space: pre-line; overflow-wrap: anywhere; }
.hint { max-width: 390px; color: #626b60; font-size: 18px; line-height: 1.7; margin: 26px 0 34px; }
.button { display: inline-flex; gap: 40px; justify-content: space-between; align-items: center; border-radius: 9px; background: #263c2c; color: white; padding: 19px 23px; font-weight: 600; text-decoration: none; transition: background .15s, transform .15s; }
.button:hover { background: #38543f; transform: translateY(-2px); }
a:focus-visible { outline: 3px solid #729631; outline-offset: 5px; }
.button > span:last-child { font-size: 23px; line-height: 1; }
.destination { display: flex; flex-wrap: wrap; gap: 9px; font-size: 12px; color: #626b60; margin-top: 18px; overflow-wrap: anywhere; }
footer { margin: 0 6vw; padding: 24px 0; border-top: 1px solid #dedfd5; }
#page-error { color: #8b3327; }
/* A warm, centered composition keeps the destination in focus. */
:root { color: #48372d; background: #f6efe5; }
body { background: radial-gradient(ellipse at 50% 35%, #fffaf3 0%, #f6efe5 72%); }
.site-header { width: min(1040px, 88vw); margin: 0 auto; padding: 28px 0; border: 0; }
.brand { font-size: 18px; font-weight: 600; letter-spacing: -.5px; }
.brand-mark { width: 30px; height: 30px; background: #eddbca; color: #925239; border-radius: 10px; font-size: 21px; }
.header-note, footer { font-size: 12px; color: #826f60; }
main { width: min(640px, 88vw); display: block; padding: 74px 0 90px; text-align: center; }
.link-card { padding: 20px 0; }
.eyebrow { font-size: 10px; letter-spacing: 2.2px; font-weight: 600; margin-bottom: 27px; color: #956c51; }
h1 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(42px, 6.5vw, 68px); line-height: 1.13; letter-spacing: -.045em; font-weight: 400; }
.hint { max-width: 370px; color: #826f60; font-size: 16px; line-height: 1.8; margin: 25px auto 32px; }
.button { max-width: 100%; gap: 28px; border: 1px solid #945336; border-radius: 14px; background: #9b583c; color: #fffaf4; padding: 18px 25px; font-size: 15px; box-shadow: 0 5px 12px #824a2d16; }
.button:hover { background: #85472f; box-shadow: 0 7px 16px #824a2d25; }
a:focus-visible { outline-color: #98603f; }
.button > span:first-child { overflow-wrap: anywhere; min-width: 0; }
.button > span:last-child { font-size: 21px; }
.destination { justify-content: center; gap: 8px; font-size: 11px; color: #826f60; margin-top: 19px; }
#destination-host { max-width: 100%; }
footer { margin: 0 auto; padding: 24px 0 30px; border: 0; text-align: center; }
@media (max-width: 480px) { .site-header { padding: 23px 0; } .header-note { display: none; } main { padding: 48px 0 64px; } .hint { font-size: 15px; } }
@media (prefers-reduced-motion: reduce) { .button { transition: none; } }