/* G-ROLLZ version 2: one screen, no menu, no scrolling. The reel fills the window;
   links sit on top of it. Builds on grollz.css. */

html:has(body.onepage), body.onepage { height: 100%; overflow: hidden; overscroll-behavior: none; }
html:has(body.onepage) { scrollbar-gutter: auto; }
.onepage #main { height: 100%; }
.onepage .reel { height: 100vh; height: 100dvh; min-height: 0; max-height: none; }

/* Papers plays several films in a row; only the current one shows. */
.world__film[data-part] { opacity: 0; }
.world__film[data-part].is-part.is-playing,
.world__film[data-part].is-part[poster] { opacity: 1; }
.world__film[data-part="0"].is-part[poster] { opacity: 0; }
.world__film[data-part="0"].is-part.is-playing { opacity: 1; }

/* Top: logo and the two trade links. */
.op-top {
  position: fixed; z-index: 60; inset: 0 0 auto 0; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: var(--header-h); padding: 10px var(--gutter); color: var(--gr-white); pointer-events: none;
}
.op-top::before { content: ""; position: absolute; inset: 0 0 -40px 0; z-index: -1; background: linear-gradient(to bottom, rgba(0, 0, 0, .42), rgba(0, 0, 0, 0)); }
.op-top > * { pointer-events: auto; }
.op-brand { display: inline-flex; color: var(--gr-white); }
.op-brand .wm { width: clamp(118px, 12vw, 158px); height: auto; fill: currentColor; }
body:has(.reel[data-world="ape"]) .op-brand { color: var(--gr-black); }
body:has(.reel[data-world="ape"]) .op-top::before { opacity: 0; }
body:has(.reel[data-world="ape"]) .op-pill { background: var(--gr-black); color: var(--gr-white); box-shadow: none; }
.op-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.op-pill {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px;
  background: rgba(255, 255, 255, .16); color: var(--gr-white); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font: 700 17px/1 var(--f-ui); letter-spacing: .03em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  transition: background-color .2s, color .2s;
}
.op-pill:hover { background: var(--gr-white); color: var(--gr-black); }
.op-live { display: inline-flex; align-items: center; gap: 5px; font: 600 10.5px/1 var(--f-mono); letter-spacing: .08em; color: #19C463; }
.op-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(25, 196, 99, .25); }
.op-pill:hover .op-live { color: #0B7A3B; }

/* Right-hand dock above the tabs: radio, socials, legal line. */
.op-dock { position: absolute; z-index: 7; right: var(--gutter); bottom: 86px; display: flex; align-items: center; gap: 10px; color: var(--ink); }
.op-radio {
  display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 6px; border-radius: 999px;
  background: rgba(0, 0, 0, .34); color: var(--gr-white); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22); max-width: min(360px, 100%);
}
.op-radio__btn { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; padding: 0; cursor: pointer; background: var(--gr-white); color: var(--gr-black); }
.op-radio__btn svg { width: 16px; height: 16px; fill: currentColor; }
.op-radio__btn--sm { width: 36px; height: 36px; background: transparent; color: var(--gr-white); }
.op-radio__btn--sm:hover { background: rgba(255, 255, 255, .16); }
.op-radio .player__play .i-pause, .op-radio .player__play[aria-pressed="true"] .i-play { display: none; }
.op-radio .player__play[aria-pressed="true"] .i-pause { display: block; }
.op-radio__info { display: grid; gap: 3px; min-width: 0; }
.op-radio__label { font: 500 10.5px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.op-radio .player__now { font: 700 15px/1.05 var(--f-ui); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-radio .player__time { font: 500 11px/1 var(--f-mono); color: rgba(255, 255, 253, .7); }
.op-social { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.op-social a { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: currentColor; transition: background-color .2s; }
.op-social a:hover { background: rgba(255, 255, 255, .16); }
.op-social svg { width: 22px; height: 22px; }
.reel[data-world="ape"] .op-social { --op-bg: var(--gr-yellow); }
.op-legal { position: absolute; z-index: 7; right: var(--gutter); bottom: 4px; margin: 0; font: 500 10px/1.4 var(--f-mono); letter-spacing: .04em; color: var(--ink); opacity: .62; text-align: right; }
/* German, French and Spanish caps carry accents (Ü, É, Ó): open the tight headline leading a little so
   they clear the line above. English keeps .9. */
html:not([lang="en"]) .world__line { line-height: 1.04; }
html:not([lang="en"]) .world__sub { line-height: 1.08; }
/* Their age buttons are longer: on a narrow phone they sit one above the other. */
@media (max-width: 440px) { html:not([lang="en"]) .age__btns { grid-template-columns: 1fr; } }

/* The worlds keep their copy; the products sit above the radio dock. */
.onepage .world__copy { bottom: 150px; }
.onepage .world__stage { bottom: 158px; }
.onepage .reel__h1 { display: none; }

@media (max-width: 760px) {
  .op-top { padding: 8px 12px; gap: 10px; }
  .op-brand .wm { width: 104px; }
  .op-links { gap: 6px; }
  .op-pill { min-height: 38px; padding: 0 12px; font-size: 14px; }
  .op-live { font-size: 0; gap: 0; }
  .op-live::before { width: 8px; height: 8px; }
  .onepage .world__copy { bottom: 172px; }
  .onepage .world__stage { bottom: auto; }
  .op-dock { left: 12px; right: 12px; bottom: 90px; gap: 8px; justify-content: flex-end; }
  .op-radio { flex: 1; min-width: 0; max-width: none; }
  .op-social { gap: 0; }
  .op-social a { width: 40px; height: 40px; }
  .op-legal { left: 12px; right: 12px; bottom: 62px; text-align: left; font-size: 9.5px; }
  .onepage .reel__bar { padding-bottom: 8px; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .onepage .world__line { font-size: clamp(40px, 11.5vw, 54px); }
  .onepage .world__copy { bottom: 166px; }
}

/* Catalogue page: same top bar, solid, and a one-line footer. The page itself scrolls. */
.op-top--solid { background: var(--gr-black); }
.op-top--solid::before { display: none; }
.op-foot { background: var(--gr-black); color: rgba(255, 255, 253, .72); padding: 22px var(--gutter) 28px; font: 500 12px/1.6 var(--f-mono); letter-spacing: .03em; }
.op-foot p { margin: 0; max-width: var(--maxw); margin-inline: auto; }
.op-foot a { color: inherit; }

/* 18+ check: calm and dark, white logo, no bright card. */
.onepage .age { background: rgba(8, 8, 8, .62); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.onepage .age__card {
  background: rgba(18, 18, 18, .88); color: var(--gr-white); border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45); --focus: var(--gr-white);
}
.onepage .age__wm { fill: var(--gr-white); }
.onepage .age__p { color: rgba(255, 255, 253, .78); }
.onepage .age__btns .btn { --b-bg: var(--gr-white); --b-fg: var(--gr-black); }
.onepage .age__btns .btn:hover { box-shadow: none; }
.onepage .age__no { --b-bg: transparent; --b-fg: var(--gr-white); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6); }
.onepage .age__btns .age__no { --b-bg: transparent; --b-fg: var(--gr-white); }
.onepage .age__back { color: var(--gr-white); }
@media (max-width: 760px) { .onepage .age__card { box-shadow: 0 18px 44px rgba(0, 0, 0, .45); } }
.onepage .age .btn:focus-visible { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: 3px; }

/* Catalogue page: fill the screen on tall windows, footer at the bottom, no white band below. */
body.page-catalogue { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--gr-yellow); }
body.page-catalogue > main { flex: 1 0 auto; display: flex; flex-direction: column; }
body.page-catalogue .cat-hero { flex: 1 0 auto; display: grid; align-content: center; }
body.page-catalogue:has(#viewer:not([hidden])) { background: var(--gr-black); }

/* Page-turn scroll (pager.js): the reel is page 1. The first of the old site's photos turns up over it
   like a page; from there the photos simply scroll, top to bottom, full size. The blue booklet floats
   on top. Nothing here takes the pointer until the photos are open, so the reel works as before. */
.pager__dim { position: fixed; inset: 0; z-index: 29; background: #000; opacity: 0; pointer-events: none; }
.pager { position: fixed; inset: 0; z-index: 30; pointer-events: none; }
.roll { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: #000; transform: translate3d(0, 100%, 0); visibility: hidden; will-change: transform; box-shadow: 0 -24px 60px rgba(0, 0, 0, .55); scrollbar-width: none; outline: 0; --k: 0; }
.roll::-webkit-scrollbar { display: none; }
.is-paged .roll { pointer-events: auto; }
.mo { margin: 0; background: #050505; }
.mo picture, .mo img { display: block; width: 100%; height: auto; }
.mo:first-child img { transform-origin: 50% 0; transform: scale(calc(1.1 - var(--k) * .1)); filter: brightness(calc(.3 + var(--k) * .7)); }
.bk { position: fixed; inset: 0; z-index: 35; display: grid; place-items: center; pointer-events: none; opacity: 0; transition: opacity .9s ease .25s; }
.bk.is-on { opacity: 1; }
.bk__mv { width: min(64vmin, 620px); height: min(64vmin, 620px); --poster-color: transparent; background: transparent; }
.pager__dots { position: fixed; z-index: 61; right: max(14px, env(safe-area-inset-right, 0px)); top: 50%; transform: translateY(-50%); display: grid; gap: 10px; }
.pager__dots button { width: 22px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.pager__dots button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 253, .45); box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); transition: transform .2s, background-color .2s; }
.pager__dots button[aria-current="true"]::before { background: var(--gr-yellow); transform: scale(1.35); }
.pager__dots button:focus-visible { outline: 2px solid var(--gr-yellow); outline-offset: 2px; border-radius: 50%; }
.js .v3.is-intro .pager__dots { opacity: 0; }
/* German, French, Spanish and Dutch pages: a small pill under the dots, this language on top, EN below. */
.pager__lang { justify-self: center; margin-top: 10px; display: grid; width: 26px; border-radius: 13px; overflow: hidden; font: 600 9.5px/1 var(--f-mono); letter-spacing: .04em; background: rgba(19, 19, 19, .35); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 253, .6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pager__lang > * { height: 24px; display: grid; place-items: center; }
.pager__lang-now { background: rgba(255, 255, 253, .92); color: var(--gr-black); }
.pager__lang a { color: var(--gr-white); text-decoration: none; transition: background-color .2s, color .2s; }
.pager__lang a:hover, .pager__lang a:focus-visible { background: var(--gr-yellow); color: var(--gr-black); outline: none; }
.op-foot .op-lang { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-left: 6px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; text-decoration: none; font-size: 10px; vertical-align: middle; }
@media (max-width: 760px) { .bk__mv { width: 78vmin; height: 78vmin; } .pager__dots { gap: 6px; } }