/* =============================================================================
   OVERLAYS - full screen project sheet + media viewer.
   Loaded after styles.css: sets the full screen shell, the black takeover and
   the viewer, and overrides the v2 editorial rules where the markup changed
   (the mosaic tiles and the film frame are buttons now).
   ============================================================================= */

:root {
  --fp-black: #0b1014;
  --fp-ink-2: #16212a;
  --fp-paper-dim: #8ea4b3;
  --fp-z-sheet: 400;
  --fp-z-viewer: 420;
  --fp-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Scroll lock: the page keeps the width the scrollbar was using, so opening a
   layer never shifts the page sideways behind it. */
html.fp-lock {
  overflow: hidden;
  padding-right: var(--fp-sbw, 0px);
}
html.fp-lock body { overflow: hidden; }

/* =============================================================================
   1. Sheet shell: the screen goes black, the file is laid on it
   ============================================================================= */

.fp-sheet[hidden] { display: none; }

.fp-sheet {
  position: fixed;
  inset: 0;
  z-index: var(--fp-z-sheet);
  display: block;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background:
    radial-gradient(120% 80% at 50% 0%, var(--fp-ink-2) 0%, var(--fp-black) 72%);
  opacity: 0;
  transition: opacity 0.26s var(--fp-ease);
}

.fp-sheet.is-open { opacity: 1; }

.fp-sheet .pm-dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1100px;
  min-height: 100%;
  max-height: none;
  margin: 0 auto;
  overflow: visible;
  background: var(--paper);
  border: 0;
  border-radius: 0;
  box-shadow: 0 0 60px -10px rgba(0, 0, 0, 0.7);
  transform: translateY(16px);
  opacity: 0;
  transition: transform 0.36s var(--fp-ease), opacity 0.3s var(--fp-ease);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.fp-sheet.is-open .pm-dialog { transform: none; opacity: 1; }
.fp-sheet .pm-dialog:focus { outline: none; }

/* Top bar: see-through over the hero, paper once the hero has scrolled away.
   Nothing ever runs under the close button, which stays reachable all the way. */
.fp-bar {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: calc(env(safe-area-inset-top, 0px) + 58px);
  padding:
    env(safe-area-inset-top, 0px)
    max(env(safe-area-inset-right, 0px), 0.75rem)
    0
    max(env(safe-area-inset-left, 0px), 1.4rem);
  border-bottom: 1px solid transparent;
  transition: background-color 0.25s, border-color 0.25s;
}

.fp-bar.is-stuck {
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  border-bottom-color: var(--line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.fp-bar-label {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex: 0 1 auto;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s, transform 0.25s;
}
/* A long title is cut with an ellipsis, it never runs under the close button */
.fp-bar-label > span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.fp-bar-label .num { flex: 0 0 auto; color: var(--brass); }
.fp-bar.is-stuck .fp-bar-label { opacity: 1; transform: none; }

/* The hero runs full bleed under the bar; a typographic sheet has no picture
   to run under it, so there the paper starts below the bar. */
.fp-sheet .pm-body { margin-top: calc(-1 * (env(safe-area-inset-top, 0px) + 58px)); }
.fp-sheet.has-typo-hero .pm-body { margin-top: 0; }

.fp-sheet .pm-close {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  font-size: 0;
  color: var(--ink);
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background-color 0.2s, color 0.2s, transform 0.2s;
}

.fp-sheet .pm-close svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}

.fp-sheet .pm-close:hover {
  background: var(--ink);
  color: var(--paper);
}

/* =============================================================================
   2. The black takeover, the file header types itself in
   ============================================================================= */

.fp-boot {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.55rem;
  padding:
    calc(env(safe-area-inset-top, 0px) + 4.5rem)
    max(env(safe-area-inset-right, 0px), clamp(1.25rem, 7vw, 6rem))
    4.5rem
    max(env(safe-area-inset-left, 0px), clamp(1.25rem, 7vw, 6rem));
  background: var(--fp-black);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--fp-ease), visibility 0s linear 0.3s;
}

.fp-sheet.is-booting .fp-boot {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.fp-boot p { min-height: 1.1em; }

.fp-boot-ref {
  font-family: var(--font-mono);
  font-size: clamp(0.7rem, 1.4vw, 0.82rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
}

.fp-boot-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 7.5vw, 4.4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--paper);
  min-height: 1em;
}

.fp-boot-sub {
  font-family: var(--font-mono);
  font-size: clamp(0.78rem, 1.7vw, 1rem);
  letter-spacing: 0.04em;
  color: var(--fp-paper-dim);
}

/* Caret on the line being typed */
.fp-boot .is-cur::after {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.9em;
  margin-left: 0.14em;
  vertical-align: -0.08em;
  background: var(--brass);
  animation: fp-caret 0.9s steps(1) infinite;
}

@keyframes fp-caret { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

/* While the header types, the paper is not there yet: only the black and the
   close button. The dialog keeps its box so nothing jumps when it arrives. */
.fp-sheet.is-booting .pm-dialog {
  background: transparent;
  box-shadow: none;
  transform: none;
  opacity: 1;
}
.fp-sheet.is-booting .pm-hero,
.fp-sheet.is-booting .pm-body-inner { opacity: 0; }

.fp-sheet.is-booting .pm-close {
  color: var(--paper);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
}
.fp-sheet.is-booting .pm-close:hover { background: rgba(255, 255, 255, 0.2); }
.fp-sheet.is-booting .fp-bar {
  background: transparent;
  border-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.fp-sheet.is-booting .fp-bar-label { opacity: 0; }

@keyframes fp-doc-in { from { opacity: 0; transform: translateY(20px); } }
.fp-sheet.is-booted .pm-dialog { animation: fp-doc-in 0.44s var(--fp-ease) both; }

/* =============================================================================
   3. Hero
   ============================================================================= */

.fp-sheet .pm-hero { transition: opacity 0.3s var(--fp-ease); }

.fp-sheet .pm-hero-media {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  text-align: left;
  aspect-ratio: 3 / 2;
  min-height: 240px;
  max-height: min(58vh, 620px);
  background: var(--blue-tint);
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}

.fp-sheet .pm-hero.is-typo .pm-hero-media {
  cursor: default;
  aspect-ratio: auto;
  min-height: 0;
  max-height: none;
}

.fp-sheet .pm-hero-caption { pointer-events: none; }
.fp-sheet .pm-hero-title { max-width: 20ch; }

.fp-sheet .pm-folio { z-index: 4; }
/* On a typographic sheet the eyebrow already carries the number: one mark is enough */
.fp-sheet.has-typo-hero .pm-folio { display: none; }

/* =============================================================================
   4. Editorial body
   ============================================================================= */

.fp-sheet .pm-body { padding: 0; }
.fp-sheet .pm-body-inner {
  transition: opacity 0.3s var(--fp-ease);
  padding:
    clamp(1.85rem, 4.5vw, 3.25rem)
    max(env(safe-area-inset-left, 0px), clamp(1.25rem, 5vw, 3.25rem))
    clamp(2.5rem, 6vw, 4rem)
    max(env(safe-area-inset-right, 0px), clamp(1.25rem, 5vw, 3.25rem));
}

.fp-sheet .pm-meta { padding-bottom: 1.4rem; margin-bottom: 2rem; }

/* Link out of the file (new tab) */
.pm-cta-wrap { margin: 0 auto 2.5rem; max-width: 52ch; }
.pm-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0.55rem 1.15rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 999px;
  transition: background-color 0.2s, color 0.2s;
}
.pm-cta:hover { background: var(--blue-deep); border-color: var(--blue-deep); }
.pm-cta-arrow {
  width: 0.7em;
  height: 0.7em;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}

/* =============================================================================
   5. Mosaic: one opening plate, then a full grid. Every tile is a button.
   ============================================================================= */

.pm-mosaic {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(0.7rem, 1.6vw, 1.05rem);
  grid-auto-flow: row;
}

/* The site already has a generic .shot (photo contact sheet): neutralise what
   it would leak into the sheet mosaic. */
.pm-mosaic .shot {
  position: static;
  display: block;
  min-width: 0;
  margin: 0;
  overflow: visible;
  background: none;
}

.pm-mosaic .shot-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}

.pm-mosaic .frame {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--blue-tint);
}

