/* Shared by every page: colours, header, footer, "more below" triangle, image viewer. */
:root{ --bg:#141414; --overlay:#0E0E0E; --text:#F2F2F2; --dim:#8C8C8C; --mono:#999999; --line:#E6E6E6; --rule:#2A2A2A; --gap:45px; }
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text)}
body{font-family:'Lora',Georgia,serif}
body.locked{overflow:hidden}

/* Header — P01 Home */
header{display:flex;justify-content:space-between;align-items:flex-end;height:120px;padding:0 60px 22px;
  position:sticky;top:0;z-index:5;background:var(--bg)}
.brand{color:inherit;text-decoration:none;display:block}
.name{font-size:32px;line-height:40px;letter-spacing:-0.01em;margin:0;font-weight:400}
.role{font-size:19px;line-height:24px;color:var(--dim);margin:2px 0 0}
nav{display:flex;gap:40px;padding-bottom:2px}
nav a{font-size:19px;line-height:24px;color:var(--text);text-decoration:none}
nav a:hover,nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}

footer{display:flex;justify-content:center;padding:36px 16px 40px}
footer p{margin:0;font-size:14px;line-height:20px;color:var(--dim);letter-spacing:.01em}

/* "More below" triangle */
#more{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);width:72px;height:40px;border:0;padding:0;
  background:none;cursor:pointer;z-index:4;transition:opacity .3s ease;filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))}
#more svg{display:block;animation:bob 2.2s ease-in-out infinite}
#more.hide{opacity:0;pointer-events:none}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* Image viewer — P01b Home · Slider (open) */
#slider{position:fixed;inset:0;background:rgba(14,14,14,.6);-webkit-backdrop-filter:blur(26px) saturate(.9);
  backdrop-filter:blur(26px) saturate(.9);display:none;flex-direction:column;z-index:10}
