/* ONCE DESK home: every world, one desk. A title card over the worlds' photographs, a sticky index, one chapter per world. */

/* the title card: the worlds' photographs crossfade behind it (home.js) */
/* the index docks at the foot of the first screen, then sticks under the header */
.wh { position: relative; min-height: calc(100svh - var(--wi-h)); --wi-h: 50px; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; }
.wh-film { position: absolute; inset: 0; z-index: -1; background: var(--ink); }
.wh-film img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06);
  transition: opacity 1.6s var(--settle), transform 9s linear; }
.wh-film img.on { opacity: 1; transform: scale(1); }
.wh-film::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(14, 13, 12, .88) 0%, rgba(14, 13, 12, .3) 46%, rgba(14, 13, 12, .12) 70%, rgba(14, 13, 12, .45) 100%); }
.wh-in { padding: 0 var(--side) clamp(56px, 10vh, 112px); max-width: min(1100px, 100%); }
.wh .d1 { font-size: clamp(56px, 8.4vw, 148px); line-height: .92; letter-spacing: -.015em; margin: 14px 0 0; text-shadow: 0 2px 40px rgba(0, 0, 0, .35); }
.wh .k { color: rgba(243, 238, 228, .82); }
.wh-line { font: 300 italic clamp(22px, 2vw, 28px)/1.35 var(--serif); margin: 22px 0 0; max-width: 30em; color: rgba(243, 238, 228, .9); }
.wh .k, .wh-line, .wh-now { text-shadow: 0 1px 14px rgba(0, 0, 0, .7); }
.wh-now { margin: 32px 0 0; color: rgba(243, 238, 228, .62); }
.wh-now b { color: var(--amber); font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .wh-film img { transition: none; transform: none; } }

/* the index: ten worlds, sticky under the header, the world in view marked */
.wi { position: sticky; top: 68px; z-index: 30; background: rgba(14, 13, 12, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.wi-l { list-style: none; margin: 0 auto; padding: 0 var(--side); max-width: calc(var(--wrap) + 2 * var(--side)); display: flex; justify-content: space-between;
  overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.wi-l::-webkit-scrollbar { display: none; }
.wi-l li { flex: none; scroll-snap-align: start; }
.wi-l a { position: relative; display: flex; align-items: baseline; gap: 8px; padding: 18px 12px; white-space: nowrap; text-decoration: none;
  font: 500 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(243, 238, 228, .62); transition: color .3s; }
.wi-l li:first-child a { padding-left: 0; }
.wi-l a:hover, .wi-l a[aria-current] { color: var(--ivory); }
.wi-l a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--amber); transform: scaleX(0);
  transform-origin: left; transition: transform .5s var(--settle); }
.wi-l li:first-child a::after { left: 0; }
.wi-l a[aria-current]::after { transform: scaleX(1); }
.wi-n { color: var(--amber); font-size: 10px; }
.wi-l a.wi-o { color: var(--amber); }
.wi-l a.wi-o[aria-current] { color: var(--ivory); }
@media (max-width: 760px) { .wi { top: 62px; } .wi-l { justify-content: flex-start; scroll-padding: 0 var(--side); } }

/* a world's shared parts (each world's own form is in motion.css) */
.wd { position: relative; isolation: isolate; scroll-margin-top: 120px; }
.wd-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.wd-media img { width: 100%; height: 100%; object-fit: cover; }
.wd-media::after { content: ""; position: absolute; inset: 0; }
.wd-h .d2 { text-shadow: 0 2px 30px rgba(0, 0, 0, .35); }
.wd-h .lede { margin: 22px 0 30px; color: rgba(243, 238, 228, .9); text-shadow: 0 1px 14px rgba(0, 0, 0, .6); }
.wd-n { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin: 0 0 22px; font: 500 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ivory); }
.wd-n span { color: var(--amber); display: flex; align-items: center; gap: 14px; }
.wd-n span::after { content: ""; width: 36px; height: 1px; background: var(--amber); }

/* "on request": a quiet underlined action */
.wc-go { padding: 0 0 4px; background: none; border: 0; border-bottom: 1px solid rgba(200, 135, 58, .6); cursor: pointer;
  font: 500 11px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--amber); transition: border-color .2s, color .2s; }
.wc-go:hover { color: var(--ivory); border-color: var(--ivory); }
}