.pm-mosaic .frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.96);
  transition: transform 0.45s var(--fp-ease), filter 0.3s;
}

/* Artwork and drawings are fitted, never cropped */
.pm-mosaic .frame.is-contain { background: var(--paper-2); }
.pm-mosaic .frame.is-contain img {
  object-fit: contain;
  padding: clamp(0.5rem, 1.5vw, 1.15rem);
}

.pm-mosaic .shot-btn:hover .frame img { transform: scale(1.03); filter: saturate(1.04); }
.pm-mosaic .shot-btn:focus-visible { outline: none; }
.pm-mosaic .shot-btn:focus-visible .frame {
  outline: 2px solid var(--blue-deep);
  outline-offset: 3px;
}

.shot-s6 { grid-column: span 6; }
.shot-s3 { grid-column: span 3; }
.shot-s2 { grid-column: span 2; }
.shot-p  { grid-column: span 1; }

.shot-s6 .frame { aspect-ratio: 16 / 9; }
.shot-s3 .frame { aspect-ratio: 3 / 2; }
.shot-s2 .frame { aspect-ratio: 4 / 3; }

/* Phone screenshots: uniform 9:16 tiles, never stretched */
.pm-mosaic.is-portrait { grid-template-columns: repeat(3, 1fr); }
.pm-mosaic.is-portrait .frame { aspect-ratio: 9 / 16; }
.pm-mosaic.is-portrait .frame img { object-position: top center; }

