/* =========================
   RESET
========================= */
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

img{
  max-width:100%;
}

button,
input,
textarea,
select{
  font:inherit;
}

/* =========================
   GLOBAL VARS
========================= */
:root{
  --poster-width-desktop: 92%;
  --poster-width-mobile: 100%;
  --artist-photo-desktop: 140px;
  --artist-photo-mobile: 110px;

  --page-max-width: 900px;
  --content-max: 760px;

  --page-bg: #0D1B2A;
  --page-text: #DDD9D2;
  --page-soft: #CFC8BD;

  --radius-page: 15px;
  --radius-pill: 999px;

  --shadow-soft: 0 10px 28px rgba(0,0,0,0.14);
  --focus-ring: 0 0 0 2px rgba(231,231,231,0.24);

  --action-bg: rgba(7,10,14,0.94);
  --action-bg-hover: rgba(13,18,24,0.98);
  --action-text: #F2F4F6;
  --action-border: rgba(200,169,107,0.42);

  --ui-link: #C8A96B;
  --ui-link-hover: #E2C58C;
  --ui-separator: rgba(200,169,107,0.42);
  --ui-text-soft: #AFA79A;
}

/* =========================
   BASE
========================= */
html{
  text-size-adjust:100%;
  -webkit-text-size-adjust:100%;
}

body{
  min-height:100vh;
  min-height:100dvh;
  font-family:Arial, sans-serif;
  background:var(--page-bg);
  color:var(--page-text);
  display:flex;
  justify-content:center;
  margin:0;
  overflow-x:hidden;
}

body.is-fullscreen{
  background:#000;
}

.pageShell{
  width:100%;
  display:flex;
  justify-content:center;
}

.page{
  width:100%;
  max-width:var(--page-max-width);
  margin:20px;
  padding:20px;
  background:var(--page-bg);
  border-radius:var(--radius-page);
  overflow:hidden;
  color:var(--page-text);
  box-shadow:var(--shadow-soft);
  position:relative;
}

button{
  background:none;
  border:none;
  color:inherit;
}

button:focus-visible,
a:focus-visible{
  outline:none;
  box-shadow:var(--focus-ring);
  border-radius:8px;
}

/* =========================
   SCREEN SYSTEM
========================= */
.screen{
  display:none;
}

.screen.is-active{
  display:block;
}

.screen-cinematic,
.screen-end{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity 420ms ease;
}

.screen-cinematic.is-active,
.screen-end.is-active{
  display:block;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.screen-cinematic.is-entering,
.screen-end.is-entering{
  opacity:0;
  visibility:visible;
  pointer-events:none;
}

.screen-cinematic.is-leaving,
.screen-end.is-leaving{
  opacity:0;
  visibility:visible;
  pointer-events:none;
}

/* =========================
   TYPOGRAPHY
========================= */
h1{
  font-size:24px;
  line-height:1.2;
  margin-bottom:6px;
  color:#F3F3F3;
}

h2{
  font-size:18px;
  line-height:1.3;
  font-weight:600;
  color:#D5D9DE;
}

p{
  line-height:1.6;
}

/* =========================
   TOP BARS / NAV
========================= */
.topBar{
  display:flex;
  justify-content:center;
  margin-bottom:10px;
}

.topBar-poster{
  width:100%;
}

.modeBar{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}

.modeBar-poster{
  justify-content:space-between;
  align-items:center;
  gap:12px;
  min-height:40px;
}

.artistTopBar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:8px;
}

.navGroup{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}

.topTextLink,
.topTextBtn{
  color:var(--ui-link);
  font-size:16px;
  line-height:1.2;
  text-decoration:none;
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  transition:color 160ms ease, opacity 160ms ease;
}

.topTextLink:hover,
.topTextBtn:hover{
  color:var(--ui-link-hover);
}

.artistLangBar{
  display:flex;
  justify-content:flex-end;
  gap:18px;
  margin-bottom:0;
}

.artistLangBar .langBtn{
  cursor:pointer;
  user-select:none;
  font-size:16px;
  line-height:1.2;
  padding:0;
  background:transparent;
  border:none;
  color:var(--ui-text-soft);
}

