@font-face{
  font-family:"Rubik";
  src:url("fonts/Rubik-ExtraBold.ttf") format("truetype");
  font-weight:800;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Tecnica";
  src:url("fonts/Tecnica-55.woff2") format("woff2"),
      url("fonts/Tecnica-55.woff") format("woff");
  font-weight:normal;
  font-style:normal;
  font-display:swap;
}

:root{
  --black:#000000;
  --red:#ff0000;
  --gray:#979797;
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
  --box-font-size: clamp(13px, 4.3vw, 21px);
  --track-width: clamp(16px, 5.6vw, 24px);
  --hairline: 1.5px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}

html,body{
  margin:0;padding:0;width:100%;height:100%;
  background:var(--black);
  color:#111;
  font-family:"Rubik", -apple-system, sans-serif;
  overflow:hidden;
  -webkit-user-select:none;user-select:none;
  overscroll-behavior:none;
}

.stage{
  position:fixed;
  inset:0;
  background:var(--black);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.frame{
  position:relative;
  width:min(100% - 28px, 440px);
  height:min(100dvh - 56px, 880px);
  margin:auto;
}

.screen{
  position:absolute;
  inset:0;
  overflow:hidden;
}

/* ---------- SCREEN 1: landing ---------- */
.screen-landing{
  z-index:1;
  transition:opacity .45s var(--ease-soft), transform .45s var(--ease-soft), filter .45s var(--ease-soft);
}
.frame.is-article .screen-landing{
  opacity:0;
  transform:scale(.94);
  filter:blur(6px);
  pointer-events:none;
}
.frame.is-red .screen-landing{
  pointer-events:none;
}

.dot-btn{
  all:unset;
  position:absolute;
  top:clamp(14px, 4vw, 26px);
  right:clamp(14px, 4vw, 26px);
  width:clamp(34px, 8vw, 46px);
  height:clamp(34px, 8vw, 46px);
  border-radius:50%;
  background:var(--red);
  cursor:pointer;
  transition:transform .18s var(--ease-soft);
  z-index:5;
}
.dot-btn:active{transform:scale(.9);}

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

.index-box{
  display:inline-flex;
  align-items:stretch;
  cursor:pointer;
  width:fit-content;
  max-width:94vw;
  transition:transform .18s var(--ease-soft), opacity .18s ease;
}
.index-box:active{transform:scale(.97);}

.index-num{
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6px 9px;
  background:var(--red);
  color:#000;
  font-weight:800;
  font-size:var(--box-font-size);
  line-height:1.15;
  letter-spacing:-0.01em;
  white-space:nowrap;
}

.index-divider{
  flex:none;
  width:var(--hairline);
  background:#000;
}

.index-title{
  flex:none;
  display:flex;
  align-items:center;
  background:var(--gray);
  color:#000;
  font-weight:800;
  font-size:var(--box-font-size);
  line-height:1.15;
  letter-spacing:-0.01em;
  padding:6px 12px;
  white-space:nowrap;
}

/* ---------- SCREEN 2: red reveal ---------- */
.screen-red{
  z-index:10;
  background:var(--red);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px;
  cursor:pointer;
  clip-path:circle(0% at var(--originX,88%) var(--originY,5%));
  transition:clip-path .55s var(--ease-out);
  pointer-events:none;
  will-change:clip-path;
  contain:layout paint;
  transform:translateZ(0);
}
.frame.is-red .screen-red{
  clip-path:circle(142% at var(--originX,88%) var(--originY,5%));
  pointer-events:auto;
}

.red-text{
  display:inline-block;
  font-family:"Tecnica", "Rubik", -apple-system, sans-serif;
  font-weight:normal;
  font-size:calc(var(--box-font-size) * 1.2);
  line-height:1.2;
  color:#000;
  letter-spacing:-0.01em;
  text-decoration:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}


/* ---------- SCREEN 3: article ---------- */
.screen-article{
  z-index:6;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  opacity:0;
}
.frame.is-article .screen-article{
  pointer-events:auto;
  opacity:1;
}

.article-card{
  position:relative;
  width:100%;
  height:100%;
  background:var(--gray);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  transform-origin:var(--originX,50%) var(--originY,50%);
  transform:scale(.4);
  opacity:0;
  transition:transform .5s var(--ease-out), opacity .4s var(--ease-soft);
}
.frame.is-article .article-card{
  transform:scale(1);
  opacity:1;
}

.scroll-track{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:var(--track-width);
  border-left:var(--hairline) solid #000;
  z-index:3;
}
.scroll-thumb{
  position:absolute;
  left:0;
  right:0;
  top:0;
  width:var(--track-width);
  background:var(--red);
  border-radius:0;
  transition:opacity .25s ease;
}

.article-head{
  flex:none;
  cursor:pointer;
  padding:clamp(18px, 5vw, 26px) clamp(20px, 6vw, 28px) clamp(10px, 2.6vw, 14px) clamp(20px, 6vw, 28px);
  border-bottom:var(--hairline) solid #000;
}

.article-title{
  margin:0 0 6px;
  font-weight:800;
  font-size:clamp(21px, 5.6vw, 27px);
  line-height:1.14;
  color:#000;
  letter-spacing:-0.01em;
}

.article-byline{
  margin:0;
  font-weight:800;
  font-size:clamp(12px, 3.1vw, 13.5px);
  color:rgba(0,0,0,0.55);
  letter-spacing:.01em;
}

.article-body{
  position:relative;
  flex:1 1 auto;
  min-height:0;
}

.article-body-inner{
  position:absolute;
  inset:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:clamp(18px, 5vw, 24px) clamp(28px, 8.5vw, 36px) clamp(12px, 3vw, 16px) clamp(20px, 6vw, 28px);
  scrollbar-width:none;
}
.article-body-inner::-webkit-scrollbar{display:none;}

.article-body-inner p{
  margin:0 0 1.1em;
  font-weight:800;
  font-size:clamp(14.5px, 3.75vw, 16px);
  line-height:1.56;
  color:#171717;
}

.article-body-inner .article-hint{
  margin:0 0 2.6em;
  font-weight:800;
  font-size:clamp(12px, 3.1vw, 13.5px);
  line-height:1.5;
  letter-spacing:.01em;
  color:rgba(0,0,0,0.55);
}

.article-body-inner h2{
  margin:1.5em 0 .6em;
  font-weight:800;
  font-size:clamp(17px, 4.4vw, 19.5px);
  line-height:1.3;
  color:#000;
  letter-spacing:-0.005em;
}
.article-body-inner h2:first-child{margin-top:0;}

.article-body-inner .article-credit{
  margin:5.5em 0 0;
  text-align:right;
  font-weight:800;
  font-size:clamp(12px, 3.1vw, 13.5px);
  letter-spacing:.01em;
  color:rgba(0,0,0,0.55);
}


.blur-mask{
  position:absolute;
  left:0;
  right:0;
  height:clamp(60px, 15vw, 90px);
  pointer-events:none;
  -webkit-backdrop-filter:blur(5px);
  backdrop-filter:blur(5px);
  transition:opacity .35s ease;
  opacity:0;
}
.blur-mask-bottom{
  bottom:0;
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,1) 100%);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,1) 100%);
}
.blur-mask-top{
  top:0;
  -webkit-mask-image:linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,1) 100%);
  mask-image:linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,1) 100%);
}

