:root{
 color-scheme:light;font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
 background:#bbaa89;color:#fff;--gutter:clamp(20px,4vw,56px);
 --text-shadow:0 2px 5px #171b13a6,0 0 20px #171b1373;
}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden}
body{min-height:100svh}
#colony{display:block;position:fixed;inset:0;z-index:0;width:100%;height:100%;touch-action:none;cursor:crosshair;outline:none}
#colony:focus-visible{outline:2px solid #fff;outline-offset:-7px}
/* Only the lower white caption needs static shading. The logo is now actual
   sand relief: this element supplies layout/accessibility, never painted ink. */
body::before{
 content:'';position:fixed;inset:0;z-index:1;pointer-events:none;
 background:linear-gradient(to top,#171e18bd,transparent 280px);
}
.masthead,.caption,.scene-note{z-index:2;pointer-events:none;user-select:none;color:#fff;text-shadow:var(--text-shadow)}
.masthead{
 position:fixed;top:calc(28px + env(safe-area-inset-top,0px));
 left:calc(var(--gutter) + env(safe-area-inset-left,0px));right:calc(var(--gutter) + env(safe-area-inset-right,0px));
 display:flex;justify-content:center;
}
.logo-imprint{width:380px;max-width:100%;aspect-ratio:500 / 191;flex:none;pointer-events:none}
.caption{
 position:fixed;left:calc(var(--gutter) + env(safe-area-inset-left,0px));right:calc(var(--gutter) + env(safe-area-inset-right,0px));
 bottom:calc(64px + env(safe-area-inset-bottom,0px));text-align:center;
}
.eyebrow{display:block;font-size:10px;letter-spacing:.24em;font-weight:650;color:#fff}
h1{margin:12px 0 14px;font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(34px,3.6vw,52px);letter-spacing:-.04em;line-height:1.08;color:#fff}
h1 em{font-weight:400;color:#fff}
.caption p{font-size:12px;margin:0 auto;line-height:1.65;color:#fff;max-width:350px;text-wrap:pretty}
.scene-note{
 position:fixed;left:calc(var(--gutter) + env(safe-area-inset-left,0px));right:calc(var(--gutter) + env(safe-area-inset-right,0px));
 bottom:calc(22px + env(safe-area-inset-bottom,0px));margin:0;text-align:center;font-size:9px;letter-spacing:.24em;line-height:1.5;
}
.fallback{position:fixed;z-index:3;left:20px;right:20px;top:42%;padding:18px;border-radius:10px;background:#22291cf0;color:#fff;text-align:center;font-size:13px;line-height:1.6;pointer-events:none}
.fallback[hidden]{display:none}
@media(max-width:600px){
 .masthead{top:calc(22px + env(safe-area-inset-top,0px))}
 .logo-imprint{width:340px}
 .caption{bottom:calc(59px + env(safe-area-inset-bottom,0px))}
 .eyebrow{font-size:9px;letter-spacing:.2em}
 h1{font-size:clamp(30px,8.7vw,36px);margin:10px 0 12px}
 .caption p{font-size:11px;max-width:275px}
 .scene-note{bottom:calc(20px + env(safe-area-inset-bottom,0px));font-size:8px;letter-spacing:.18em}
}
@media(max-width:355px){
 .masthead{left:calc(10px + env(safe-area-inset-left,0px));right:calc(10px + env(safe-area-inset-right,0px))}
 .logo-imprint{width:300px}
}
@media(max-height:520px) and (min-width:601px){
 .masthead{top:calc(15px + env(safe-area-inset-top,0px))}
 .logo-imprint{width:264px}
 .caption{bottom:calc(43px + env(safe-area-inset-bottom,0px))}
 h1{font-size:27px;margin:6px 0 8px}.eyebrow{font-size:8px}.caption p{font-size:10px;max-width:350px}
 .scene-note{bottom:calc(14px + env(safe-area-inset-bottom,0px));font-size:7px}
 body::before{background:linear-gradient(to top,#171e18bd,transparent 200px)}
}
@media(max-height:620px) and (max-width:600px){
 .masthead{top:calc(15px + env(safe-area-inset-top,0px))}.logo-imprint{width:280px}
 .caption{bottom:calc(43px + env(safe-area-inset-bottom,0px))}h1{font-size:28px;margin:7px 0 9px}
 .eyebrow{font-size:8px}.caption p{font-size:10px;max-width:255px}.scene-note{bottom:calc(15px + env(safe-area-inset-bottom,0px));font-size:7px}
}