/* ---------------------------------------------------------------
   Portfolio — faithful recreation of readymag.website/6255884
   Design stage is 1024px wide; everything is absolutely positioned
   in stage coordinates and uniformly scaled to the viewport.
   --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #ffffff;
  color: #282828;
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI",
               Roboto, Ubuntu, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

::selection { background-color: #A2A2A2; }

/* ---- horizontal viewer -------------------------------------- */

.viewer {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.track {
  display: flex;
  height: 100%;
  width: 100%;
  will-change: transform;
  transition: transform 620ms cubic-bezier(.65,.02,.2,1);
}

.track.no-anim { transition: none; }

.page {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.page::-webkit-scrollbar { display: none; }

/* the scaled design surface */
.stage {
  position: relative;
  transform-origin: 0 0;
}

/* ---- widgets ------------------------------------------------- */

.w {
  position: absolute;
  margin: 0;
}

.w-picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  user-select: none;
  -webkit-user-drag: none;
}

.w-shape { pointer-events: none; }

/* invisible click targets sitting over baked-in artwork */
.w-hotspot {
  display: block;
  background: transparent;
  border: 0;
  padding: 0;
  appearance: none;
  font: inherit;
  color: transparent;
  text-indent: -9999px;
  overflow: hidden;
  cursor: default;
}

.w-hotspot[data-goto] { cursor: pointer; }

.w-hotspot:focus-visible {
  outline: 2px solid #1f8fff;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .track { transition: none; }
}