.artistLangBar .langBtn.is-soft-active{
  color:var(--ui-link);
  font-weight:600;
}

/* =========================
   POSTER PAGE
========================= */
.posterStage{
  position:relative;
  width:100%;
  max-width:var(--content-max);
  margin:0 auto;
}

.posterFrame{
  width:100%;
  height:clamp(500px, 72vh, 780px);
  margin:0;
  padding:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  position:relative;
  background:var(--page-bg);
  border-radius:10px;
}

.posterMediaSlot{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px;
}

.posterImage{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
  cursor:pointer;
}

.posterMeta{
  width:100%;
  max-width:620px;
  margin:22px auto 0;
  text-align:center;
  padding:0 10px;
}

.posterMeta h1{
  margin-bottom:0;
}

.posterMeta h2{
  margin-bottom:0;
  font-size:17px;
  line-height:1.42;
  font-weight:600;
  color:#DDD9D2;
  max-width:100%;
  white-space:nowrap;
  margin-left:auto;
  margin-right:auto;
}

.posterVoiceNote{
  display:none !important;
}

.posterMotto{
  margin-top:18px;
  color:var(--page-soft);
  font-size:15px;
  line-height:1.55;
  letter-spacing:0.01em;
}

.posterInstructions--afterButton{
  margin:12px auto 0;
  max-width:420px;
  text-align:center;
  font-size:13px;
  opacity:0.9;
}

.posterMotto:empty,
.posterInstructions:empty{
  display:none;
}

.screen-expo .artistActions{
  margin:28px auto 8px;
}

/* =========================
   ARTIST PAGE
========================= */
.screen-artist{
  min-height:min(78vh, 860px);
}

.artistPanel{
  width:100%;
  max-width:760px;
  margin:0 auto;
  padding:8px 0 10px;
  display:flex;
  flex-direction:column;
}

.artistIntroText{
  order:2;
  text-align:center;
  margin:0 auto 16px;
}

.artistIntroText--artistPage{
  order:1;
  margin:10px auto 18px;
}

.artistIntroText h1{
  margin-bottom:4px;
}

.artistIntroText h2{
  margin-bottom:0;
}

.artistActions{
  order:3;
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin:8px auto 24px;
}

.artistActions--stack{
  flex-direction:column;
  align-items:center;
  gap:12px;
}

.primaryActionBtn{
  min-width:178px;
  padding:12px 26px;
  border:2px solid var(--action-border);
  border-radius:var(--radius-pill);
  background:var(--action-bg);
  color:var(--action-text);
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  transition:
    transform 160ms ease,
    opacity 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
  -webkit-tap-highlight-color:transparent;
  box-shadow:0 6px 18px rgba(0,0,0,0.18);
}

.primaryActionBtn:hover{
  background:var(--action-bg-hover);
  border-color:rgba(176,176,176,0.62);
}

.primaryActionBtn:active{
  transform:translateY(1px);
}

.artistText{
  order:4;
  max-width:620px;
  margin:0 auto;
  text-align:left;
}

.artistBioRow{
  display:flex;
  align-items:flex-start;
  gap:18px;
}

.artistBioPhotoWrap{
  flex:0 0 var(--artist-photo-desktop);
  width:var(--artist-photo-desktop);
  max-width:var(--artist-photo-desktop);
}

.artistBioPhotoWrap img{
  width:100%;
  max-width:100%;
  height:auto;
  display:block;
  border-radius:10px;
  object-fit:cover;
}

.artistBioCopy{
  flex:1 1 auto;
  min-width:0;
}

.artistBioCopy p{
  margin:0;
  color:#E1E4E8;
  font-size:14px;
  line-height:1.7;
}

.artistContactWrap{
  margin-top:22px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  font-size:16px;
  opacity:0.85;
}

.contactLink{
  color:var(--ui-link);
  text-decoration:none;
  position:relative;
  padding:2px 0;
  transition:opacity 140ms ease, color 140ms ease;
}

