.project-back{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  margin-bottom:1.85rem;
  color:var(--color-text-dim);
  font-weight:600;
  transition:color var(--transition);
}
.project-back:hover{
  color:var(--color-text);
}

.project-layout{
  max-width:56rem;
  margin:0 auto;
}

.project-media{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--color-border);
  background:linear-gradient(160deg,rgba(36,37,48,.92) 0%,rgba(14,15,21,.96) 70%,rgba(8,9,13,1) 100%);
  box-shadow:var(--shadow-raised);
  width:100%;
  margin-bottom:3rem;
}
.project-content{
  display:flex;
  flex-direction:column;
  gap:2.5rem;
}
.project-media__frame{
  position:relative;
  padding-top:56.25%;
  background:#0d0f16;
  border-radius:inherit;
  overflow:hidden;
}
.project-media__frame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
.project-media__frame--image img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.92;
  transition:transform var(--transition),opacity var(--transition);
}
.project-media--image:hover .project-media__frame--image img{
  transform:scale(1.02);
  opacity:1;
}

.project-header{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1.25rem}

.project-eyebrow{
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--color-text-dim);
  margin:0;
}

.project-title{font-size:clamp(2.25rem,2.2vw + 1.7rem,3.2rem);font-weight:900;line-height:1.08;letter-spacing:-.015em;margin:0}
.project-title__year{font-size:.55em;font-weight:600;color:var(--color-text-dim);letter-spacing:-.01em}
.project-subtitle{font-size:1.15rem;color:rgba(226,227,234,.78);line-height:1.55;max-width:52ch;margin:0}

.project-tags{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  list-style:none;
  margin:.85rem 0 0 0;
  padding:0;
}

.project-tag{
  display:inline-flex;
  padding:.35rem .75rem;
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  font-size:.82rem;
  font-weight:600;
  color:var(--color-text-dim);
  transition:background var(--transition),border var(--transition),color var(--transition);
  text-decoration:none;
}
.project-tag:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.1);
  color:var(--color-text);
}

.project-sidebar{display:flex;flex-direction:column;gap:1.75rem}
.project-sidebar-card{
  display:flex;
  flex-direction:column;
  gap:1.2rem;
  padding:1.9rem 2rem;
  border-radius:var(--radius-lg);
  background:linear-gradient(165deg,rgba(32,33,42,.95) 0%,rgba(17,18,26,.97) 65%,rgba(9,10,16,1) 100%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow-raised);
}
.project-sidebar-card__eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--color-text-dim)}
.project-sidebar-card__title{font-size:1.35rem;font-weight:800;line-height:1.25}
.project-sidebar-card__meta{
  display:flex;
  justify-content:space-between;
  gap:.75rem;
  padding:.45rem .85rem;
  border-radius:var(--radius-md);
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.05);
  color:var(--color-text-dim);
  font-weight:600;
  font-size:.9rem;
}
.project-sidebar-card__meta span{color:var(--color-text);font-weight:700}
.project-sidebar-card__body{color:rgba(226,227,234,.86);font-size:.96rem;line-height:1.6}
.project-sidebar-card__body--summary{color:rgba(226,227,234,.88)}
.project-sidebar-card__cta{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.72rem 1.35rem;
  border-radius:var(--radius-lg);
  background:var(--color-text);
  color:var(--color-bg);
  font-weight:700;
  transition:transform var(--transition),box-shadow var(--transition);
}
.project-sidebar-card__cta:hover{background:var(--color-text-dim)}

.project-info{
  display:flex;
  flex-direction:column;
  gap:1.2rem;
  margin:0;
}
.project-info__item{display:grid;gap:.4rem}
.project-info__item dt{font-size:.78rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--color-text-dim)}
.project-info__item dd{
  margin:0;
  font-size:1rem;
  font-weight:600;
  color:var(--color-text);
  display:flex;
  flex-direction:column;
  gap:.35rem;
}
.project-info__item dd a{color:inherit;text-decoration:none}
.project-info__item dd a:hover{text-decoration:underline}
.project-info__note{color:var(--color-text-dim);font-size:.85rem;font-weight:600}
.project-info__tags{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  list-style:none;
  margin:0;
  padding:0;
}
.project-info__tags li{
  padding:.4rem .85rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.06);
  font-size:.82rem;
  font-weight:600;
  color:var(--color-text-dim);
  transition:background .2s ease,border-color .2s ease,transform .15s ease;
}

.project-info__tags li a{
  color:inherit;
  text-decoration:none;
  display:block;
}

.project-info__tags li:hover{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.18);
  transform:translateY(-1px);
}

.project-body{margin-bottom:0;color:rgba(228,229,236,.88);font-size:1rem;line-height:1.75}
.project-body p + p{margin-top:1.2rem}