/* Zoom affordance */
.shot-zoom {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: color-mix(in srgb, var(--ink) 55%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.2s;
}
.shot-zoom::before,
.shot-zoom::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
}
.shot-zoom::before { width: 12px; height: 1.5px; }
.shot-zoom::after { width: 1.5px; height: 12px; }

.shot-btn:hover .shot-zoom,
.shot-btn:focus-visible .shot-zoom,
.pm-hero-media:hover .shot-zoom,
.pm-hero-media:focus-visible .shot-zoom { opacity: 1; }

.pm-hero-media .shot-zoom { right: 1rem; bottom: 1rem; z-index: 3; }

@media (hover: none) {
  .shot-zoom { opacity: 0.9; }
}

/* =============================================================================
   6. Film block: the poster opens the film in the viewer
   ============================================================================= */

.pm-film { display: flex; justify-content: center; padding: 0.25rem 0; }

.fp-sheet .film-frame {
  position: relative;
  display: block;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--fp-black);
  box-shadow: var(--shadow-lift);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.fp-sheet .film-frame.is-916 { width: clamp(240px, 34vw, 330px); aspect-ratio: 9 / 16; }
.fp-sheet .film-frame.is-169 { width: 100%; max-width: 720px; aspect-ratio: 16 / 9; }
.fp-sheet .film-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.film-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 52%, transparent);
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 6px 20px -6px rgba(31, 46, 56, 0.6);
  transition: background-color 0.2s, transform 0.2s;
}
.film-play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #fff;
}
.film-frame:hover .film-play { background: var(--blue-deep); transform: translate(-50%, -50%) scale(1.07); }
.film-frame:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }

/* =============================================================================
   7. Viewer: full screen, black, one picture or one film
   ============================================================================= */

.fp-viewer[hidden] { display: none; }

.fp-viewer {
  position: fixed;
  inset: 0;
  z-index: var(--fp-z-viewer);
  background: rgba(7, 11, 14, var(--fp-dim, 1));
  opacity: 0;
  transition: opacity 0.2s var(--fp-ease);
  touch-action: pinch-zoom;
  overscroll-behavior: contain;
}
.fp-viewer.is-open { opacity: 1; }

.fp-viewer-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}
.fp-viewer-inner:focus { outline: none; }

.fp-viewer-stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    calc(env(safe-area-inset-top, 0px) + 68px)
    max(env(safe-area-inset-left, 0px), 14px)
    10px
    max(env(safe-area-inset-right, 0px), 14px);
}

/* height:100% all the way down, so the picture's max-height has something
   definite to resolve against and a tall photo is fitted, never cropped. */
.fp-viewer-fig {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
}
.fp-viewer-fig.is-snapping { transition: transform 0.22s var(--fp-ease), opacity 0.22s var(--fp-ease); }

.fp-viewer-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.fp-viewer-media img,
.fp-viewer-media video {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
  background: #06090b;
  touch-action: auto;
}

/* Loading state: a reserved box and a quiet pulse, never a white flash */
.fp-viewer-media.is-loading { min-width: 140px; min-height: 140px; }
.fp-viewer-media.is-loading.has-ratio { aspect-ratio: var(--fp-ar); }
.fp-viewer-media.is-loading::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  animation: fp-spin 0.8s linear infinite;
}
@keyframes fp-spin { to { transform: rotate(360deg); } }

.fp-viewer-foot {
  flex: 0 0 auto;
  padding: 0.55rem 1rem calc(env(safe-area-inset-bottom, 0px) + 0.9rem);
  text-align: center;
}
.fp-viewer-cap {
  max-width: 68ch;
  margin: 0 auto;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.5;
  color: #dbe5ec;
}
.fp-viewer-count {
  margin-top: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--brass);
}

