/*******************************
Smart publication card + JP subtle
*******************************/

/* Title */
.pub-title-en{
margin: 1.2rem 0 0.9rem 0;
font-size: clamp(1.35rem, 2.0vw, 2.0rem);
line-height: 1.15;
letter-spacing: -0.01em;
}

/* Card */
.pub-card{
display: grid;
grid-template-columns: 360px 1fr;
gap: 18px;
padding: 18px;
border-radius: 16px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

.pub-media{
display:flex;
align-items:center;
justify-content:center;
}

.pub-video{
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 14px;
object-fit: contain;
background: rgba(0,0,0,0.25);
box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

/* Meta rows */
.pub-meta{
display: grid;
gap: 6px;
margin-bottom: 10px;
}

.pub-meta-row{
display: grid;
grid-template-columns: 72px 1fr;
gap: 10px;
align-items: baseline;
}

.pub-meta-label{
font-size: 0.9rem;
opacity: 0.58;
letter-spacing: 0.02em;
}

.pub-meta-value{
font-size: 0.98rem;
opacity: 0.95;
}

/* Japanese: lighter + comfortable line-height */
.pub-abstract-jp{
margin: 10px 0 14px 0;
font-size: 0.98rem;
line-height: 1.9;
opacity: 0.58;
}

/* Buttons */
.pub-actions{
display:flex;
flex-wrap:wrap;
gap: 10px;
margin-top: 8px;
}

.pub-btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding: 9px 12px;
border-radius: 12px;
border: 1px solid rgba(120,170,255,0.50);
background: rgba(60,120,255,0.08);
text-decoration:none;
font-size: 0.95rem;
}

.pub-btn:hover{
background: rgba(60,120,255,0.16);
border-color: rgba(120,170,255,0.78);
}

/* Responsive */
@media (max-width: 900px){
.pub-card{ grid-template-columns: 1fr; }
}

/*******************************
Full-width hero video (HMNet)
*******************************/

.pub-hero{
width: 100%;
margin: 0rem 0 0rem 0;
border-radius: 0px;
overflow: hidden;
background: rgba(0,0,0,0.18);
box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

.pub-hero-video{
width: 100%;
height: auto;
display: block;
aspect-ratio: 16 / 9;
object-fit: cover;
}

/* Body block */
.pub-section{
padding: 0.2rem 0 0 0;
}

/*******************************
Projects list: cooler, stronger text
*******************************/

.projects-page .project-card--stack{
display: flex;
flex-direction: column;
gap: 12px;
padding: 18px;
border-radius: 18px;
background: rgba(255,255,255,0.035);
border: 1px solid rgba(255,255,255,0.10);
box-shadow: 0 14px 34px rgba(0,0,0,0.28);
margin: 16px 0;
transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.projects-page .project-card--stack:hover{
transform: translateY(-2px);
border-color: rgba(140,190,255,0.35);
box-shadow: 0 18px 44px rgba(0,0,0,0.34);
}

/* Title */
.projects-page .project-title{
margin: 2px 0 6px 0;
font-size: 1.35rem;
line-height: 1.12;
letter-spacing: -0.015em;
font-weight: 700;
}

.projects-page .project-title a{
text-decoration: none;
}

.projects-page .project-title a:hover{
text-decoration: underline;
}

/* Media frame (height is defined here) */
.projects-page .project-media{
width: 100%;
border-radius: 16px;
overflow: hidden;
position: relative;
background: transparent;
box-shadow: 0 12px 28px rgba(0,0,0,0.24);
}

/* If an anchor/picture/figure wraps the media, make it fill the frame */
.projects-page .project-media > a,
.projects-page .project-media > picture,
.projects-page .project-media > figure{
display: block;
width: 100%;
height: 100%;
}

/* Actual media should fill the frame and crop (no vertical gaps) */
.projects-page .project-media img,
.projects-page .project-media video{
width: 100%;
height: auto;
display: block;
object-fit: contain;
object-position: center;
border-radius: 0;
aspect-ratio: auto !important;
background: transparent;
}

/* Keep these classes harmless even if they are wrappers */
.projects-page .project-video,
.projects-page .project-img{
width: 100%;
display: block;
height: auto;
background: transparent;
}

/* Body */
.projects-page .project-body{
display: grid;
gap: 10px;
}

.projects-page .project-description{
margin: 0;
font-size: 1.02rem;
line-height: 1.78;
opacity: 0.86;
}

/* Links */
.projects-page .project-links{
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 2px;
}

.projects-page .project-link{
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 12px;
border-radius: 999px;
border: 1px solid rgba(140,190,255,0.45);
background: rgba(80,140,255,0.10);
text-decoration: none;
font-size: 0.95rem;
line-height: 1;
font-weight: 600;
}

.projects-page .project-link:hover{
background: rgba(80,140,255,0.18);
border-color: rgba(140,190,255,0.75);
}

/* Category headers */
.projects-page h2.category{
margin-top: 2.4rem;
margin-bottom: 1.0rem;
letter-spacing: -0.01em;
font-weight: 750;
}

/* Responsive: optional fine-tuning */
@media (max-width: 900px){
.projects-page .project-media{
height: min(220px, 46vw);
}
}