/* Projects -------------------------------------------------------------- */

.page-head{margin-top:clamp(10px,2.5vh,26px)}
.page-hint{
  margin-top:8px;font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(234,242,255,.35);
  opacity:0;animation:rise 1.1s ease 2.4s forwards;
}

.project-label{
  position:fixed;left:0;top:0;z-index:5;
  font-size:12.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--star);text-decoration:none;white-space:nowrap;text-align:center;
  text-shadow:0 0 20px rgba(4,6,14,1),0 2px 14px rgba(2,4,10,1),0 0 16px rgba(159,210,239,.6);
  opacity:0;transition:opacity .8s,color .35s,text-shadow .35s;
}
.project-label.is-ready{opacity:.94}
.project-label.is-ready.is-active{opacity:1}
.project-label.is-active{color:var(--gold);text-shadow:0 0 18px rgba(245,201,123,.6)}
.project-label.is-side{text-align:left}

.card{
  position:fixed;z-index:10;width:min(350px,86vw);
  padding:22px 24px 20px;border-radius:14px;
  background:var(--panel);border:1px solid rgba(159,210,239,.22);
  backdrop-filter:blur(10px);
  box-shadow:0 10px 50px rgba(2,4,10,.7),0 0 40px rgba(159,210,239,.07);
  opacity:0;transform:translateY(8px) scale(.98);pointer-events:none;
  transition:opacity .3s ease,transform .3s ease;
}
.card.is-open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.card-title{
  font-family:var(--serif);font-style:italic;font-weight:600;
  font-size:22px;line-height:1.2;color:var(--gold);margin-bottom:8px;
}
.card-text{
  font-size:12.5px;font-weight:300;line-height:1.65;color:var(--dim);
  margin-bottom:13px;
}
.card-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.card-tags span{
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cyan);border:1px solid rgba(159,210,239,.32);
  padding:5px 11px;border-radius:999px;
}
.card-link{
  font-size:10.5px;letter-spacing:.26em;color:var(--gold);
  border-color:rgba(245,201,123,.4);padding:10px 20px;
}
.card-link svg{width:14px;height:14px;fill:currentColor}

@media (max-width:720px){
  .project-label{font-size:10px;letter-spacing:.18em}
  .card{
    left:50% !important;top:auto !important;bottom:24px !important;
    transform:translateX(-50%) translateY(8px) scale(.98);
  }
  .card.is-open{transform:translateX(-50%) translateY(0) scale(1)}
}

/* Day mode ------------------------------------------------------------- */
[data-theme="light"] .project-label{
  color:var(--star);
  text-shadow:0 1px 12px rgba(255,255,255,.95),0 0 18px rgba(255,255,255,.85);
}
[data-theme="light"] .project-label.is-active{color:var(--gold)}
[data-theme="light"] .card{
  background:var(--panel-strong);border-color:rgba(42,126,166,.24);
  box-shadow:0 12px 40px rgba(18,53,75,.16);
}
[data-theme="light"] .card-tags span{border-color:rgba(42,126,166,.3)}
[data-theme="light"] .card-text{color:rgba(18,53,75,.78)}
[data-theme="light"] .page-hint{color:rgba(18,53,75,.55)}