/* ==========================================================================
   FENICE — DOBLEM — ISHLVLSTUDIOS Art Division
   Same design system as Art Division/Film/Generative Lab, reused verbatim
   (white void, black ink, the orbit as the one gallery mechanism) — the
   only genuinely new things here are the FENICE identity block and the
   fact this page is a single full-viewport room with no scroll, because
   the brief for this piece is "the gallery itself should be visible or
   perceptible immediately," not a landing page you scroll past.
   ========================================================================== */

: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;overflow:hidden;}
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;}

.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ==========================================================================
   TOP BAR — identical component to Film/Art Division. Left = DOBLEM's
   signature as the exit route (the only way out is the way in). Right =
   FENICE's own restrained identity block, not a hero.
   ========================================================================== */
.film-bar{
  position:absolute; top:0;left:0;right:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:30px 36px; pointer-events:none;
}
.film-bar > *{pointer-events:auto;}
.home-mark img{height:46px;width:auto;display:block;opacity:.92;transition:opacity .4s var(--ease);}
.home-mark:hover img{opacity:1;}
.home-mark:focus-visible{outline:2px solid var(--black);outline-offset:4px;}

.fenice-id{
  display:flex; flex-direction:column; align-items:flex-end; gap:4px; text-align:right;
}
/* PLACEHOLDER_FENICE_TYPE — the actual FENICE typographic asset has not
   been supplied yet. This is a neutral heavy system sans standing in for
   it, kept deliberately small and corner-placed (not a hero) so the
   placeholder matters as little as possible until the real file arrives —
   swap the font-family below the moment it's available. */
.fenice-mark{
  font-family:-apple-system,'Helvetica Neue',Arial,sans-serif;
  font-weight:800; font-size:20px; letter-spacing:.04em; color:var(--black);
}
.fenice-sub{
  font-size:10px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--gray-1);
}

/* Page footer — fixed, since this page never scrolls. */
.corner-id{
  position:fixed; right:36px; bottom:22px; z-index:40;
  font-size:10px;letter-spacing:.12em;text-transform:uppercase; color:var(--gray-2);
  display:flex; gap:8px;
}

/* ==========================================================================
   EXHIBITION VIEWPORT — the whole page. Same mechanism as Art Division's
   hero orbit, taller (this room has nothing else competing for height).
   ========================================================================== */
.archive-viewport{
  position:relative; width:100%; height:100vh; height:100svh;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  overflow:hidden;
}
.orbit-group{
  width:100%;
  display:flex; flex-direction:column; align-items:center;
}
.archive-stage{
  position:relative; width:100%; height:min(80vh,820px);
  perspective:2200px; perspective-origin:50% 50%;
  cursor:grab; touch-action:none; -webkit-user-select:none; user-select:none;
}
.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 — extended with index (01/09) and artist (DOBLEM) either
   side of the existing title/year, restrained wall-label reading, not a
   card or a box.
   ========================================================================== */
.focus-caption{
  margin-top:-28px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  min-height:66px; pointer-events:none;
}
.fc-index{
  font-size:10px; font-weight:600; letter-spacing:.16em; color:var(--gray-2);
  opacity:0; transform:translateY(6px);
  transition:opacity .5s var(--ease-soft),transform .5s var(--ease-soft);
}
.fc-project{
  font-family:'Newsreader',Georgia,serif;font-style:italic;font-size:20px;
  opacity:0;transform:translateY(6px);
  transition:opacity .5s var(--ease-soft) .03s,transform .5s var(--ease-soft) .03s;
}
.fc-meta{
  display:flex; align-items:center; gap:8px;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gray-1);
  opacity:0;transform:translateY(6px);
  transition:opacity .5s var(--ease-soft) .06s,transform .5s var(--ease-soft) .06s;
}
.fc-artist::after{content:'·';margin-left:8px;color:var(--gray-2);}
.focus-caption.is-in .fc-index,
.focus-caption.is-in .fc-project,
.focus-caption.is-in .fc-meta{opacity:1;transform:translateY(0);}

.hint{
  margin:20px 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);}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:900px){
  .home-mark img{height:36px;}
  .fenice-mark{font-size:17px;}
  .archive-stage{height:min(72vh,680px);}
}
@media (max-width:680px){
  .film-bar{padding:20px 20px;}
  .corner-id{right:20px;bottom:16px;font-size:9px;}
  .archive-stage{height:min(66vh,560px);}
  .fc-project{font-size:17px;}
  /* Mobile centering fix: .archive-card is already centered at left:50% via
     JS marginLeft (-cw/2). The global transform:translate(-50%,-50%) on
     .archive-card-inner shifts the visual media left by cw/2 — roughly
     12–14vw on phones. Removing it here places the media at stage_w/2 =
     window.innerWidth/2 across all mobile viewport widths, without
     altering individual artwork coordinates or the orbit interaction. */
  .archive-card-inner{transform:none;}
}