/* Rebuilt stylesheet for the static copy (replaces the Readymag viewer). */
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, system-ui, "Segoe UI", Roboto, Ubuntu, Arial, sans-serif;
  color: #282828;
  -webkit-font-smoothing: antialiased;
  background: #fff;
}
h1, h2, h3, h4, h5 { margin: 0; }
::selection { background-color: #a2a2a2; }

/* layout switching */
.layout-phone { display: none; }
@media (max-width: 767px) {
  .layout-desktop { display: none; }
  .layout-phone { display: block; }
}

/* page structure */
article.page { position: relative; overflow: hidden; }
.page-fixed-bg-container { position: fixed; inset: 0; z-index: 0; }
.page-fixed-bg-container .widget-background { position: absolute; inset: 0; }
.fixed-position-container, .fixed-position-container-top { display: none; }
.content-scroll-wrapper { position: relative; z-index: 1; }
.content-bounds { position: relative; margin: 0 auto; overflow: hidden; }
.page-content-container { position: relative; transform-origin: 0 0; }
.lightbox-wrapper { display: none; }

/* widgets */
.rmwidget { position: absolute; }
.animation-container { position: absolute; pointer-events: none; }
.animation-container .rmwidget { pointer-events: all; }
.animation-container.invisible { opacity: 0; }
.animation-container.invisible .rmwidget { pointer-events: none; }
.animation-container.invisible a { pointer-events: none; }
.widget-text-v3 { overflow: visible; }
.text-viewer { white-space: pre-wrap; }
.text-viewer p, .text-viewer h1, .text-viewer h2 { margin: 0; }
.widget-picture img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; border: 0;
}
.bgpic { position: absolute; inset: 0; background-repeat: no-repeat; background-size: cover; }
/* when a bgpic div renders the picture (crop/radius), the img is only a save/SEO shadow */
.widget-picture .bgpic + img { opacity: 0 !important; }
/* Text metrics come from the design itself: every paragraph carries an
   explicit line-height (inline style or paragraph-* class), exactly like the
   Readymag viewer renders it. Do NOT override line-height or add padding —
   widgets are absolutely positioned with overflow visible, so descenders are
   accommodated by the designed line boxes and the real font metrics. The
   ascent/descent overrides in fonts.css pin those metrics identically across
   browsers/OSes, so no per-element padding compensation is needed here:
   padding-bottom on a text widget has no effect anyway, since the following
   logo/caption/title are independent siblings positioned by fixed top
   offsets, not flowing content after this paragraph. */
.widget-shape svg { display: block; }
.widget-shape.icon {
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.widget-shape.icon img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* The phone card titles are designed as single lines (title box sits flush
   against the image below it). The original uses Neue Haas Unica (`sftn`);
   our Graphik substitute is slightly wider, so prevent an accidental wrap —
   font size and leading stay exactly as designed. */
.layout-phone .paragraph-d5af95b9-468b-4078-ab23-b0439143103e {
  white-space: nowrap;
}

/* Keep large desktop card titles in their designed single-line treatment. */
.layout-desktop .paragraph-25648237-b0a2-4cb2-b982-db6d0fb97e27 {
  white-space: nowrap;
}

/* Match the Art Gallery card title to the medium weight of the other desktop titles. */
.layout-desktop [data-id="6a410aa5fcf8bf5b6cd43efe"] .link-1 {
  font-weight: 500;
}

/* links */
a.maglink, a.external-link, a.link-1 { color: inherit; text-decoration: none; cursor: pointer; }
a.link-1:hover { color: #0080ff; }
a.link-1:hover span, a.link-1:hover { -webkit-text-fill-color: currentColor; }

/* Mobile tap targets: several card titles/captions render under the 44px
   accessibility minimum (e.g. a 34px-tall title). Pad text links invisibly
   (padding balanced by matching negative margin) so the hit area grows
   without shifting anything visually. Picture links are already large. */
@media (max-width: 767px) {
  .layout-phone a.maglink:has(.rmwidget) {
    display: block;
    position: absolute;
    inset: 0;
  }
  .layout-phone a.link-1.maglink,
  .layout-phone a.link-1 {
    display: inline-block;
    padding: 19px 0;
    margin: -19px 0;
    position: relative;
    z-index: 10;
  }
}

/* buttons */
.widget-button { cursor: pointer; }
.common-button {
  position: absolute; inset: 0; display: flex; overflow: hidden;
  align-items: center; justify-content: center;
  border-radius: inherit; box-sizing: border-box; cursor: pointer;
}
.common-button .text {
  pointer-events: none; user-select: none; white-space: pre; text-align: center;
}

/* video embeds */
.widget-video iframe { border: 0; }

/* slideshow */
.common-slideshow { position: absolute; inset: 0; }
.common-slideshow .images { position: relative; overflow: hidden; width: 100%; height: 100%; }
.common-slideshow .images-wrapper { position: relative; width: 100%; height: 100%; overflow: hidden; }
.common-slideshow .image {
  position: absolute; inset: 0;
  background-position: 50% 50%; background-repeat: no-repeat;
  background-size: cover !important; /* inline px sizes don't survive zoom scaling */
  transition: opacity .35s ease;
}
.common-slideshow .image.center-image { opacity: 1; z-index: 2; }
.common-slideshow .image.next-image, .common-slideshow .image.prev-image,
.common-slideshow .image.hidden { opacity: 0; z-index: 1; }
.common-slideshow .images { cursor: pointer; }
.common-slideshow .fullscreen, .common-slideshow .thumbnails, .common-slideshow .captions { display: none; }
.common-slideshow .cursor { display: none; }
.common-slideshow .bottom-arrows {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center;
  min-width: 104px; height: 40px; border-radius: 20px; z-index: 3;
}
.common-slideshow .bottom-arrows svg { cursor: pointer; }
.counters-container { color: #fff; font-size: 12px; font-weight: 500; line-height: 40px;
  min-width: 40px; text-align: center; background: rgba(40,40,40,.4); border-radius: 20px;
  padding: 0 12px; user-select: none; }
.counters-numbers { display: inline; }
.counters-dots { display: none; }
.prev-picture-arrow-bottom, .next-picture-arrow-bottom,
.prev-picture-arrow-middle, .next-picture-arrow-middle { display: none; }

/* overlay (global) widgets */
.overlay-widgets { position: fixed; top: 0; left: 50%; width: 0; height: 0; z-index: 500; }
.overlay-widgets > .animation-container { pointer-events: none; }
.overlay-widgets .rmwidget { pointer-events: all; }