.contactLink:hover{
  opacity:1;
  color:var(--ui-link-hover);
  text-decoration:underline;
}

.contactLink:not(:last-child)::after{
  content:"|";
  margin-left:10px;
  color:var(--ui-separator);
}

/* =========================
   CINEMATIC BASE
========================= */
.screen-cinematic,
.screen-end{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  height:100dvh;
  background:#000;
  z-index:9999;
}

.cinematicFrame{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  height:100dvh;
  overflow:hidden;
  isolation:isolate;
  background:#000;
  cursor:pointer;
}

.cinematicMediaSlot{
  position:absolute;
  inset:0;
}

/* =========================
   LAYERS (CROSSFADE)
========================= */
.mediaLayer{
  position:absolute;
  inset:0;
  opacity:1;
  transition:opacity var(--fade-out, 1400ms) ease-in-out;
  will-change:opacity;
}

.mediaLayer.entering{
  opacity:0;
}

.mediaLayer.exiting{
  opacity:0;
}

/* =========================
   BACKGROUND
========================= */
.mediaBg{
  position:absolute;
  inset:-7%;
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  filter:blur(24px) saturate(0.95) brightness(0.58);
  transform:scale(1.1) translateZ(0);
  backface-visibility:hidden;
}

.mediaBg-custom{
  filter:blur(6px) saturate(0.98) brightness(0.70);
  transform:scale(1.02) translateZ(0);
}

/* =========================
   IMAGE STAGE
========================= */
.mediaStage{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.2vh;
}

.mediaInner{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  transform-origin:center center;
  will-change:transform;
}

.mediaInner img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
}

/* =========================
   EFFECTS
========================= */
.fx-fade-zoom-in{
  animation:fadeZoomIn var(--duration, 7600ms) cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes fadeZoomIn{
  0%{ transform:scale(1); }
  100%{ transform:scale(var(--zoom-scale, 1.04)); }
}

.fx-zoom-in{
  animation:zoomInSoft var(--duration, 7600ms) linear forwards;
}

@keyframes zoomInSoft{
  0%{ transform:scale(1); }
  100%{ transform:scale(var(--zoom-scale, 1.05)); }
}

.fx-fade-zoom-out{
  animation:fadeZoomOut var(--duration, 7600ms) cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes fadeZoomOut{
  0%{ transform:scale(var(--zoom-scale, 1.06)); }
  100%{ transform:scale(1); }
}

/* =========================
   CINEMATIC INFO OVERLAY
========================= */
.cinematicInfoOverlay{
  position:absolute;
  inset:0;
  z-index:30;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:32px;
  background:rgba(0,0,0,0.18);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  opacity:0;
  pointer-events:none;
  transition:opacity 280ms ease;
}

.cinematicInfoOverlay.is-visible{
  opacity:1;
  pointer-events:auto;
}

.cinematicInfoCard{
  width:100%;
  max-width:720px;
  background:linear-gradient(
    to top,
    rgba(8,10,14,0.78),
    rgba(8,10,14,0.52)
  );
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;
  padding:20px 22px 18px;
  box-shadow:0 18px 42px rgba(0,0,0,0.24);
}

.cinematicInfoTitle{
  margin:0 0 8px;
  font-family:Georgia, "Times New Roman", serif;
  font-size:40px;
  line-height:1.1;
  letter-spacing:0.01em;
  color:#F3EFEA;
}

.cinematicInfoMeta{
  margin:0;
  font-family:Arial, sans-serif;
  font-size:18px;
  line-height:1.5;
  color:rgba(243,239,234,0.92);
}

.cinematicInfoSale{
  margin-top:8px;
  font-family:Arial, sans-serif;
  font-size:16px;
  line-height:1.4;
  color:#D9C08A;
}

/* =========================
   END SCREEN
========================= */
.endBg{
  position:absolute;
  inset:-6%;
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  filter:blur(26px) saturate(0.92) brightness(0.42);
  transform:scale(1.08) translateZ(0);
  backface-visibility:hidden;
}

.endOverlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.22);
}

.endWrap{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  padding:24px;
  z-index:2;
}

