/* ============================================================
 *  TED SAUNDERS — PORTFOLIO · four environments, one universe
 *  Each section is ONE composition: the media is the room, the
 *  copy lives inside it, artifacts emerge from the atmosphere.
 *  Laid out at 1920, scaled. No hard media rectangles.
 * ============================================================ */

/* ---------- grain ---------- */
.pp-grain::after {
  content: ""; position: absolute; inset: -40%; z-index: 6; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.06; mix-blend-mode: overlay; animation: ppGrain 0.7s steps(3) infinite;
}
@keyframes ppGrain { 0%{transform:translate(0,0)} 33%{transform:translate(-3%,2%)} 66%{transform:translate(2%,-2%)} 100%{transform:translate(-1%,1%)} }
@media (prefers-reduced-motion: reduce) { .pp-grain::after { animation: none; } }

/* ---------- HERO — entering the archive ---------- */
/* ============================================================
 *  HERO — scroll-reveal 3D gallery (ContainerScroll pattern)
 *  Tall track + JS-pinned sticky stage. The gallery starts steeply
 *  tilted (rotateX 75°, scaled up) and eases upright + down to 1 as
 *  you scroll through; columns parallax. Pin math is JS-driven so it
 *  stays correct inside the scaled stage.
 * ============================================================ */
.pp-scroll { position: relative; width: 1920px; height: 1900px; background: #000; }
.pp-sticky { position: absolute; top: 0; left: 0; width: 1920px; height: 1080px; overflow: hidden; isolation: isolate;
  perspective: 1300px; perspective-origin: 50% 4%; will-change: transform; }

.pp-gallery { position: absolute; inset: -6% -2% -2%; z-index: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  transform-style: preserve-3d; transform-origin: 50% 8%; transform: rotateX(75deg) scale(1.2); will-change: transform; }
.pp-gallery__col { display: flex; flex-direction: column; gap: 20px; will-change: transform; }
.pp-gallery__col--mid { margin-top: -38%; }
.pp-gallery__tile { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 8px; background: #0c0a08;
  box-shadow: 0 30px 70px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(209,157,99,0.08); }
.pp-gallery__tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.94) brightness(0.84); }

/* veil — atmospheric + keeps the centered copy legible over the gallery */
.pp-hero__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, #000 0%, rgba(6,4,3,0.96) 8%, rgba(6,4,3,0.58) 20%, rgba(6,4,3,0.4) 38%, rgba(6,4,3,0.62) 50%, rgba(6,4,3,0.86) 62%, #000 74%, #000 100%),
    radial-gradient(72% 46% at 50% 22%, rgba(6,4,3,0.72) 0%, rgba(6,4,3,0) 72%),
    radial-gradient(130% 120% at 50% 50%, rgba(6,4,3,0.14) 40%, rgba(6,4,3,0.68) 100%); }
.pp-hero__wash { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(60% 60% at 50% 30%, rgba(150,90,38,0.22) 0%, rgba(150,90,38,0) 60%); }

.pp-hero__copy { position: absolute; z-index: 3; left: 50%; top: 210px; transform: translateX(-50%); width: 1180px; text-align: center; }
.pp-hero__kicker { font-family: var(--font-sans); font-weight: 700; font-size: 15px; letter-spacing: 0.4em; text-transform: uppercase; color: rgba(232,183,119,0.88); margin: 0 0 28px;
  display: inline-flex; align-items: center; justify-content: center; gap: 18px; }
.pp-hero__kicker::before, .pp-hero__kicker::after { content: ""; width: 46px; height: 1px; background: var(--grad-bronze); }

