/* ==========================================================================
   ISHLVLSTUDIOS — GENERATIVE LAB
   Reuses the approved Film implementation's design system verbatim.
   White void. Black ink. The orbit is the signature interaction —
   only the content changes between divisions.
   ========================================================================== */

:root{
  --black:#0a0a0a;
  --white:#ffffff;
  --gray-1:#6b6b6b;
  --gray-2:#b3b3b3;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.16,.84,.44,1);
}

*{box-sizing:border-box;}
html,body{ height:100%; margin:0; }
body{
  background:var(--white); color:var(--black);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  -webkit-font-smoothing:antialiased; width:100%;
}
img{display:block;max-width:100%;}
button{font:inherit;background:none;border:none;padding:0;cursor:pointer;color:inherit;}

/* ==========================================================================
   TOP BAR — identical component to Film (class names reused verbatim)
   ========================================================================== */
.film-bar{
  position:absolute; top:0;left:0;right:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(30px + env(safe-area-inset-top)) calc(36px + env(safe-area-inset-right)) 30px calc(36px + env(safe-area-inset-left)); pointer-events:none;
}
.film-bar > *{pointer-events:auto;}
.home-mark img{height:88px;width:auto;display:block;opacity:.92;transition:opacity .4s var(--ease);}
.home-mark:hover img{opacity:1;}
.division-id{
  font-size:14px;
  font-weight:500;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--black);
  white-space:nowrap;
}

.sound-toggle{
  position:absolute; left:32px; bottom:22px; z-index:40;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--gray-2);
  transition:color .3s var(--ease);
  display:flex; align-items:center; gap:8px;
}
.sound-toggle:hover{color:var(--black);}
.sound-toggle .dot{
  width:5px;height:5px;border-radius:50%;background:currentColor;
  transition:background .3s var(--ease);
}
.sound-toggle.is-on{color:var(--black);}

/* Page footer — lives at the true end of the document, not inside the hero. */
.corner-id{
  width:100%; box-sizing:border-box;
  padding:0 36px 32px;
  font-size:10px;letter-spacing:.12em;text-transform:uppercase; color:var(--gray-2);
  display:flex; justify-content:flex-end; gap:8px;
}

/* ==========================================================================
   ARCHIVE VIEWPORT — the hero orbit, identical mechanism to Film
   ========================================================================== */
.archive-viewport{
  position:relative; width:100%; height:100vh; height:100svh;
  display:flex; align-items:center; justify-content:flex-end; flex-direction:column;
  padding-bottom:8vh;
  overflow:hidden;
}
.orbit-group{
  width:100%;
  display:flex; flex-direction:column; align-items:center;
  transform:translateX(5vw);
}
.archive-stage{
  position:relative; width:100%; height:min(64vh,640px);
  perspective:2200px; perspective-origin:50% 50%;
  cursor:grab; touch-action:none; -webkit-user-select:none; user-select:none;
}
/* Smaller orbits (Section 03, one per project) — only the footprint
   changes. Same perspective depth ratio, same radius/tilt/size formulas
   (all derived from this box's own live pixel size in orbit-engine.js). */
.archive-stage.archive-stage--embed{ height:min(40vh,420px); }

.archive-stage.is-dragging{cursor:grabbing;}
.archive-world{
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d;
  transition:transform .7s var(--ease-soft);
  will-change:transform;
}

.archive-card{
  position:absolute; top:50%;left:50%;
  will-change:transform,opacity,filter;
  transform-style:preserve-3d;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.archive-card-inner{
  width:100%;height:100%;
  transform:translate(-50%,-50%);
  box-shadow:0 30px 60px -18px rgba(0,0,0,.22);
  transition:box-shadow .4s var(--ease);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.archive-card.is-focus .archive-card-inner{
  box-shadow:0 40px 90px -14px rgba(0,0,0,.32);
}
.archive-card video,
.archive-card img{
  display:block; width:100%; height:100%; object-fit:contain; background:#000; pointer-events:none;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

.archive-card.is-expanded{
  z-index:200 !important;
}

.archive-world.has-expanded .archive-card:not(.is-expanded){
  pointer-events:none;
}

/* ==========================================================================
   FOCUS CAPTION
   ========================================================================== */
.focus-caption{
  margin-top:-32px;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  min-height:50px; pointer-events:none;
}
.fc-project{
  font-family:'Newsreader',Georgia,serif;font-style:italic;font-size:19px;
  opacity:0;transform:translateY(6px);
  transition:opacity .5s var(--ease-soft),transform .5s var(--ease-soft);
}
.fc-year{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gray-1);
  opacity:0;transform:translateY(6px);
  transition:opacity .5s var(--ease-soft) .05s,transform .5s var(--ease-soft) .05s;
}
.focus-caption.is-in .fc-project,
.focus-caption.is-in .fc-year{opacity:1;transform:translateY(0);}

.hint{
  margin:22px 0 0;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gray-2);
  opacity:1; transition:opacity 1s var(--ease-soft);
}
.hint.is-hidden{opacity:0;}

/* ==========================================================================
   EXPANDED-MODE CONTROLS
   ========================================================================== */
.expand-close{
  position:absolute; top:32px; right:36px; z-index:210;
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--gray-1);
  opacity:0; pointer-events:none; transition:opacity .4s var(--ease-soft), color .3s var(--ease);
}
.expand-close.is-active{opacity:1;pointer-events:auto;}
.expand-close:hover{color:var(--black);}

