/* Project page. Mobile: v2 L286-L323. >=768: Desktop project.html (tablet = same structure, tighter). */
.page-project{background:var(--ink)}
.proj{background:var(--ink);color:var(--on-dark);padding-block-start:var(--hdr-h);padding-block-end:40px}
.proj__hero{inline-size:100%;block-size:auto;aspect-ratio:16/9;max-block-size:80vh;object-fit:cover;object-position:50% 100%;background:#5E6264;margin-block-start:48px}
.proj__head{display:flex;flex-direction:column;align-items:center;gap:16px;padding-block-start:32px;text-align:center}
.proj__tag{padding:4px 10px;border-radius:var(--r-4);background:var(--accent);color:var(--on-accent);font-size:var(--fs-12);font-weight:700}
.proj__title{font-size:26px;line-height:1.25;font-weight:800}
.proj__intro{font-size:var(--fs-15);line-height:1.7;color:var(--muted-3);text-align:start}
.proj__stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:16px 0 0;padding-block:8px}
.pstat{display:flex;flex-direction:column;gap:4px;padding-block-start:10px;border-block-start:1px solid var(--line-dark)}
.pstat dt{font-size:var(--fs-12);color:var(--muted-2)}
.pstat dd{margin:0;font-size:var(--fs-14);font-weight:600}
.proj__rule{border:0;block-size:1px;margin:12px 8px;background:var(--line-dark)}
.proj__rule--end{margin-block:0}

.pgal{--pgal-w:160px;--pgal-gap:10px;overflow:hidden;direction:ltr;padding:var(--pgal-gap);border:1px solid var(--line-dark);border-radius:var(--r-12);background:#161B1F}
.pgal__track{display:flex;inline-size:max-content;animation:pgal-roll 36s linear infinite}
.pgal:hover .pgal__track,.pgal:focus-within .pgal__track{animation-play-state:paused}
.pgal__set{display:flex;gap:var(--pgal-gap);padding-inline-end:var(--pgal-gap)}
.pgal__i{inline-size:var(--pgal-w);block-size:auto;aspect-ratio:4/5;object-fit:cover;background:#F2F2F2;flex:none}
@keyframes pgal-roll{to{transform:translateX(calc(-100% / 3))}}
@media (prefers-reduced-motion:reduce){
  .pgal{overflow-x:auto}
  .pgal__track{animation:none}
  .pgal__set[aria-hidden]{display:none}
}
.proj__visit{display:inline-flex;align-items:center;gap:8px;margin-block-start:16px;color:var(--on-dark);font-size:var(--fs-14);font-weight:600;text-decoration:underline;text-underline-offset:4px}
.proj__visit:hover{opacity:.85}

.pch{display:flex;flex-direction:column;gap:16px;margin-block-start:28px}
.pch__title{font-size:22px;line-height:1.3;font-weight:700}
.pch__body{font-size:var(--fs-15);line-height:1.7;color:var(--muted-3)}
.pch__txt{display:flex;flex-direction:column;gap:16px;order:-1}
.pch__video{inline-size:100%;block-size:170px;background:#000;object-fit:contain}

/* Timeline: vertical on mobile (dot at inline-end), 4 columns >=1024 */
.ptl{list-style:none;margin:0;padding:24px 0 8px;display:flex;flex-direction:column}
.pstep{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 16px;gap:10px 16px;padding-block-end:24px}
.pstep__txt{grid-column:1;display:flex;flex-direction:column;gap:10px;text-align:start}
.pstep__img{grid-column:1;inline-size:78%;block-size:200px;object-fit:cover;object-position:center 52%;background:#5E6264}
.pstep:last-child .pstep__img{block-size:300px}
.pstep__dot{grid-column:2;grid-row:1;inline-size:16px;block-size:16px;margin-block-start:2px;border-radius:50%;background:var(--muted-4);position:relative;z-index:1}
.pstep:not(.is-last)::after{content:"";position:absolute;inset-block:12px -10px;inset-inline-end:7px;inline-size:1px;background:var(--muted-3)}
.pstep__title{font-size:var(--fs-16);font-weight:700;line-height:1.35;letter-spacing:0}
.pstep__body{font-size:var(--fs-13);line-height:1.55;color:var(--muted-2)}
.proj__cta{display:flex;justify-content:center;padding-block-start:20px}

@media (min-width:768px){
  .proj{padding-block-end:var(--section-y)}
  .proj__hero{margin-block-start:0}
  .proj__head{max-inline-size:880px;margin-inline:auto;padding-block-start:48px;gap:20px}
  .proj__tag{font-size:var(--fs-14);padding:5px 12px}
  .proj__title{font-size:40px;line-height:1.15}
  .proj__intro{font-size:var(--fs-16);text-align:center}
  .proj__stats{max-inline-size:880px;margin:32px auto 0;gap:24px;padding:0}
  .pstat{padding-block-start:14px}
  .pstat dt{font-size:var(--fs-13)}
  .pstat dd{font-size:var(--fs-16)}
  .proj__rule{margin-block:48px}
  .proj__rule--end{margin-block:48px 0}
  .pgal{--pgal-w:220px;--pgal-gap:14px}
  .proj__visit{margin-block-start:24px;font-size:var(--fs-16)}
  .pch{margin-block-start:64px}
  .pch__video{block-size:auto;aspect-ratio:16/9}
  .pch__title{font-size:28px}
  .pch__body{font-size:var(--fs-16)}
  .proj__cta{padding-block-start:40px}
}
@media (min-width:1024px){
  .proj{padding-block-start:var(--hdr-h)}
  .proj__head{padding-block-start:64px}
  .proj__intro{font-size:var(--fs-18)}
  .proj__title{font-size:var(--fs-48)}
  .proj__stats{gap:32px}
  .proj__rule{margin-block:64px}
  .proj__rule--end{margin-block:64px 0}
  .pgal{--pgal-w:260px;--pgal-gap:16px}
  .pch{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:center;margin-block-start:96px}
  .pch__txt{order:0}
  .pch__video{order:-1}
  .pch__title{font-size:32px;line-height:1.25}
  .pch__body{font-size:17px}
  .ptl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;padding:0;margin-block-start:96px}
  .pstep{display:flex;flex-direction:column;gap:14px;padding:0;min-inline-size:0}
  .pstep__dot{order:-1;grid-column:auto;margin:0 0 6px}
  .pstep:not(.is-last)::after{inset-block:7px auto;inset-inline:16px -32px;inline-size:auto;block-size:1px}
  .pstep__txt{gap:14px}
  .pstep__title{font-size:var(--fs-18)}
  .pstep__body{font-size:var(--fs-15);line-height:1.6}
  .pstep__img{inline-size:100%;block-size:240px;margin-block-start:auto}
  .pstep:last-child .pstep__img{block-size:240px}
}