#slider.open{display:flex}
#slider.single .count{visibility:hidden}
#slider.single .icon.nav{display:none}
#slider.single .thumbs{display:none}   /* one picture: give the strip's height to the picture */
.zoom{display:flex;align-items:center;gap:4px}
.s-top{display:flex;justify-content:flex-end;align-items:center;gap:32px;height:96px;flex-shrink:0;padding:0 60px}
.count{font-family:'IBM Plex Mono',monospace;font-size:13px;line-height:22px;color:var(--mono)}
.icon{width:56px;height:56px;display:flex;align-items:center;justify-content:center;background:none;border:0;cursor:pointer;padding:0;flex-shrink:0}
.icon.small{width:36px;height:36px}
.icon.close{width:40px;height:40px}
.icon[disabled]{opacity:.3;cursor:default}
.icon svg{display:block}
.icon:hover path{stroke:#FFFFFF}
.icon:focus{outline:none}
.icon:focus-visible{outline:1px solid #555555;outline-offset:2px}
.stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:space-between;padding:0 44px;gap:16px}
.frame{flex:1;min-width:0;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;
  touch-action:none;cursor:default}
.frame img{cursor:zoom-in}
.frame.zoomed, .frame.zoomed img{cursor:grab}
.frame.dragging, .frame.dragging img{cursor:grabbing}
.frame img{max-width:100%;max-height:100%;object-fit:contain;display:block;user-select:none;-webkit-user-drag:none;
  transform-origin:50% 50%;will-change:transform;box-shadow:0 10px 40px rgba(0,0,0,.35)}
.frame img.ease{transition:transform .22s ease}
/* Optional details panel beside the picture (Professional page): shown only when the viewer opens with details.
   Big layout (artist's mockup 2026-11-09): poster near full height, large type on a dark panel. */
.details{display:none;width:560px;flex-shrink:0;align-self:stretch;flex-direction:column;justify-content:center;
  padding:48px 56px;background:rgba(12,12,12,.78)}
#slider.has-details .details{display:flex}
#slider.has-details .s-top{height:64px}
#slider.has-details .stage{padding:0 0 48px 40px;gap:48px}
#slider.has-details .frame img{max-height:100%}
/* Trailer in the big area (Professional viewer); the poster sits at the top of the details panel */
.yt{display:none;aspect-ratio:16/9;width:min(100%, calc((100vh - 64px - 48px) * 16 / 9));max-height:100%}
#slider.video #big{display:none}
#slider.video .yt{display:block}
#slider.video .zoom{visibility:hidden}
#slider.video.has-details .icon.nav,#slider.video.has-details .count{visibility:hidden}  /* Professional trailer only */
.yt iframe,.yt-preview{width:100%;height:100%;border:0;display:block}
.yt-preview{position:relative;padding:0;background:#000;cursor:pointer;box-shadow:0 10px 40px rgba(0,0,0,.35)}
.yt-preview img{width:100%;height:100%;object-fit:cover;display:block}
.yt-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:96px;height:96px;border-radius:50%;
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center;
  transition:background .2s, transform .2s}
.yt-preview:hover .yt-play{background:rgba(0,0,0,.78);transform:translate(-50%,-50%) scale(1.05)}
.d-poster{display:block;margin:0 0 32px;align-self:center}   /* just a picture: centred, no click, no zoom */
.d-poster img{height:260px;width:auto;display:block;user-select:none;-webkit-user-drag:none}
button.trailer{background:none;border:0;padding:0;cursor:pointer;font-family:inherit}
button.trailer.on .play{border-color:var(--text);background:rgba(255,255,255,.1)}
.facts{margin:0}
.fact{display:flex;gap:32px;padding:24px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.fact:first-child{padding-top:0}
.fact dt{width:166px;flex-shrink:0;font-weight:600;font-size:23px;line-height:32px;letter-spacing:.01em;color:var(--text)}
.fact dd{margin:0;font-size:23px;line-height:32px;letter-spacing:.01em;color:#B8B8B8}
.trailer{display:inline-flex;align-items:center;gap:18px;margin-top:36px;color:var(--text);text-decoration:none;font-size:23px;line-height:32px}
.trailer .play{width:56px;height:56px;border:1px solid #7A7A7A;border-radius:50%;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:border-color .2s, background .2s}
.trailer .play svg{width:18px;height:18px}
.details{overflow-y:auto}
@media (max-height:1000px) and (min-width:901px){   /* shorter screens: keep poster + facts + button inside the panel */
  .d-poster{margin-bottom:22px}
  .d-poster img{height:190px}
  .details{padding-top:28px;padding-bottom:28px}
  .fact{padding:16px 0}
  .trailer{margin-top:24px}
}
@media (max-width:1300px){
  .details{width:460px;padding:40px 44px}
  .fact dt{width:150px}
  .fact dt,.fact dd,.trailer{font-size:19px;line-height:28px}
}
.trailer:hover .play{border-color:var(--text);background:rgba(255,255,255,.08)}
.trailer:hover span:last-child{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.thumbs{display:flex;justify-content:center;align-items:center;gap:8px;height:120px;flex-shrink:0;padding:0 16px 20px;overflow-x:auto}
.thumbs button{width:84px;height:56px;flex-shrink:0;padding:0;border:0;background:#000;cursor:pointer;opacity:.45;transition:opacity .15s}
.thumbs button:hover{opacity:.8}
.thumbs button.on{opacity:1;outline:1px solid var(--line);outline-offset:3px}
.thumbs img{width:100%;height:100%;object-fit:cover;display:block}

@media (max-width:900px){
  header{height:auto;padding:24px 16px 18px;flex-direction:column;align-items:flex-start;gap:14px}
  .name{font-size:26px;line-height:32px}
  .role,nav a{font-size:16px}
  nav{gap:22px}
  :root{--gap:24px}
  .s-top{padding:0 16px;height:64px}
  .stage{padding:0 4px;gap:0}
  .icon{width:44px}
  .thumbs{justify-content:flex-start;height:92px}
  .thumbs button{width:64px;height:44px}
  /* phones: details go under the picture */
  #slider.has-details .stage{flex-wrap:wrap;align-content:center;overflow-y:auto}
  #slider.has-details .frame{flex:1 1 calc(100% - 88px);height:55vh}
  .details{width:100%;order:3;padding:20px 18px;align-self:auto}
  #slider.has-details .stage{padding:0 4px 16px;gap:0}
  .fact dt{width:110px}
  .fact dt,.fact dd,.trailer{font-size:16px;line-height:24px}
  .fact{padding:14px 0}
  .trailer .play{width:44px;height:44px}
  .d-poster img{height:160px}
  .yt{width:100%}
  .yt-play{width:64px;height:64px}
}