/* The coming-soon page. Loaded after site.css. */

/* two quiet links above the logo, for anyone who wants more than the signup */
.soon-nav{display:flex;justify-content:flex-end;gap:20px;padding-top:20px;font-size:14px}
.soon-nav a{color:var(--text-dim);text-decoration:none;transition:color var(--t-colour) var(--ease)}
.soon-nav a:hover{color:var(--text)}
.soon-hero{padding-top:48px;text-align:center}
@media (min-width:860px){.soon-hero{padding-top:80px}}
/* the stacked lockup: clear space of one x-height is built into the artwork's margins */
.soon-logo{margin:0 auto;width:fit-content}
.soon-logo img{height:120px;width:auto}
@media (min-width:640px){.soon-logo img{height:160px}}
.soon-logo .logo-day{display:none}
@media (prefers-color-scheme:light){.soon-logo .logo-day{display:block}.soon-logo .logo-evening{display:none}}
/* the tagline: the collection's voice, Fraunces italic */
.tagline{margin:28px auto 0;font:italic 400 24px/1.3 var(--serif);color:var(--text)}
@media (min-width:640px){.tagline{font-size:30px}}
.status{margin:20px 0 0;font-size:14px;color:var(--text-dim)}
/* coral, the marketing spark: as a fill under ink text, which holds in both themes */
.spark{display:inline-block;margin-right:6px;padding:3px 9px;border-radius:999px;background:var(--coral);color:#181818;font-weight:600;font-size:13px}
.soon-lede{max-width:50ch;margin:32px auto;font-size:18px;line-height:1.5;color:var(--text-dim)}
.soon-hero .note{max-width:48ch;margin-inline:auto}
.soon-tour{margin:28px 0 0}

/* the app's window under the signup, rising into place as it scrolls in */
.soon-window{margin:72px auto 0;padding:0 var(--gut);max-width:calc(var(--max) + 2 * var(--gut))}
.soon-window img{width:100%;height:auto;border-radius:10px;border:1px solid var(--chrome-line);box-shadow:0 2px 6px #0000001f,0 40px 80px -24px #000000a6}
@media (prefers-color-scheme:light){.soon-window img{box-shadow:0 2px 6px #0000001a,0 40px 80px -24px #0000004d}}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .soon-window img{animation:rise linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
    @keyframes rise{from{transform:perspective(1600px) rotateX(10deg) scale(.94);opacity:.4}to{transform:none;opacity:1}}
  }
}

/* the dresser: tight crops of real shelves, each with a museum wall label */
.soon-dresser{padding-top:144px}
.soon-dresser h2,.soon-detail h2,.soon-close h2{font-size:34px;margin:0 0 40px;max-width:18ch}
@media (min-width:860px){.soon-dresser h2,.soon-detail h2,.soon-close h2{font-size:48px}}
.dresser{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.dresser li{position:relative;margin:0;border-radius:6px;overflow:hidden;background:var(--win-bg);aspect-ratio:16/10}
.dresser img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left top;transition:transform 600ms var(--ease)}
.dresser li:hover img{transform:scale(1.025)}
@media (min-width:900px){
  .dresser{grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:clamp(200px,19vw,280px)}
  .dresser li{aspect-ratio:auto}
  .t-records{grid-column:span 7;grid-row:span 2}
  .t-tsundoku,.t-comics{grid-column:span 5}
  .t-games{grid-column:6 / span 7;grid-row:3 / span 2}
  .t-rotation{grid-column:1 / span 5;grid-row:3}
  .t-curios{grid-column:1 / span 5;grid-row:4}
}
.tag{position:absolute;left:12px;bottom:12px;margin:0;max-width:min(340px,calc(100% - 24px));padding:10px 14px 12px;background:var(--label-bg);color:var(--label-text);border:1px solid var(--label-line);border-radius:2px;box-shadow:0 6px 16px -6px #0006}
.tag b{display:block;font:560 17px/1.2 var(--serif)}
.tag span{display:block;margin-top:4px;font-size:13px;line-height:1.45;color:var(--label-dim)}
/* on a phone the label goes under the picture, so it doesn't cover the shelf */
@media (max-width:599px){.dresser li{aspect-ratio:auto;background:var(--label-bg)}.dresser img{position:static;height:auto;aspect-ratio:16/10}.tag{position:static;max-width:none;border:0;border-radius:0;box-shadow:none}}

/* finishes: one shelf of books in each */
.soon-finish{padding-top:144px}
.soon-finish h2{font-size:34px;margin:0 0 40px;max-width:18ch}
@media (min-width:860px){.soon-finish h2{font-size:48px}}
.finishes{list-style:none;margin:0;padding:0;display:grid;gap:24px 12px}
/* on a phone, a row to swipe through rather than nine stacked */
@media (max-width:599px){.finishes{grid-auto-flow:column;grid-auto-columns:82%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;touch-action:pan-x pan-y;scroll-snap-type:x mandatory;margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut);scroll-padding-inline:var(--gut);scrollbar-width:none}.finishes li{scroll-snap-align:start}}
@media (min-width:600px){.finishes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:960px){.finishes{grid-template-columns:repeat(3,minmax(0,1fr))}}
.finishes li{margin:0}
.finishes img{width:100%;height:auto;border-radius:6px}
.finishes span{display:block;margin-top:8px;font:560 15px/1.3 var(--serif)}
.finish-more{margin:32px 0 0;max-width:60ch;color:var(--text-dim)}

/* the side panel: text beside the shot */
.soon-detail{padding-top:144px;display:grid;gap:32px;align-items:center}
@media (min-width:1100px){.soon-detail{grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);gap:64px}}
.soon-detail h2{margin-bottom:16px}
.soon-detail-text p:not(.label-cap){margin:0;font-size:18px;line-height:1.55;color:var(--text-dim);max-width:40ch}
.soon-detail-shot{margin:0}
.soon-detail-shot img{width:100%;height:auto;border-radius:10px;border:1px solid var(--chrome-line)}

.soon-name{padding-top:144px}
.soon-what{padding-top:120px}
.soon-what h2{font-size:34px;text-align:center;margin:0 auto 32px}
.holds{list-style:none;margin:0 auto;padding:0;max-width:960px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:760px){.holds{grid-template-columns:minmax(0,1fr)}}
.holds li{background:var(--label-bg);color:var(--label-text);border:1px solid var(--label-line);border-radius:6px;padding:20px 22px}
.holds b{display:block;font:600 19px/1.2 var(--serif);margin-bottom:6px}
.holds span{display:block;font-size:15px;line-height:1.5}

/* the closing signup */
.soon-close{padding-block:144px;text-align:center}
.soon-close h2{margin:0 auto 12px}
.soon-close p{margin:0 auto 28px;max-width:44ch;color:var(--text-dim)}