.portfolio-intro { padding-block:68px 58px; }
.portfolio-kicker { display:flex; align-items:center; justify-content:space-between; }
.project-count { font-size:12px; letter-spacing:1px; color:var(--muted); }
.portfolio-heading { display:grid; grid-template-columns:1.2fr 1fr; align-items:end; gap:65px; margin-top:24px; }
.portfolio-page h1 { font-size:clamp(42px,4.9vw,68px); letter-spacing:-2.6px; line-height:1.2; margin:0; white-space:normal; }
.portfolio-page h1 .accent-text { color:var(--accent); }
.portfolio-intro-copy { max-width:435px; padding-bottom:8px; }
.portfolio-intro-copy p { font-size:16px; color:#adb3a6; line-height:1.9; }
.portfolio-source { font-size:14px; display:inline-block; margin-top:19px; color:#d7ddcf; border-bottom:1px solid #535b4a; padding-bottom:5px; }
.portfolio-source:hover { color:var(--accent); }
.work-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:55px 30px; margin-bottom:80px; }
.work-card { min-width:0; container-type:inline-size; }

/* Each cover uses the same composition; its artwork carries the project identity. */
.work-cover { position:relative; isolation:isolate; display:block; aspect-ratio:3 / 2; overflow:hidden; border-radius:12px; background:#202323; color:#fff; box-shadow:inset 0 0 0 1px #ffffff16; }
.project-artwork { position:absolute; inset:0; z-index:-2; display:block; width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.65,.3,1); }
.work-cover::after { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,#080b108c 0%,#080b104d 25%,transparent 55%,#080b1000 75%,#080b103d 100%); pointer-events:none; }
.cover-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:clamp(20px,5.4cqw,32px); }
.cover-category { font-size:14px; font-weight:500; line-height:1.5; color:#ffffffe8; margin-bottom:7px; text-shadow:0 1px 6px #0003; }
.cover-title { font-family:var(--display); font-size:clamp(27px,7.4cqw,46px); font-weight:700; line-height:1.12; letter-spacing:-1.5px; text-wrap:balance; text-shadow:0 2px 15px #0002; }
.cover-title-long { font-size:clamp(25px,6.5cqw,40px); }
.cover-arrow { display:grid; place-items:center; flex:0 0 36px; height:36px; margin-top:2px; border:1px solid #ffffff75; border-radius:50%; font-size:23px; line-height:1; background:#ffffff08; transition:background .2s,color .2s; }
.cover-index { position:absolute; left:clamp(20px,5.4cqw,32px); bottom:20px; font-family:var(--display); font-size:12px; font-weight:600; letter-spacing:1.5px; color:#ffffffe0; text-shadow:0 1px 5px #0008; }
.work-cover:hover .project-artwork, .work-cover:focus-visible .project-artwork { transform:scale(1.035); }
.work-cover:hover .cover-arrow, .work-cover:focus-visible .cover-arrow { color:#161918; background:#fff; border-color:#fff; }
.work-cover:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }

.work-details { padding:25px 3px 0; }
.work-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.portfolio-page .work-title-row h2 { font-family:var(--display); font-size:24px; line-height:1.4; letter-spacing:-.7px; }
.work-number { font-size:12px; color:#89937d; padding-top:6px; }
.work-details>p { font-size:16px; line-height:1.9; color:#aeb5a5; margin-top:13px; max-width:540px; }
.work-tags { display:flex; gap:8px; flex-wrap:wrap; list-style:none; padding:0; margin:20px 0 0; }
.work-tags li { padding:5px 9px; border:1px solid #414b36; border-radius:4px; color:#c0c9b4; font-size:12px; }
.project-link { font-size:14px; display:inline-flex; gap:12px; align-items:center; margin-top:22px; color:#e2e8da; border-bottom:1px solid #526045; padding-bottom:6px; }
.project-link:hover { color:var(--accent); border-color:var(--accent); }
.portfolio-cta { padding:50px 0 70px; display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--border); gap:35px; }
.portfolio-cta h2 { font-size:36px; line-height:1.5; letter-spacing:-1.4px; margin-top:17px; }
.portfolio-cta .eyebrow { color:var(--muted); }
html[lang="th"] .portfolio-page h1 { font-size:clamp(35px,3.7vw,52px); line-height:1.6; letter-spacing:-.5px; }
html[lang="th"] .portfolio-page .work-title-row h2 { font-size:24px; letter-spacing:-.7px; line-height:1.4; }
html[lang="th"] .portfolio-cta h2 { font-size:34px; letter-spacing:0; }

@media (max-width:1000px) {
  .portfolio-heading { gap:30px; }
  .portfolio-page h1 { font-size:48px; }
  .portfolio-intro-copy p { font-size:15px; }
  .work-grid { gap:42px 22px; }
  .portfolio-cta { align-items:flex-start; flex-direction:column; }
}
@media (max-width:760px) {
  .portfolio-intro { padding-block:44px 34px; }
  .portfolio-heading { display:block; margin-top:22px; }
  .portfolio-page h1 { font-size:46px; letter-spacing:-2px; }
  .portfolio-intro-copy { margin-top:22px; max-width:550px; }
  .portfolio-intro-copy p { font-size:16px; }
  .work-grid { gap:37px; grid-template-columns:1fr; margin-bottom:48px; }
  .work-details { padding-top:21px; }
  .work-details>p { font-size:16px; }
  .portfolio-cta { padding-block:38px 48px; }
  .portfolio-cta h2 { font-size:31px; }
  .project-count { font-size:11px; }
  html[lang="th"] .portfolio-page h1 { font-size:36px; }
  html[lang="th"] .portfolio-cta h2 { font-size:29px; }
}
@media (max-width:360px) {
  .portfolio-page h1 { font-size:37px; }
  .cover-heading { gap:8px; padding:18px; }
  .cover-arrow { flex-basis:30px; height:30px; font-size:20px; }
  .cover-category { font-size:12px; }
  .cover-title { font-size:26px; letter-spacing:-1px; }
  .cover-title-long { font-size:23px; }
  .cover-index { left:18px; bottom:16px; }
  html[lang="th"] .portfolio-page h1 { font-size:31px; }
  .portfolio-page .work-title-row h2, html[lang="th"] .portfolio-page .work-title-row h2 { font-size:22px; }
}
@media (prefers-reduced-motion:reduce) {
  .project-artwork,.cover-arrow { transition:none; }
  .work-cover:hover .project-artwork,.work-cover:focus-visible .project-artwork { transform:none; }
}