:root { color-scheme: dark; font-family: Georgia, "Times New Roman", serif; background: #000; color: #f0ce7b; }
* { box-sizing: border-box; }
body { margin: 0; }
.page { position: relative; isolation: isolate; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; background: #000; }
.artwork { position: absolute; inset: 0; z-index: -2; background: url("assets/image.png") center / cover no-repeat; }
.artwork::before { content: ""; position: absolute; inset: 0; background: #0009; backdrop-filter: blur(18px); }
.artwork img { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.status { width: 100%; display: flex; flex-direction: column; align-items: center; gap: .8rem; padding: 3rem max(1rem, env(safe-area-inset-right)) max(1.75rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); background: linear-gradient(transparent, #000d 52%, #000); text-align: center; }
h1 { margin: 0; max-width: 100%; font-size: clamp(1.2rem, 3.5vw, 2.4rem); font-weight: 400; line-height: 1.5; letter-spacing: .2em; padding-left: .2em; color: #f0ce7b; text-shadow: 0 2px 5px #000, 0 0 24px #daa64255; overflow-wrap: anywhere; text-wrap: balance; }
.ornament { width: min(8rem, 30%); height: 1px; background: linear-gradient(90deg, transparent, #c59b48, transparent); }
@media (max-width: 600px) { .artwork img { object-fit: cover; object-position: 49% center; } .status { padding-top: 3.5rem; } h1 { letter-spacing: .14em; padding-left: .14em; } }
@media (max-height: 500px) and (min-width: 601px) { .status { padding-top: 1.5rem; padding-bottom: .75rem; gap: .4rem; } h1 { font-size: 1.2rem; } }
@media (forced-colors: active) { h1 { color: CanvasText; text-shadow: none; } .status { background: Canvas; } }