.endActions{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  width:min(100%, 320px);
  margin:0 auto;
}

.endActions .primaryActionBtn{
  width:100%;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 820px){
  .page{
    margin:12px;
    padding:14px;
  }

  .artistBioRow{
    flex-direction:column;
    align-items:center;
    text-align:left;
  }

  .artistBioPhotoWrap{
    flex:0 0 auto;
    width:var(--artist-photo-mobile);
    max-width:var(--artist-photo-mobile);
  }

  .artistText{
    max-width:100%;
  }
}

@media (max-width: 640px){
  .page{
    margin:0;
    min-height:100dvh;
    border-radius:0;
    padding:12px 12px 18px;
  }

  .topBar{
    margin-bottom:8px;
  }

  .modeBar-poster,
  .artistTopBar{
    gap:10px;
    min-height:36px;
  }

  .navGroup,
  .artistLangBar{
    gap:12px;
  }

  .topTextBtn,
  .topTextLink,
  .artistLangBar .langBtn{
    font-size:15px;
  }

  .posterFrame{
    height:clamp(360px, 58vh, 620px);
    border-radius:9px;
  }

  .posterMediaSlot{
    padding:6px;
  }

  .posterMeta{
    margin:18px auto 0;
    padding:0 6px;
  }

  .posterMeta h1{
    font-size:22px;
    line-height:1.18;
    margin-bottom:0;
  }

  .posterMeta h2{
    font-size:16px;
    line-height:1.14;
    margin-bottom:0;
  }

  .posterMotto{
    margin-top:16px;
    font-size:14px;
    line-height:1.5;
  }

  .posterInstructions{
    margin-top:8px;
    font-size:13px;
    line-height:1.55;
    opacity:0.92;
  }

  .screen-expo .artistActions{
    margin:24px auto 4px;
  }

  .primaryActionBtn{
    min-width:176px;
    padding:12px 24px;
    font-size:15px;
  }

  .artistPanel{
    padding-top:4px;
  }

  .artistIntroText--artistPage{
    margin:8px auto 16px;
  }

  .artistIntroText--artistPage h1{
    font-size:22px;
  }

  .artistBioRow{
    gap:14px;
  }

  .artistBioCopy p{
    font-size:14px;
    line-height:1.7;
  }

  .artistContactWrap{
    margin-top:18px;
    gap:8px;
    font-size:15px;
  }

  .cinematicInfoOverlay{
    padding:16px;
  }

  .cinematicInfoCard{
    padding:16px 16px 14px;
    border-radius:14px;
  }

  .cinematicInfoTitle{
    font-size:28px;
  }

  .cinematicInfoMeta{
    font-size:16px;
  }

  .cinematicInfoSale{
    font-size:14px;
  }

  .endWrap{
    padding:18px;
  }

  .endActions{
    width:min(100%, 300px);
    gap:14px;
  }
}

@media (max-width: 420px){
  .page{
    padding:10px 10px 16px;
  }

  .modeBar-poster,
  .artistTopBar{
    align-items:flex-start;
  }

  .navGroup,
  .artistLangBar{
    gap:10px;
  }

  .topTextBtn,
  .topTextLink,
  .artistLangBar .langBtn{
    font-size:14px;
  }

  .posterFrame{
    height:clamp(320px, 54vh, 540px);
  }

  .posterMeta h1{
    font-size:20px;
    margin-bottom:0;
  }

  .posterMeta h2{
    font-size:15px;
    line-height:1.4;
    max-width:26ch;
  }

  .posterMotto{
    margin-top:14px;
    font-size:13px;
  }

  .posterInstructions{
    font-size:12.5px;
  }

  .primaryActionBtn{
    min-width:168px;
    padding:11px 22px;
    font-size:14px;
  }

  .artistBioCopy p,
  .artistContactWrap{
    font-size:13px;
  }

  .artistBioPhotoWrap{
    width:var(--artist-photo-mobile);
    max-width:var(--artist-photo-mobile);
  }

  .contactLink:not(:last-child)::after{
    margin-left:8px;
  }
}