.project-gallery{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2rem;
  margin-top:2.5rem;
}
.project-gallery__item{
  width:100%;
  max-width:56rem;
  background:var(--color-elev);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
  container-type:inline-size;
}
.project-gallery__item:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.32);
  border-color:rgba(255,255,255,.12);
}
.project-gallery__item a{display:block;cursor:pointer}
.project-gallery__item img{display:block;width:100%;max-height:40rem;height:auto;object-fit:contain;transition:transform .35s ease,opacity .35s ease;opacity:.92}
.project-gallery__item:hover img{transform:scale(1.03);opacity:1}
.project-gallery__item--gif{cursor:default}
.project-gallery__item--gif:hover{transform:none;box-shadow:var(--shadow-soft);border-color:var(--color-border)}
.project-gallery__item--gif:hover img{transform:none;opacity:.92}
.project-gallery__item figcaption{padding:.95rem 1.1rem;font-size:.88rem;color:var(--color-text-dim);background:var(--color-elev)}

.project-related{margin-top:3.2rem}
.project-related__header h2{font-size:1.6rem;font-weight:800;letter-spacing:-.01em}
.project-related__subtitle{margin-top:.35rem;color:var(--color-text-dim)}
.project-related__grid{display:grid;gap:1.5rem;margin-top:1.6rem;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr))}
.project-related-card{
  border-radius:var(--radius-md);
  border:1px solid var(--color-border);
  background:var(--color-elev);
  overflow:hidden;
  transition:background var(--transition),border var(--transition);
}
.project-related-card:hover{background:var(--color-elev-2);border-color:rgba(255,255,255,.16)}
.project-related-card__link{display:flex;flex-direction:column;height:100%;color:inherit}
.project-related-card__media{position:relative;aspect-ratio:16/10;background:#14151d;overflow:hidden}
.project-related-card__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition),opacity var(--transition);opacity:.9}
.project-related-card:hover .project-related-card__media img{transform:scale(1.05);opacity:1}
.project-related-card__placeholder{display:grid;place-items:center;height:100%;color:var(--color-text);font-size:2.75rem;font-weight:800;background:linear-gradient(140deg,rgba(38,39,50,.92) 0%,rgba(20,21,30,.94) 100%)}
.project-related-card__body{display:flex;flex-direction:column;gap:.45rem;padding:1.1rem 1.2rem 1.35rem;flex:1}
.project-related-card__year{font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--color-text-dim)}
.project-related-card__title{font-size:1.12rem;font-weight:800;line-height:1.35}
.project-related-card__meta{font-size:.95rem;color:var(--color-text-dim)}

/* Below SM (640px) */
@media(max-width:39.99rem){
  .project-layout{gap:2rem}
  .project-sidebar-card{padding:1.65rem 1.75rem}
  .project-media{border-radius:var(--radius-lg)}
}

html[data-theme="light"] .project-back{
  color:var(--color-accent-muted);
}
html[data-theme="light"] .project-back:hover{
  color:var(--color-accent);
}
html[data-theme="light"] .project-media{background:linear-gradient(160deg,rgba(240,241,247,.95) 0%,rgba(221,222,231,.92) 70%,rgba(206,207,218,.9) 100%);border-color:var(--color-border)}
html[data-theme="light"] .project-related-card{background:var(--color-elev);border-color:var(--color-border)}
html[data-theme="light"] .project-related-card:hover{border-color:rgba(0,0,0,.16)}
html[data-theme="light"] .project-related-card__placeholder{background:linear-gradient(140deg,rgba(224,225,235,.95) 0%,rgba(206,207,218,.95) 100%);color:var(--color-accent)}
html[data-theme="light"] .project-eyebrow{color:var(--color-accent-muted)}
html[data-theme="light"] .project-subtitle{color:rgba(47,50,68,.82)}
html[data-theme="light"] .project-title__year{color:var(--color-accent-muted)}
html[data-theme="light"] .project-tag{
  background:rgba(0,0,0,.04);
  border-color:rgba(0,0,0,.06);
  color:var(--color-accent-muted);
}
html[data-theme="light"] .project-tag:hover{
  background:rgba(0,0,0,.08);
  border-color:rgba(0,0,0,.1);
  color:var(--color-accent);
}
html[data-theme="light"] .project-body{color:rgba(40,42,58,.84)}
html[data-theme="light"] .project-info__note{color:rgba(70,72,96,.7)}
html[data-theme="light"] .project-sidebar-card{
  background:linear-gradient(165deg,rgba(248,248,252,.98) 0%,rgba(232,233,240,.96) 70%,rgba(224,225,234,.95) 100%);
  border-color:rgba(0,0,0,.05);
  box-shadow:var(--shadow-soft);
}
html[data-theme="light"] .project-info__tags li{
  background:rgba(0,0,0,.06);
  border-color:rgba(0,0,0,.1);
  color:var(--color-accent-muted);
}
html[data-theme="light"] .project-info__tags li:hover{
  background:rgba(0,0,0,.12);
  border-color:rgba(0,0,0,.16);
}
html[data-theme="light"] .project-sidebar-card__meta{
  border-color:rgba(0,0,0,.08);
  background:rgba(0,0,0,.05);
  color:rgba(70,72,96,.72);
}
html[data-theme="light"] .project-sidebar-card__meta span{color:var(--color-accent)}
html[data-theme="light"] .project-sidebar-card__body,
html[data-theme="light"] .project-sidebar-card__body--summary{color:rgba(58,60,84,.78)}