/* Safe-area — hero viewport edge elements */
.archive-viewport > .sound-toggle{bottom:calc(22px + env(safe-area-inset-bottom));left:calc(32px + env(safe-area-inset-left));}
.archive-viewport > .expand-close{top:calc(32px + env(safe-area-inset-top));right:calc(36px + env(safe-area-inset-right));}

/* reveal-on-scroll base state — matches Film/mockup-01-homepage exactly */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease-soft),transform 1s var(--ease-soft);}
.reveal.is-visible{opacity:1;transform:translateY(0);}
.film-copy .reveal:nth-child(2){transition-delay:.08s;}
.film-copy .reveal:nth-child(3){transition-delay:.16s;}
.project-exhibition-inner .reveal:nth-child(2){transition-delay:.08s;}
.project-exhibition-inner .reveal:nth-child(3){transition-delay:.16s;}

/* ==========================================================================
   NARRATIVE COPY — Section 02, identical layout/typography to Film's
   narrative section (class reused verbatim: same component, new content).
   ========================================================================== */
.film-copy{
  width:100%; min-height:100vh; min-height:100svh; box-sizing:border-box;
  padding:9vh 36px 12vh;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
}
.film-copy-inner{
  max-width:680px; width:100%; text-align:left;
}
.copy-kicker{
  margin:0 0 28px;
  font-size:11px; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gray-1);
}
.film-copy p{
  margin:0 0 28px;
  font-family:'Newsreader',Georgia,serif; font-style:normal; font-weight:400;
  font-size:21px; line-height:1.65; color:var(--black);
}
.film-copy p:last-child{margin-bottom:0;}

/* ==========================================================================
   SCROLL CUE — identical component to Film
   ========================================================================== */
.scroll-cue{
  position:fixed;
  right:calc(16px + env(safe-area-inset-right));
  top:calc(44px + env(safe-area-inset-top));
  width:auto; padding:0; gap:6px;
  display:flex; flex-direction:column; align-items:center;
  pointer-events:none;
}
.scroll-cue-label{
  font-size:10px; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gray-2); display:none;
}
.scroll-cue-line{
  position:relative; width:1px; height:34px;
  background:rgba(10,10,10,.12); overflow:hidden;
}
.scroll-cue-track{
  position:absolute; top:-40%; left:0; width:100%; height:40%;
  background:var(--black);
  animation:scrollCueMove 2.4s var(--ease-soft) infinite;
}
@keyframes scrollCueMove{
  0%{top:-40%;opacity:0;}
  20%{opacity:1;}
  80%{opacity:1;}
  100%{top:100%;opacity:0;}
}

/* ==========================================================================
   PROJECT EXHIBITIONS — Section 03. Same editorial rhythm as the
   narrative section (centered block, left-aligned text, generous white
   space) plus one smaller orbit per project. No grids, no cards, no
   sliders — the orbit remains the only gallery mechanism.
   ========================================================================== */
.project-exhibition{
  width:100%; box-sizing:border-box;
  padding:14vh 36px 4vh;
  display:flex; flex-direction:column; align-items:center;
}
.project-exhibition-inner{
  max-width:680px; width:100%; text-align:left; margin-bottom:2vh;
}
.project-kicker{
  margin:0 0 20px;
  font-size:11px; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gray-1);
}
.project-title{
  margin:0 0 28px;
  font-family:'Newsreader',Georgia,serif; font-style:italic; font-weight:400;
  font-size:56px; line-height:1.08; color:var(--black);
}
/* Artist signature mark used in place of typed title text (ISH / DOBLEM) —
   sized to match the visual weight of the italic serif title it replaces. */
