@font-face { font-family: "Instrument Serif"; src: url("/mega/assets/instrument-serif-v2.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
* { box-sizing: border-box; }
:root { color-scheme: dark; --blue: #003399; --home-unit: min(1vw, 1.538svh); }
html, body { margin: 0; min-height: 100%; background: var(--blue); }
body { color: white; font-family: "Instrument Serif", serif; }
.homepage { min-height: 100svh; min-height: 100dvh; padding: max(calc(4 * var(--home-unit)), env(safe-area-inset-top)) max(2.1vw, env(safe-area-inset-right)) max(2.5vw, env(safe-area-inset-bottom)) max(2.1vw, env(safe-area-inset-left)); display: flex; flex-direction: column; }
h1 { font: 700 clamp(40px, calc(10.5 * var(--home-unit)), 164px)/1.28 "Instrument Serif", serif; letter-spacing: -.025em; margin: 0; }
h1 span { display: block; }
.home-preorder { display: flex; flex-direction: column; align-items: center; align-self: center; margin: auto 0 0; width: max-content; max-width: 100%; color: inherit; text-decoration: none; font-size: clamp(52px, calc(10.5 * var(--home-unit)), 164px); font-weight: 700; line-height: 1.05; }
.home-portrait { width: clamp(120px, calc(18.6 * var(--home-unit)), 340px); aspect-ratio: 1027 / 1531; margin-bottom: -.93em; position: relative; }
.home-portrait img { display: block; width: 100%; height: 100%; object-fit: contain; }
.home-portrait::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 54%, var(--blue) 86%); pointer-events: none; }
.home-preorder span { position: relative; }
.home-preorder:focus-visible { outline: 2px solid white; outline-offset: 10px; border-radius: 4px; }
@media (max-width: 600px) { .homepage { padding: max(24px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(40px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); } h1 { font-size: clamp(38px, 10.8vw, 64px); line-height: 1.17; letter-spacing: -.015em; } h1 span + span { margin-top: .3em; } .home-preorder { margin-top: auto; padding-top: 32px; font-size: clamp(64px, 18vw, 100px); } .home-portrait { width: min(46vw, 210px); } }
@media (min-width: 601px) and (max-aspect-ratio: 4/5) { h1 { font-size: 8.45vw; } .home-portrait { width: 30vw; } .home-preorder { margin-bottom: 4svh; } }
@media (min-width: 601px) and (max-height: 560px) { .homepage { padding-top: 18px; } h1 { font-size: min(8.45vw, 12svh); } .home-preorder { font-size: min(8.45vw, 12svh); } .home-portrait { width: min(20vw, 25svh); } }

h1 a { color: inherit; text-decoration: none; }
h1 a:focus-visible { outline: 2px solid white; outline-offset: 6px; }