/* staggered blur-in entrance for the copy */
.pp-hero__copy > * { animation: ppRise 1s cubic-bezier(.2,.7,.2,1) both; }
.pp-hero__copy > *:nth-child(1) { animation-delay: 0.10s; }
.pp-hero__copy > *:nth-child(2) { animation-delay: 0.22s; }
.pp-hero__copy > *:nth-child(3) { animation-delay: 0.34s; }
.pp-hero__copy > *:nth-child(4) { animation-delay: 0.44s; }
.pp-hero__copy > *:nth-child(5) { animation-delay: 0.54s; }
@keyframes ppRise { from { filter: blur(10px); opacity: 0; transform: translateY(18px); } to { filter: blur(0); opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pp-hero__copy > * { animation: none; } .pp-gallery { transform: rotateX(0) scale(1) !important; } }

.pp-hero__title { font-family: var(--font-display); font-weight: 500; font-size: 156px; line-height: 0.9; letter-spacing: 0.04em; text-transform: uppercase; margin: 0;
  filter: drop-shadow(0 8px 32px rgba(0,0,0,0.6)); }
.pp-hero__rule { width: 80px; height: 2px; background: var(--grad-bronze); margin: 34px auto 26px; }
.pp-hero__motto { font-family: var(--font-sans); font-weight: 600; font-size: 19px; letter-spacing: 0.32em; text-transform: uppercase; margin: 0 0 18px;
  background: var(--grad-bronze); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pp-hero__sub { font-family: var(--font-serif); font-style: italic; font-size: 27px; line-height: 1.45; color: rgba(245,237,227,0.88); margin: 0 auto; max-width: 760px; }
.pp-hero__scrollcue { position: absolute; z-index: 3; left: 50%; bottom: 360px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 12px;
  font-family: var(--font-sans); font-weight: 600; font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(245,237,227,0.5); }
.pp-hero__scrollcue .bar { width: 1px; height: 46px; background: linear-gradient(180deg, rgba(232,183,119,0.9), rgba(232,183,119,0)); animation: ppCue 2.2s ease-in-out infinite; transform-origin: top; }
@keyframes ppCue { 0%,100% { transform: scaleY(0.4); opacity: 0.5; } 50% { transform: scaleY(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pp-hero__scrollcue .bar { animation: none; } }

/* ---------- TEXTURED HEADINGS — gold grunge texture clipped to heading text ---------- */
.pp-hero__title,
.pp-title {
  background: url("../assets/heading-texture.jpg") center / cover !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
}

/* ---------- SHARED COPY VOICE ---------- */
.pp-sections { background: #000; width: 1920px; margin-top: -1092px; position: relative; z-index: 2; }
.pp-sections::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 340px; z-index: 5; pointer-events: none;
  background: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.85) 30%, rgba(0,0,0,0.45) 62%, rgba(0,0,0,0) 100%); }
.pp-num { font-family: var(--font-display); font-size: 30px; letter-spacing: 0.1em; margin: 0 0 18px;
  background: var(--grad-bronze); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pp-title { font-family: var(--font-display); font-weight: 500; font-size: 68px; line-height: 1.0; letter-spacing: 0.035em; text-transform: uppercase; margin: 0;
  background: linear-gradient(180deg, #F7DBA0 0%, #E8B777 30%, #C9915C 62%, #A26A30 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.pp-tagline { font-family: var(--font-serif); font-style: italic; font-size: 27px; line-height: 1.4; color: rgba(245,237,227,0.96); margin: 22px 0 0; text-shadow: 0 2px 18px rgba(0,0,0,0.7); }
.pp-body { font-family: var(--font-body); font-weight: 400; font-size: 20px; line-height: 1.72; color: rgba(245,237,227,0.86); margin: 28px 0 0; max-width: 480px; text-wrap: pretty; text-shadow: 0 2px 16px rgba(0,0,0,0.65); }
.pp-body + .pp-body { margin-top: 16px; }
.pp-body em { color: rgba(245,237,227,0.88); }
.pp-btn { display: inline-flex; align-items: center; gap: 16px; margin-top: 44px; cursor: pointer; white-space: nowrap;
  height: 58px; padding: 0 34px; background: rgba(0,0,0,0.25); border: 1px solid rgba(209,157,99,0.4);
  font-family: var(--font-sans); font-weight: 600; font-size: 16px; letter-spacing: 0.22em; text-transform: uppercase; color: #fff;
  transition: border-color .35s, background .35s, transform .15s; }
.pp-btn:hover { border-color: rgba(232,183,119,0.9); background: rgba(209,157,99,0.1); }
.pp-btn:active { transform: scale(0.98); }
.pp-btn .arr { font-family: var(--font-body); font-size: 19px; line-height: 1; color: #E8B777; transition: transform .35s; }
.pp-btn:hover .arr { transform: translateX(5px); }

/* ============================================================
 *  ENVIRONMENT SECTIONS (films · music · journal)
 *  The media is an absolute, veiled backdrop of the WHOLE
 *  section; copy + artifacts live inside it.
 * ============================================================ */
.pp-sec { position: relative; width: 1920px; isolation: isolate; overflow: hidden; }
.pp-env { position: absolute; inset: 0; z-index: 0; }
.pp-env .pp-poster, .pp-env image-slot { position: absolute; inset: 0; width: 100%; height: 100%; }
.pp-env .pp-poster { object-fit: cover; }
.pp-env image-slot { z-index: 1; }
.pp-env__veil { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

/* seam fades — black gradient at the top and bottom of every editorial
   section so the differently-toned backgrounds blend into one another.
   Uses ::before only — ::after is already the film-grain layer. */
.pp-sections .pp-sec::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, #000 0, rgba(0,0,0,0) 120px, rgba(0,0,0,0) calc(100% - 120px), #000 100%); }
/* photography section: no seam/backing shade — the lens shows clean */
.pp-sections .pp-sec--photo::before { display: none !important; background: none !important; }

.pp-copyzone { position: relative; z-index: 4; min-height: 700px; display: flex; align-items: center; padding: 90px 0 0; }
.pp-sec--films .pp-copy { transform: translateY(140px); }
.pp-copy { width: 560px; margin-left: 120px; position: relative; z-index: 4; }
/* A dark panel anchored directly behind the copy so the headline + body always
   sit on top of a shade — independent of how bright the background image is. */
.pp-copy::before {
  content: ""; position: absolute; z-index: -1;
  left: -60px; right: -80px; top: -50px; bottom: -50px;
  background: radial-gradient(120% 100% at 22% 46%, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.78) 40%, rgba(0,0,0,0.42) 66%, rgba(0,0,0,0) 88%);
  pointer-events: none;
}
/* nudge the Films copy block down ~20% of the copyzone height
   (via padding on the copyzone — pp-reveal owns the copy's inline transform) */
.pp-sec--films .pp-copyzone { align-items: flex-start; padding-top: 230px; }

/* play affordance — floats in the scene */
.pp-playpos { position: absolute; z-index: 3; left: 66%; top: 52%; }
.pp-play { width: 104px; height: 104px; border-radius: 50%; cursor: pointer;
  background: rgba(4,3,2,0.45); border: 1.5px solid rgba(247,219,160,0.8); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; transition: transform .35s cubic-bezier(.2,.7,.2,1), background .35s, box-shadow .35s; box-shadow: 0 14px 46px rgba(0,0,0,0.5); }
.pp-play:hover { transform: scale(1.08); background: rgba(4,3,2,0.6); box-shadow: 0 0 60px rgba(214,151,51,0.45); }
.pp-play svg { width: 34px; height: 40px; margin-left: 7px; }
.pp-play svg polygon { fill: #FBE6B8; }

/* ---------- FILMS · the film archive ---------- */
.pp-sec--films { background: #020202; padding-bottom: 140px; }
.pp-sec--films .pp-env .pp-poster { object-position: 72% 20%; filter: saturate(1.04) brightness(1.22) contrast(1.02); }
.pp-sec--films .pp-env__veil {
  background:
    linear-gradient(90deg, #020202 0%, rgba(2,2,2,0.92) 34%, rgba(2,2,2,0.62) 48%, rgba(2,2,2,0.12) 66%, rgba(2,2,2,0) 80%, rgba(2,2,2,0.2) 100%),
    linear-gradient(0deg, #020202 3%, rgba(2,2,2,0.4) 26%, rgba(2,2,2,0) 54%),
    linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(2,2,2,0) 8%),
    radial-gradient(52% 48% at 62% 46%, rgba(255,228,175,0.3) 0%, rgba(255,228,175,0) 74%),
    radial-gradient(46% 38% at 68% 36%, rgba(214,151,51,0.18) 0%, rgba(214,151,51,0) 70%);
}
.pp-sec--films .pp-playpos { left: 65%; top: 290px; }

/* ---------- MUSIC · the performance space ---------- */
.pp-sec--music { background: #010103; padding-bottom: 140px; }
.pp-sec--music .pp-env .pp-poster { object-position: 50% 60%; filter: saturate(1.1) brightness(0.96); }
.pp-sec--music .pp-env__veil {
  background:
    linear-gradient(90deg, #010103 0%, rgba(1,1,3,0.95) 34%, rgba(1,1,3,0.62) 50%, rgba(1,1,3,0.14) 68%, rgba(1,1,3,0.1) 80%, rgba(1,1,3,0.5) 100%),
    linear-gradient(0deg, #010103 5%, rgba(1,1,3,0.8) 30%, rgba(1,1,3,0) 58%),
    linear-gradient(180deg, rgba(0,0,1,0.28) 0%, rgba(1,1,3,0) 14%),
    radial-gradient(50% 42% at 70% 30%, rgba(82,170,165,0.2) 0%, rgba(82,170,165,0) 70%);
}
/* stage light beams */
.pp-beams { position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: screen;
  background:
    linear-gradient(112deg, transparent 46%, rgba(150,220,255,0.10) 50%, transparent 55%),
    linear-gradient(125deg, transparent 56%, rgba(150,220,255,0.07) 60%, transparent 65%),
    linear-gradient(99deg,  transparent 62%, rgba(247,219,160,0.08) 66%, transparent 70%);
  animation: ppBeams 7s ease-in-out infinite alternate; opacity: 0.9;
}
@keyframes ppBeams { from { opacity: 0.55; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pp-beams { animation: none; } }
.pp-sec--music .pp-playpos { left: 61%; top: 300px; }
/* waveform woven through the scene */
.pp-waveline { position: relative; z-index: 2; display: flex; align-items: flex-end; gap: 5px; height: 34px; margin: 30px 120px 64px; opacity: 0.4;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%); }
.pp-waveline span { flex: 1; min-width: 0; height: 12%; background: linear-gradient(180deg, rgba(247,219,160,0.85), rgba(82,170,165,0.5)); border-radius: 2px 2px 0 0; transform-origin: bottom; animation: ppWave 1.4s ease-in-out infinite; }
@keyframes ppWave { 0%,100%{transform:scaleY(0.18)} 50%{transform:scaleY(1)} }
@media (prefers-reduced-motion: reduce) { .pp-waveline span { animation: none; transform: scaleY(0.5); } }

/* ---------- JOURNAL · the study ---------- */
.pp-sec--journal { background: #0b0704; padding-bottom: 150px; }
.pp-sec--journal .pp-env { right: auto; width: 68%;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 66%, transparent 100%); mask-image: linear-gradient(90deg, #000 0%, #000 66%, transparent 100%); }
.pp-sec--journal .pp-env .pp-poster { object-position: 50% 44%; }
.pp-sec--journal .pp-env__veil {
  background:
    linear-gradient(90deg, rgba(9,6,3,0.16) 0%, rgba(9,6,3,0.05) 30%, rgba(9,6,3,0.32) 64%, #090603 100%),
    linear-gradient(0deg, rgba(9,6,3,0.94) 4%, rgba(9,6,3,0.5) 26%, rgba(9,6,3,0) 52%),
    linear-gradient(180deg, rgba(2,1,1,0.88) 0%, rgba(9,6,3,0.1) 26%),
    radial-gradient(42% 40% at 34% 42%, rgba(255,214,140,0.14) 0%, rgba(255,214,140,0) 70%);
}
.pp-sec--journal .pp-copyzone { justify-content: flex-end; }
.pp-sec--journal .pp-copy { margin-left: 0; margin-right: 120px; }
#literature .pp-title { font-size: 58px; }
/* handwriting lives on the lit parchment, now over the image on the left */
.pp-hand { position: absolute; z-index: 3; left: 30%; top: 42%; transform: translate(-50%,-50%) rotate(-1.8deg); width: 480px; text-align: center; pointer-events: none;
  font-family: var(--font-serif); font-style: italic; color: rgba(247,239,228,0.94); font-size: 25px; line-height: 1.6; text-shadow: 0 2px 22px rgba(0,0,0,0.85), 0 0 2px rgba(0,0,0,0.6); }
.pp-hand .sig { display: block; margin-top: 1.1em; font-size: 0.76em; opacity: 0.72; }
.pp-hand__note { position: absolute; z-index: 3; font-family: var(--font-serif); font-style: italic; color: rgba(247,239,228,0.82); font-size: 21px; opacity: 0.9; pointer-events: none; text-shadow: 0 2px 14px rgba(0,0,0,0.8); }
.pp-hand__note--a { top: 24%; left: 13%; transform: rotate(5deg); }
.pp-hand__note--b { top: 64%; left: 41%; transform: rotate(-7deg); }
/* paper slips on the desk */
.pp-slips { position: relative; z-index: 2; display: flex; gap: 44px; margin: 56px 120px 0; align-items: flex-start; }
.pp-slip { flex: 1; min-height: 316px; padding: 56px 70px 60px; position: relative; display: flex; flex-direction: column; justify-content: center; color: inherit; text-decoration: none; cursor: pointer;
  background: url('../assets/paper-texture-gold.png') center / 100% 100% no-repeat;
  filter: drop-shadow(0 26px 40px rgba(0,0,0,0.5));
  transition: transform .55s cubic-bezier(.2,.7,.2,1), filter .55s; }
.pp-slip:nth-child(1) { transform: rotate(-1.1deg); }
.pp-slip:nth-child(2) { transform: rotate(0.6deg) translateY(14px); }
.pp-slip:nth-child(3) { transform: rotate(-0.5deg); }
.pp-slip:nth-child(4) { transform: rotate(0.8deg) translateY(10px); }
.pp-slip:hover { transform: rotate(0deg) translateY(-10px); filter: drop-shadow(0 50px 80px rgba(0,0,0,0.7)) drop-shadow(0 0 46px rgba(214,151,51,0.2)); }
.pp-slip__no { display: none; }
.pp-slip__cat { font-family: var(--font-display); font-weight: 500; font-size: 30px; line-height: 1.05; letter-spacing: 0.02em; color: #4a3315; margin: 10px 0 0; }
.pp-slip__q { font-family: var(--font-serif); font-style: italic; font-size: 21px; line-height: 1.55; color: #3a2a14; margin: 14px 0 0; }
.pp-slip__tab { display: none; }
.pp-slip__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; font-family: var(--font-sans); font-weight: 700; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: #6b4a1f; opacity: 0.55; transition: opacity .3s; }
.pp-slip__go .arr { display: inline-block; transition: transform .35s; }
.pp-slip:hover .pp-slip__go { opacity: 1; }
.pp-slip:hover .pp-slip__go .arr { transform: translateX(4px); }

/* ============================================================
 *  PHOTOGRAPHY · the gallery — exhibited prints, negative space
 * ============================================================ */
.pp-sec--photo { background: #020202; padding: 0 0 140px; }
.pp-sec--photo .pp-env { right: auto; width: 68%;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 66%, transparent 100%); mask-image: linear-gradient(90deg, #000 0%, #000 66%, transparent 100%); }
.pp-sec--photo .pp-env .pp-poster { object-position: 50% 40%; filter: saturate(1.02) brightness(1.02); }
.pp-sec--photo .pp-env__veil { background: linear-gradient(90deg, rgba(2,2,2,0) 82%, #020202 100%); }
.pp-wall { position: relative; z-index: 2; min-height: 700px; display: flex; align-items: center; justify-content: flex-end; padding: 96px 120px 60px; }
/* picture lights washing down the wall */
.pp-wall__light { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(34% 60% at 26% -4%, rgba(255,226,170,0.16) 0%, rgba(255,226,170,0) 68%),
    radial-gradient(24% 44% at 56% 6%, rgba(255,226,170,0.08) 0%, rgba(255,226,170,0) 70%); }
.pp-print { position: absolute; background: #f6efe2; cursor: pointer;
  box-shadow: 0 60px 120px rgba(0,0,0,0.66), 0 10px 30px rgba(0,0,0,0.5);
  transition: transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .6s; }
.pp-print:hover { transform: translateY(-8px); box-shadow: 0 80px 150px rgba(0,0,0,0.72), 0 14px 36px rgba(0,0,0,0.55); }
.pp-print__win { position: absolute; overflow: hidden; }
.pp-print__win .pp-poster, .pp-print__win image-slot { position: absolute; inset: 0; width: 100%; height: 100%; }
.pp-print__win .pp-poster { object-fit: cover; }
.pp-print__win image-slot { z-index: 1; }
.pp-print--main { left: 120px; top: 90px; width: 640px; height: 800px; padding: 18px; }
.pp-print--main .pp-print__win { inset: 18px; }
.pp-print--second { left: 690px; top: 600px; width: 430px; height: 320px; padding: 14px; z-index: 2; }
.pp-print--second .pp-print__win { inset: 14px; }
.pp-print__tag { position: absolute; left: 4px; bottom: -44px; font-family: var(--font-sans); font-weight: 600; font-size: 13px; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(245,237,227,0.42); white-space: nowrap; }
.pp-sec--photo .pp-copy { position: static; right: auto; top: auto; transform: none; width: 560px; margin: 0; }

/* ============================================================
 *  ARCHIVE DRAWERS (strips w/ arrows)
 * ============================================================ */
.pp-drawer { position: relative; z-index: 2; padding: 0 120px; }
.pp-sec--films .pp-drawer { margin-top: 64px; }
.pp-sec--photo .pp-drawer { margin-top: 64px; }
.pp-sec--music .pp-drawer { margin-top: 56px; }
.pp-drawer__view { overflow: hidden; padding: 10px 6px 14px; }
.pp-drawer__track { display: flex; gap: 40px; will-change: transform; }
.pp-drawer__arrow { position: absolute; z-index: 5; top: 50%; transform: translateY(-50%); width: 54px; height: 54px; border-radius: 50%;
  background: rgba(0,0,0,0.4); border: 1px solid rgba(209,157,99,0.4); color: #E8C98A; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background .3s, border-color .3s, opacity .3s; }
.pp-drawer__arrow:hover { background: rgba(209,157,99,0.14); border-color: rgba(232,183,119,0.85); }
.pp-drawer__arrow svg { width: 20px; height: 20px; }
.pp-drawer__arrow--prev { left: 34px; }
.pp-drawer__arrow--next { right: 34px; }
.pp-drawer__arrow[data-dim] { opacity: 0.25; cursor: default; }

/* film posters — collectible artifacts emerging from the dark */
.pp-poster-item { flex: 0 0 auto; width: 310px; cursor: pointer; text-decoration: none; display: block; }
.pp-poster-item__art { position: relative; aspect-ratio: 2 / 3; overflow: hidden; background: #0c0c0c; border-radius: 2px;
  box-shadow: 0 46px 90px rgba(0,0,0,0.75), 0 8px 24px rgba(0,0,0,0.6);
  transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s; }
.pp-poster-item__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.pp-poster-item__art::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0) 18%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.4) 100%);
  box-shadow: inset 0 0 0 1px rgba(209,157,99,0.14); }
.pp-poster-item__art::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(0deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.25) 40%, rgba(0,0,0,0) 62%); opacity: 0; transition: opacity .45s; }
.pp-poster-item:hover .pp-poster-item__art { transform: translateY(-14px); box-shadow: 0 64px 120px rgba(0,0,0,0.8), 0 0 0 1px rgba(209,157,99,0.45), 0 0 70px rgba(214,151,51,0.12); }
.pp-poster-item:hover .pp-poster-item__art img { transform: scale(1.05); }
.pp-poster-item:hover .pp-poster-item__art::after { opacity: 1; }
.pp-poster-item__desc { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 26px 24px;
  font-family: var(--font-body); font-size: 16.5px; line-height: 1.5; color: rgba(255,255,255,0.88);
  transform: translateY(16px); opacity: 0; transition: transform .5s cubic-bezier(.2,.7,.2,1), opacity .45s; }
.pp-poster-item:hover .pp-poster-item__desc { transform: none; opacity: 1; }
.pp-poster-item__meta { margin-top: 24px; min-height: 84px; }
.pp-poster-item__title { font-family: var(--font-display); font-size: 21px; line-height: 1.15; letter-spacing: 0.02em; text-transform: uppercase; color: rgba(245,237,227,0.92); margin: 0; }
.pp-poster-item__sub { font-family: var(--font-sans); font-weight: 600; font-size: 13.5px; letter-spacing: 0.24em; text-transform: uppercase; margin: 10px 0 0;
  background: var(--grad-bronze); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* photography ledge prints */
.pp-thumb { flex: 0 0 auto; position: relative; width: 252px; aspect-ratio: 5 / 4; overflow: hidden; background: #FFEACA; padding: 4px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.55), 0 6px 16px rgba(0,0,0,0.4); cursor: pointer; transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s; }
.pp-thumb__win { position: absolute; inset: 4px; overflow: hidden; }
.pp-thumb__win .pp-poster, .pp-thumb__win image-slot { position: absolute; inset: 0; width: 100%; height: 100%; }
.pp-thumb__win image-slot { z-index: 1; } .pp-thumb__win .pp-poster { object-fit: cover; transition: transform .9s; filter: saturate(0.92); }
.pp-thumb:hover { transform: translateY(-8px); box-shadow: 0 44px 84px rgba(0,0,0,0.65), 0 8px 20px rgba(0,0,0,0.45); }
.pp-thumb:hover .pp-poster { transform: scale(1.05); filter: none; }
.pp-thumb-cell { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; cursor: pointer; }
.pp-thumb-cell .pp-thumb { width: 252px; }
.pp-thumb__cap { margin: 16px 2px 0; font-family: var(--font-display); font-weight: 600;
  font-size: 21px; letter-spacing: 0.01em; color: var(--c-cream); text-transform: uppercase; }
.pp-thumb__label { position: absolute; z-index: 2; left: 4px; right: 4px; bottom: 4px; padding: 30px 16px 12px;
  font-family: var(--font-sans); font-weight: 600; font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: linear-gradient(0deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.32) 56%, rgba(0,0,0,0) 100%); pointer-events: none; }

/* music clips — live monitors */
.pp-clipcard { flex: 0 0 auto; position: relative; width: 300px; aspect-ratio: 16 / 9; overflow: hidden; background: #0a0a0a;
  box-shadow: 0 34px 70px rgba(0,0,0,0.7), 0 6px 18px rgba(0,0,0,0.5); cursor: pointer; transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s; }
.pp-clipcard .pp-poster, .pp-clipcard image-slot { position: absolute; inset: 0; width: 100%; height: 100%; }
.pp-clipcard image-slot { z-index: 1; } .pp-clipcard .pp-poster { object-fit: cover; transition: transform .9s; }
.pp-clipcard::after { content:""; position:absolute; inset:0; z-index:2; background: radial-gradient(60% 60% at 50% 50%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.5) 100%); box-shadow: inset 0 0 0 1px rgba(82,170,165,0.12); }
.pp-clipcard:hover { transform: translateY(-8px); box-shadow: 0 48px 96px rgba(0,0,0,0.75), 0 0 0 1px rgba(82,170,165,0.45), 0 0 60px rgba(82,170,165,0.1); }
.pp-clipcard:hover .pp-poster { transform: scale(1.05); }
.pp-clipcard__play { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 50px; height: 50px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.7); background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; }
.pp-clipcard__play svg { width: 16px; height: 16px; margin-left: 2px; } .pp-clipcard__play polygon { fill: #fff; }
.pp-clipcard__label { position: absolute; z-index: 3; left: 18px; bottom: 14px; font-family: var(--font-sans); font-weight: 600; font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.85); white-space: nowrap; }

/* ---------- reveal ---------- */
.pp-reveal { opacity: 0; transform: translateY(38px); transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); }
.pp-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .pp-reveal { opacity: 1; transform: none; transition: none; } }

/* ============================================================
 *  MOBILE (.tk-stage.is-mobile)
 * ============================================================ */
.tk-stage.is-mobile .pp-scroll { width: 100%; height: auto; }
.tk-stage.is-mobile .pp-sticky { position: relative; width: 100%; height: auto; min-height: 600px; transform: none !important; }
.tk-stage.is-mobile .pp-gallery { position: absolute; inset: 0; transform: none !important; grid-template-columns: repeat(2, 1fr); gap: 10px; opacity: 0.42; }
.tk-stage.is-mobile .pp-gallery__col--mid { margin-top: 0; }
.tk-stage.is-mobile .pp-gallery__tile { aspect-ratio: 4 / 3; }
.tk-stage.is-mobile .pp-hero__copy { position: relative; left: 0; top: 0; transform: none; width: 100%; padding: 130px 24px 80px; }
.tk-stage.is-mobile .pp-hero__kicker { font-size: 11px; letter-spacing: 0.28em; }
.tk-stage.is-mobile .pp-hero__title { font-size: 72px; }
.tk-stage.is-mobile .pp-hero__motto { font-size: 13px; letter-spacing: 0.22em; }
.tk-stage.is-mobile .pp-hero__sub { font-size: 17px; }
.tk-stage.is-mobile .pp-hero__scrollcue { display: none; }

.tk-stage.is-mobile .pp-sections, .tk-stage.is-mobile .pp-sec { width: 100%; }
.tk-stage.is-mobile .pp-copyzone { min-height: 0; padding: 56vw 0 0; }
.tk-stage.is-mobile .pp-copy { width: 100%; margin: 0; padding: 24px; }
.tk-stage.is-mobile .pp-env { height: 64vw; inset: 0 0 auto 0; }
.tk-stage.is-mobile .pp-env__veil { background: linear-gradient(0deg, #050505 4%, rgba(5,5,5,0.4) 40%, rgba(5,5,5,0) 70%), linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 30%) !important; }
.tk-stage.is-mobile .pp-playpos { left: auto; right: 20px; top: 40vw; }
.tk-stage.is-mobile .pp-play { width: 60px; height: 60px; } .tk-stage.is-mobile .pp-play svg { width: 20px; height: 24px; }
.tk-stage.is-mobile .pp-title { font-size: 42px; }
.tk-stage.is-mobile #literature .pp-title { font-size: 34px; }
.tk-stage.is-mobile .pp-tagline { font-size: 18px; margin-top: 14px; }
.tk-stage.is-mobile .pp-body { font-size: 15px; margin-top: 18px; max-width: 100%; }
.tk-stage.is-mobile .pp-num { font-size: 20px; margin-bottom: 10px; }
.tk-stage.is-mobile .pp-btn { margin-top: 28px; height: 50px; padding: 0 24px; font-size: 13px; letter-spacing: 0.16em; }
.tk-stage.is-mobile .pp-hand { font-size: 13px; width: 60%; left: 50%; top: 30vw; }
.tk-stage.is-mobile .pp-hand__note { display: none; }

.tk-stage.is-mobile .pp-wall { min-height: 0; padding: 24px 0 0; }
.tk-stage.is-mobile .pp-print { position: relative; display: block; }
.tk-stage.is-mobile .pp-print--main { left: 24px; top: 0; width: calc(100% - 48px); height: 100vw; }
.tk-stage.is-mobile .pp-print--second { display: none; }
.tk-stage.is-mobile .pp-print__tag { bottom: -32px; font-size: 10px; }
.tk-stage.is-mobile .pp-sec--photo .pp-copy { position: relative; right: auto; top: auto; transform: none; width: 100%; padding: 56px 24px 0; }
.tk-stage.is-mobile .pp-sec--photo .pp-drawer { margin-top: 40px; }

.tk-stage.is-mobile .pp-drawer { margin-top: 24px !important; padding: 0 24px; }
.tk-stage.is-mobile .pp-drawer__arrow { display: none; }
.tk-stage.is-mobile .pp-drawer__view { overflow-x: auto; padding: 16px 2px 8px; }
.tk-stage.is-mobile .pp-drawer__track { gap: 16px; }
.tk-stage.is-mobile .pp-poster-item { width: 190px; }
.tk-stage.is-mobile .pp-poster-item__title { font-size: 14px; }
.tk-stage.is-mobile .pp-poster-item__sub { font-size: 10px; }
.tk-stage.is-mobile .pp-thumb { width: 170px; }
.tk-stage.is-mobile .pp-clipcard { width: 220px; }
.tk-stage.is-mobile .pp-waveline { margin: 20px 24px 32px; }
.tk-stage.is-mobile .pp-slips { flex-direction: column; gap: 20px; margin: 0 24px; }
.tk-stage.is-mobile .pp-slip:nth-child(2) { transform: rotate(0.6deg); }
.tk-stage.is-mobile .pp-slip { padding: 44px 60px; min-height: 0; }
.tk-stage.is-mobile .pp-slip__q { font-size: 17px; }
.tk-stage.is-mobile .pp-sec--films, .tk-stage.is-mobile .pp-sec--music, .tk-stage.is-mobile .pp-sec--journal, .tk-stage.is-mobile .pp-sec--photo { padding-bottom: 72px; }