.entity-tag{
  cursor:pointer;
  transition:opacity .15s ease;
}
.entity-tag::after{
  content:"";
  display:inline-block;
  width:.66em;
  height:.66em;
  margin-left:.22em;
  margin-bottom:.04em;
  vertical-align:middle;
  background:var(--red);
}
.entity-tag:active{opacity:.55;}

/* ---------- Entity popup (artist photo / album cover) ---------- */
.entity-overlay{
  position:absolute;
  inset:0;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(24px, 8vw, 48px);
  background:rgba(0,0,0,0.001);
  -webkit-backdrop-filter:blur(0px);
  backdrop-filter:blur(0px);
  opacity:0;
  pointer-events:none;
  transition:opacity .4s var(--ease-soft), backdrop-filter .4s var(--ease-soft), -webkit-backdrop-filter .4s var(--ease-soft);
}
.entity-overlay.is-open{
  background:rgba(0,0,0,0.45);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  opacity:1;
  pointer-events:auto;
}

.entity-card{
  margin:0;
  max-width:100%;
  max-height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  transform:scale(.88);
  opacity:0;
  transition:transform .4s var(--ease-out), opacity .3s var(--ease-soft);
}
.entity-overlay.is-open .entity-card{
  transform:scale(1);
  opacity:1;
}

.entity-image{
  display:block;
  max-width:100%;
  max-height:min(70dvh, 520px);
  width:auto;
  height:auto;
  object-fit:contain;
  background:#1a1a1a;
  box-shadow:0 20px 50px rgba(0,0,0,0.5);
}

.entity-caption{
  font-family:"Rubik", -apple-system, sans-serif;
  font-weight:800;
  font-size:clamp(14px, 3.8vw, 17px);
  color:#fff;
  text-align:center;
  letter-spacing:-0.01em;
}

@media (min-width: 440px){
  .stage{padding:24px;}
}