/* Accent used across the project for hover states (buttons, links, the name). */
:root { --accent: #D9591E; }

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

html, body {
  margin: 0;
  padding: 0;
  background: #000;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body { overflow-x: hidden; }

#viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Each layout is authored at a fixed canvas width and scaled to the viewport,
   mirroring Readymag's scalable viewer. JS sets the scale per canvas. */
#canvas,
#canvas-phone {
  position: relative;
  transform-origin: 0 0;
}

#canvas { transform: scale(var(--scale, 1)); }
#canvas-phone { transform: scale(var(--scale-phone, 1)); }

/* Desktop and phone layouts come from the same data but are separate canvases,
   exactly as they are authored. Only one is ever mounted. */
#canvas-phone,
#overlay-phone { display: none; }

@media (max-width: 600px) {
  #canvas,
  #overlay { display: none; }

  #canvas-phone,
  #overlay-phone { display: block; }

  /* Solid backdrop behind the top bar.
     It is a fixed band in screen pixels rather than a child of the scaled
     overlay: inside that layer iOS can clip it, which let page content show
     through above the name. Reaching far above the viewport also covers the
     area under a floating address bar and any rubber-band overscroll. */
  body::before {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    top: -400px;
    /* 90 is where the bar ends on the design canvas */
    height: calc(400px + 90px * var(--scale-phone, 1));
    background: #121212;
    z-index: 8999;
    pointer-events: none;
  }
}

.page {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.w {
  position: absolute;
  will-change: transform, opacity;
}

.pic img,
.shape img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
}

.text {
  white-space: pre-wrap;
  word-break: break-word;
}

.text p {
  margin: 0;
  font-family: Inter, 'Helvetica Neue', Arial, sans-serif;
}

.text a { text-decoration: none; }
.text a:hover { opacity: .7; }

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
  cursor: pointer;
}

.slideshow { position: absolute; }

.ss-track {
  position: absolute;
  inset: 0;
  height: 100%;
}

/* Crossfade: frames stacked, only the active one visible. */
.ss-crossfade .ss-track img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .5s ease;
}
.ss-crossfade .ss-track img.on { opacity: 1; }

/* Slider: frames in a row, the track slides horizontally. */
.ss-slider .ss-track {
  display: flex;
  width: 100%;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
.ss-slider .ss-track img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Controls */
.ss-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ss-color, #fff);
  cursor: pointer;
  z-index: 3;
  opacity: .75;
  transition: opacity .2s ease, background-color .2s ease;
}
.ss-arrow svg { width: 22px; height: 22px; display: block; }
.ss-arrow:hover { opacity: 1; }
.ss-arrow:disabled { opacity: .25; cursor: default; }
.ss-prev { left: 8px; }
.ss-next { right: 8px; }
.ss-next svg { transform: rotate(180deg); }

.ss-controls-bg .ss-arrow { background: rgba(0, 0, 0, .35); }
.ss-controls-bg .ss-arrow:hover { background: rgba(0, 0, 0, .55); }

.ss-counter {
  position: absolute;
  right: 12px;
  bottom: 10px;
  z-index: 3;
  font: 400 13px/1 Inter, 'Helvetica Neue', Arial, sans-serif;
  color: var(--ss-color, #fff);
  letter-spacing: .02em;
  opacity: .85;
}
.ss-controls-bg .ss-counter {
  background: rgba(0, 0, 0, .35);
  padding: 5px 9px;
  border-radius: 11px;
}
.ss-sep { opacity: .6; margin: 0 2px; }

@media (prefers-reduced-motion: reduce) {
  .ss-slider .ss-track,
  .ss-crossfade .ss-track img { transition: none; }
}

.video iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

.shots { cursor: pointer; }
.shots img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

/* Widgets pinned above all pages (the persistent menu). */
#overlay,
#overlay-phone {
  position: fixed;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  pointer-events: none;
  z-index: 9000;
}
#overlay { transform: scale(var(--scale, 1)); }
#overlay-phone { transform: scale(var(--scale-phone, 1)); }

#overlay .w,
#overlay-phone .w { pointer-events: auto; }

.menu-trigger { cursor: pointer; }

/* The name and the menu label pick up the accent on hover, like the links do.
   Runs carry their colour inline, so the override has to win outright. */
.menu-brand:hover,
.menu-brand:hover *,
.menu-trigger:hover,
.menu-trigger:hover * {
  color: var(--accent) !important;
  transition: color .2s ease;
}

/* Scrolling fades these down to a faint watermark. On hover they come back to
   full strength, otherwise the accent would be dimmed along with them. */
.menu-brand:hover,
.menu-trigger:hover { opacity: 1 !important; }

/* Any link anywhere: the accent must land at full strength. Runs carry their
   colour inline, and a faded parent would tint the result, so both are forced. */
.text a:hover,
.text a:hover * {
  color: var(--accent) !important;
  opacity: 1 !important;
}

/* A widget dimmed by a scroll animation is brought back while it is hovered,
   otherwise the accent inherits the fade. */
.w:has(a:hover) { opacity: 1 !important; }

/* The closing screen carries the name at full size, so the pinned copy goes. */
.menu-brand.at-last-page {
  opacity: 0 !important;
  pointer-events: none;
}

#menu-panel, #menu-panel-phone {
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s;
}
#menu-panel.open, #menu-panel-phone.open {
  opacity: 1;
  visibility: visible;
}
.menu-close { cursor: pointer; }

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