.project-title img.artist-signature{
  height:64px; width:auto; display:block;
}
.project-exhibition-inner p{
  margin:0;
  font-family:'Newsreader',Georgia,serif; font-style:normal; font-weight:400;
  font-size:21px; line-height:1.65; color:var(--black);
}
/* Second narrative paragraph, when present — same rhythm as the two-
   paragraph narrative section (.film-copy p). */
.project-exhibition-inner p.reveal{
  margin:0 0 24px;
}
.project-exhibition-inner p.reveal:last-of-type{
  margin-bottom:0;
}
.project-exhibition-inner .reveal:nth-child(4){transition-delay:.24s;}
.project-exhibition-inner p.social-line{
  margin-top:20px;
}

/* Discreet entrance to the FENICE exhibition — a private-view line, not a
   CTA. Belongs only to DOBLEM's exhibition block, set apart from the
   Instagram line with the same restrained kicker/hint treatment used
   elsewhere on this page (small caps, letter-spaced, muted), not the
   underlined inline-link style, so it reads as a quiet aside rather than
   an inline citation or a button. */
.project-exhibition-inner p.private-view-line{
  margin-top:10px;
}
.private-view-link{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gray-1);
  text-decoration:none;
  transition:color .3s var(--ease);
}
.private-view-link:hover{
  color:var(--black);
}

/* Inline text links within project descriptions — refined, not a button.
   Inherits the surrounding paragraph's font/size/color exactly; the only
   visual difference is a restrained underline treatment on hover. */
.inline-link{
  color:var(--black);
  text-decoration:underline;
  text-decoration-color:rgba(10,10,10,.35);
  text-underline-offset:3px;
  transition:text-decoration-color .3s var(--ease);
}
.inline-link:hover{
  text-decoration-color:var(--black);
}

/* Embedded orbit wrapper — same placement mechanism as .archive-viewport
   (centered flex column, chrome absolute-positioned against this box)
   just not viewport-height, since it lives inside a normal page section. */
.orbit-embed{
  position:relative; width:100%;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  padding:2vh 0 9vh;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:900px){
  .archive-stage{height:min(56vh,520px);}
  .archive-stage.archive-stage--embed{height:min(34vh,360px);}
  .home-mark img{height:64px;}
  .division-id{font-size:12px;}
  .project-title{font-size:44px;}
  .project-title img.artist-signature{height:50px;}
}
@media (max-width:680px){
  .film-bar{padding:calc(22px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right)) 22px calc(20px + env(safe-area-inset-left));}
  .home-mark img{height:48px;}
  .division-id{font-size:11px;letter-spacing:.08em;}
  .archive-stage{height:min(46vh,420px);}
  .archive-stage.archive-stage--embed{height:min(30vh,320px);}
  .fc-project{font-size:16px;}
  .focus-caption{margin-top:-48px;}
  .sound-toggle{left:20px;bottom:16px;}
  .corner-id{padding:0 20px 24px;font-size:9px;}
  .expand-close{top:20px;right:20px;}
  .archive-viewport > .sound-toggle{bottom:calc(16px + env(safe-area-inset-bottom));left:calc(20px + env(safe-area-inset-left));}
  .archive-viewport > .expand-close{top:calc(20px + env(safe-area-inset-top));right:calc(20px + env(safe-area-inset-right));}
  .film-copy{padding:6vh 20px 10vh;}
  .copy-kicker{font-size:10px;letter-spacing:.14em;margin-bottom:20px;}
  .film-copy p{font-size:18px;line-height:1.6;margin-bottom:22px;}
  /* Mobile orbit centering */
  .orbit-group{transform:translateX(13vw);}
  /* Mobile scroll indicator — right-side fixed, label hidden, line only */
  .scroll-cue{position:fixed;right:calc(16px + env(safe-area-inset-right));top:auto;bottom:calc(44px + env(safe-area-inset-bottom));width:auto;padding:0;gap:6px;}
  .scroll-cue-label{display:none;}
  .scroll-cue-line{height:34px;}
  .project-exhibition{padding:8vh 20px 2vh;}
  .project-kicker{font-size:10px;letter-spacing:.14em;margin-bottom:16px;}
  .project-title{font-size:34px;margin-bottom:20px;}
  .project-title img.artist-signature{height:38px;}
  .project-exhibition-inner p{font-size:18px;line-height:1.6;}
  .orbit-embed{padding:2vh 0 7vh;}
}
@media (max-height:640px){
  .archive-stage{height:56vh;}
  .focus-caption{margin-top:-54px;}
  .hint{margin-top:10px;}
  .archive-viewport{padding-bottom:4vh;}
}