/* TITAN.SINGULARITY placeholder. Wide screens show the design exactly as drawn (its lettering is part of the art);
   portrait and near-square screens show the art without its baked-in lines and set the same words as real text, so they stay legible.
   The words are real text in both layouts: visually hidden on wide screens, so assistive technology and search engines read them either way. */
:root{color-scheme:dark;--bg:#04050a;--saffron:#f5a83c;--ice:#dbe6ff}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ice);font-family:"Segoe UI","Helvetica Neue",Arial,sans-serif}
body{min-height:100vh;min-height:100svh;display:grid;grid-template-rows:1fr auto;place-items:center}
main{width:100%;display:grid;place-items:center}
.art{width:min(100vw,calc((100svh - 56px) * 16 / 9));aspect-ratio:16/9;position:relative;overflow:hidden;
 -webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent),linear-gradient(to bottom,transparent,#000 3%,#000 97%,transparent);
 -webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent),linear-gradient(to bottom,transparent,#000 3%,#000 97%,transparent);mask-composite:intersect}
.art picture,.art img{display:block;width:100%;height:100%}
.copy{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.wordmark{margin:0;font-weight:300;font-size:inherit}
/* Footer line, red / white / blue, set as real text. */
.bbw{margin:0;padding:14px 16px 22px;text-align:center;font-size:clamp(11px,1.1vw,14px);font-weight:600;letter-spacing:.42em;padding-left:calc(16px + .42em);text-transform:uppercase}
.bbw .r{color:#ff3b3b}
.bbw .w{color:#ffffff}
.bbw .b{color:#3d7bff}

@media (max-aspect-ratio:5/4){
 body{display:flex;flex-direction:column}
 main{display:block;padding:clamp(20px,6svh,56px) 0 clamp(28px,7svh,64px);text-align:center}
 .art{width:100%;aspect-ratio:1.5;margin:0 auto;-webkit-mask-image:linear-gradient(to bottom,#000 88%,transparent);mask-image:linear-gradient(to bottom,#000 88%,transparent)}
 .art picture{position:absolute;left:50%;top:0;width:auto;height:calc(100% * 720 / 500);transform:translateX(-50%)}
 .art img{height:100%;width:auto}
 .copy{position:static;width:auto;height:auto;margin:0;overflow:visible;clip-path:none;white-space:normal;padding:0 20px}
 .wordmark{font-size:clamp(16px,5.2vw,38px);letter-spacing:.16em;line-height:1.2;margin:clamp(6px,2svh,20px) 0 0;padding-left:.16em}
 .wordmark .t{color:var(--saffron)}
 .wordmark .s{color:var(--ice)}
 .tagline{margin:clamp(22px,5svh,44px) 0 0;font-size:clamp(14px,3.8vw,19px);letter-spacing:.14em;line-height:1.7;text-transform:uppercase;color:#c9d4ea}
 .soon{margin:clamp(14px,3svh,28px) 0 0;font-size:clamp(13px,3.4vw,17px);letter-spacing:.4em;padding-left:.4em;text-transform:uppercase;color:var(--ice)}
 .by{margin:clamp(28px,7svh,64px) 0 0;font-size:11px;letter-spacing:.3em;padding-left:.3em;text-transform:uppercase;color:#7d8aa6}
 .bbw{margin-top:auto;font-size:clamp(11px,3.2vw,14px);letter-spacing:.3em;padding:0 16px clamp(28px,6svh,56px);padding-left:calc(16px + .3em)}
}