.fp-vbtn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background-color 0.2s, transform 0.2s;
}
.fp-vbtn svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fp-vbtn:hover { background: rgba(255, 255, 255, 0.22); }
.fp-vbtn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.fp-viewer-x {
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  right: max(env(safe-area-inset-right, 0px), 12px);
}
.fp-viewer-pv { left: max(env(safe-area-inset-left, 0px), 12px); top: 50%; margin-top: -24px; }
.fp-viewer-nx { right: max(env(safe-area-inset-right, 0px), 12px); top: 50%; margin-top: -24px; }
.fp-viewer.is-single .fp-viewer-pv,
.fp-viewer.is-single .fp-viewer-nx { display: none; }

/* =============================================================================
   8. Responsive
   ============================================================================= */

/* Tablet and below: two columns, tiles stay large enough to read */
@media (max-width: 900px) {
  .pm-mosaic { grid-template-columns: repeat(2, 1fr); }
  .shot-s6 { grid-column: span 2; }
  .shot-s3, .shot-s2 { grid-column: span 1; }
  .shot-s3 .frame, .shot-s2 .frame { aspect-ratio: 4 / 3; }
  .fp-sheet .film-frame.is-916 { width: min(60vw, 320px); }
}

/* Phones: one column for photographs, two for phone screenshots */
@media (max-width: 560px) {
  .pm-mosaic { grid-template-columns: 1fr; }
  .shot-s6, .shot-s3, .shot-s2 { grid-column: span 1; }
  .shot-s6 .frame, .shot-s3 .frame, .shot-s2 .frame { aspect-ratio: 3 / 2; }
  .pm-mosaic.is-portrait { grid-template-columns: repeat(2, 1fr); }
  /* Metadata reads as a list, one line per entry, instead of a wrapped ribbon */
  .fp-sheet .pm-meta { display: block; }
  .fp-sheet .pm-meta .item { display: flex; gap: 0.5rem; padding: 0.22rem 0; }
  .fp-sheet .pm-meta .item + .item::before { content: none; }
  .fp-sheet .pm-meta .k { flex: 0 0 5.6rem; }
  .fp-sheet .pm-hero-media { aspect-ratio: 4 / 5; max-height: 66vh; }
  .fp-sheet .pm-hero-title { max-width: none; }
  .fp-sheet .film-frame.is-916 { width: min(72vw, 300px); }
  .pm-cta-wrap { max-width: none; }
}

/* Phone in landscape: 390 px of height for the whole thing */
@media (max-height: 500px) and (orientation: landscape) {
  .fp-sheet .pm-hero-media { aspect-ratio: 21 / 9; min-height: 0; max-height: 62vh; }
  .fp-sheet .pm-hero-title { font-size: clamp(1.6rem, 4.4vw, 2.4rem); }
  .fp-boot { padding-top: 3rem; padding-bottom: 3rem; }
  .fp-boot-title { font-size: clamp(1.5rem, 5vw, 2.4rem); }
  .fp-viewer-stage { padding: 8px 68px; }
  .fp-viewer-cap { display: none; }
  .fp-viewer-foot { padding: 0 1rem 0.45rem; }
  .fp-viewer-x { top: 8px; right: 8px; }
  .fp-viewer-pv { left: 8px; }
  .fp-viewer-nx { right: 8px; }
}

/* Phone in portrait: the arrows sit under the thumb, beside the counter */
@media (max-width: 640px) and (orientation: portrait) {
  .fp-viewer-stage { padding-bottom: 0; }
  .fp-viewer-foot { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 4.6rem); }
  .fp-viewer-pv,
  .fp-viewer-nx {
    top: auto;
    margin-top: 0;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 0.9rem);
  }
  .fp-viewer-pv { left: calc(50% - 78px); }
  .fp-viewer-nx { right: calc(50% - 78px); }
}

/* Wide screens: the paper keeps a readable measure inside the black */
@media (min-width: 1500px) {
  .fp-sheet .pm-dialog { max-width: 1180px; }
}

/* =============================================================================
   9. Reduced motion and print
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  .fp-sheet,
  .fp-sheet .pm-dialog,
  .fp-viewer,
  .fp-viewer-fig,
  .pm-mosaic .frame img,
  .film-play,
  .fp-vbtn,
  .pm-cta,
  .fp-sheet .pm-close { transition: none !important; }
  .fp-sheet .pm-dialog { transform: none; }
  .fp-sheet.is-booted .pm-dialog { animation: none; }
  .fp-boot .is-cur::after { animation: none; }
  .fp-viewer-media.is-loading::after { animation: none; }
  .pm-mosaic .shot-btn:hover .frame img { transform: none; }
}

@media print {
  .fp-sheet, .fp-viewer { display: none !important; }
  html.fp-lock { overflow: visible; padding-right: 0; }
  html.fp-lock body { overflow: visible; }
}