/* Plain pages: help, terms, privacy and the public upgrades preview. A printed masthead cut on a bolt, then paper to read on. */

html { background: var(--void); }
body { background: transparent; }
#sky { position: fixed; inset: 0; z-index: -2; width: 100%; height: 100%; pointer-events: none; }

.mast { position: relative; display: grid; align-content: space-between; gap: var(--s-8); min-height: clamp(340px, 48vh, 480px); padding: var(--s-5) var(--gutter) var(--s-7); overflow: clip; }
.mast__bar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.mast__logo { display: block; width: 84px; color: var(--fg); }
.mast__logo svg { width: 100%; height: auto; }
.mast__in { position: relative; z-index: 2; display: grid; gap: var(--s-3); max-width: min(62%, 860px); }
.mast__cut { position: absolute; z-index: 1; right: clamp(8px, 6vw, 96px); bottom: -7%; width: auto; height: 92%; max-width: 40%; object-fit: contain; object-position: bottom right; }
@media (max-width: 760px) {
  .mast { min-height: 420px; }
  .mast__in { max-width: 100%; }
  .mast__cut { top: 76px; right: 12px; bottom: auto; height: 170px; max-width: 46%; object-position: top right; }
}

.mast.bolt-bottom { padding-bottom: calc(var(--bolt) + var(--s-5)); }
.prose { padding: var(--s-8) var(--gutter) var(--s-9); border-radius: var(--r-3) var(--r-3) 0 0; }
.prose__in { display: grid; width: min(100%, var(--max)); margin-inline: auto; }
.clause { display: grid; gap: var(--s-2) clamp(32px, 6vw, 96px); padding-block: var(--s-5); border-top: var(--hair) solid var(--line-2); }
.clause:last-child { border-bottom: var(--hair) solid var(--line-2); }
.clause h2 { font: 800 var(--d-sm)/1 var(--f-display); font-stretch: 75%; text-transform: uppercase; text-wrap: balance; }
.clause p, .clause li { max-width: var(--measure); color: var(--fg-2); }
.clause p + p { margin-top: var(--s-3); }
.clause ul { display: grid; gap: var(--s-2); padding-left: 1.1em; list-style: square; }
.clause a { color: var(--fg); font-weight: 500; }
@media (min-width: 900px) { .clause { grid-template-columns: 4fr 8fr; } }

.plain__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-3) var(--s-5); padding: var(--s-6) var(--gutter); color: var(--fg-3); font-size: var(--t-sm); }
.plain__foot nav { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.plain__foot a { color: var(--fg); }
.plain__foot a[aria-current="page"] { color: var(--fg-3); text-decoration: none; }

/* The upgrades preview */
.upgrades { padding: var(--s-8) var(--gutter) var(--s-9); }
.upgrades__in { width: min(100%, var(--max)); margin-inline: auto; }
.ladder { border-bottom: var(--hair) solid var(--line-2); }
.ladder li { display: grid; gap: var(--s-1) clamp(32px, 6vw, 96px); padding-block: var(--s-5); border-top: var(--hair) solid var(--line-2); color: var(--fg-2); }
.ladder b { color: var(--fg); font: 800 var(--d-md)/.96 var(--f-display); font-stretch: 75%; text-transform: uppercase; }
@media (min-width: 900px) { .ladder li { grid-template-columns: 7fr 5fr; align-items: center; } }
.shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--s-7) var(--s-5); }
.item { display: grid; align-content: start; gap: var(--s-2); }
.item__img { aspect-ratio: 4 / 5; overflow: clip; border-radius: var(--r-3); background: var(--raise-2); box-shadow: 0 0 0 2px var(--moon); transition: rotate var(--m-slow) var(--ease-back), box-shadow var(--m-med) var(--ease-out); }
.item:nth-child(4n + 1):hover .item__img { box-shadow: 0 0 0 2px var(--moon), 8px 9px 0 2px var(--nebula); }
.item:nth-child(4n + 2):hover .item__img { box-shadow: 0 0 0 2px var(--moon), 8px 9px 0 2px var(--cosmic); }
.item:nth-child(4n + 3):hover .item__img { box-shadow: 0 0 0 2px var(--moon), 8px 9px 0 2px var(--gold); }
.item:nth-child(4n):hover .item__img { box-shadow: 0 0 0 2px var(--moon), 8px 9px 0 2px var(--ufo); }
.item:hover .item__img { rotate: -1.2deg; }
.item__img--blank { background: url(/assets/art/watch-gold.svg) 0 0 / 112px 68px; }
.item__img img { width: 100%; height: 100%; object-fit: cover; transition: scale var(--m-slow) var(--ease-out); }
.item:hover .item__img img { scale: 1.03; }
.item__name { margin-top: var(--s-2); font: 800 var(--d-sm)/1 var(--f-display); font-stretch: 75%; text-transform: uppercase; }
.item__price { color: var(--gold); font: 800 1.15rem/1 var(--f-display); font-stretch: 75%; font-variant-numeric: tabular-nums; }