@charset "UTF-8";
:root { color-scheme: dark; font-family: Arial, "Helvetica Neue", "Microsoft YaHei", sans-serif; background: #080b10; color: #f4f6fa; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid #b3eaff; outline-offset: 7px; border-radius: 2px; }
.stage { position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: 600px; height: 100svh; overflow: hidden; background: #080b10; }
.artwork { position: absolute; z-index: -3; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.shade { position: absolute; z-index: -2; inset: 0; background: linear-gradient(180deg, rgba(3,6,12,.3) 0%, transparent 30%, rgba(3,6,12,.14) 58%, rgba(3,6,12,.9) 100%); }
.masthead { display: flex; justify-content: space-between; align-items: center; margin: 0 4.3%; padding: 32px 0 24px; border-bottom: 1px solid rgba(222,235,255,.17); }
.monogram { display: inline-flex; align-items: flex-start; font-size: 27px; font-weight: 800; letter-spacing: -2px; }
.monogram span { margin: 3px 0 0 5px; font-size: 10px; letter-spacing: 0; }
.site-label { font-size: 12px; letter-spacing: .16em; color: #ccd4df; }
.hero { margin: auto 4.1%; padding-top: 9vh; }
.eyebrow { display: flex; align-items: center; gap: 14px; padding-left: .35%; margin-bottom: 20px; font-size: 12px; letter-spacing: .21em; color: #d1e7f0; }
.line { display: block; width: 32px; height: 1px; background: #bcdef1; }
h1 { margin: 0; font-size: clamp(28px, 11.25vw, 250px); font-weight: 800; line-height: 1.02; letter-spacing: -.065em; white-space: nowrap; text-shadow: 0 4px 35px rgba(0,0,0,.2); }
.hero-caption { display: flex; justify-content: space-between; align-items: center; margin: 28px .35% 0; padding-top: 20px; border-top: 1px solid rgba(229,241,255,.32); font-size: 15px; letter-spacing: .18em; color: #e2e8ef; }
.edition { font-size: 12px; letter-spacing: .15em; }
.coordinate { display: flex; justify-content: space-between; align-items: center; margin: 20px 4.3% 30px; font-family: monospace; font-size: 12px; letter-spacing: .15em; color: #b7c3d4; }
.cross { font-size: 26px; font-weight: 200; }
.footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 4.3%; padding: 24px 0 max(24px, env(safe-area-inset-bottom)); border-top: 1px solid rgba(222,235,255,.2); font-size: 12px; line-height: 1.8; letter-spacing: .08em; color: #b5bfcd; }
.icp { padding: 4px 0; letter-spacing: .03em; transition: color .2s; }
.icp:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.footer-note { text-align: right; }
@media (min-width: 1900px) { .hero { padding-top: 8vh; } }
@media (max-width: 700px) {
  .stage { min-height: 480px; }
  .masthead { padding-top: max(24px, env(safe-area-inset-top)); margin-inline: 6%; }
  .site-label { font-size: 11px; letter-spacing: .08em; }
  .artwork { object-position: 58% center; }
  .shade { background: linear-gradient(180deg, rgba(3,6,12,.25), rgba(3,6,12,.02) 35%, rgba(3,6,12,.38) 65%, #080b10 100%); }
  .hero { margin-inline: 6%; padding-top: 7vh; }
  h1 { font-size: 10.85vw; letter-spacing: -.065em; }
  .eyebrow { font-size: 10px; letter-spacing: .15em; gap: 9px; margin-bottom: 22px; }
  .line { width: 22px; }
  .hero-caption { margin-top: 24px; padding-top: 17px; font-size: 13px; letter-spacing: .14em; }
  .edition { display: none; }
  .coordinate { margin-inline: 6%; margin-bottom: 25px; }
  .footer { margin-inline: 6%; flex-direction: column; justify-content: center; gap: 4px; padding-top: 17px; font-size: 11px; }
  .icp { font-size: 12px; }
  .footer-note { display: none; }
}
@media (max-height: 500px) and (min-width: 701px) {
  .stage { min-height: 360px; }
  .masthead { padding: 15px 0; }
  .hero { padding-top: 16px; }
  .eyebrow { margin-bottom: 8px; }
  h1 { font-size: min(10vw, 100px); }
  .hero-caption { margin-top: 10px; padding-top: 10px; }
  .coordinate { margin-top: 10px; margin-bottom: 10px; }
  .footer { padding-block: 12px; }
}