.works-v4 { min-height: 100vh; background: #0b0b0b; color: #f4f0e9; }
.works-v4 * { box-sizing: border-box; }
.work-intro { padding: clamp(115px,14vh,180px) var(--gut) 26px; }
.work-intro__top, .work-intro__bottom, .work-index__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.work-intro__top { border-top: 1px solid #777; padding-top: 18px; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; }
.work-intro__top a { color: #f4f0e9; text-decoration: none; }
.work-intro__top a:hover { color: #fdc434; }
.work-intro h1 { margin: clamp(55px,10vh,130px) 0 15px; font-family: var(--font-display); font-size: clamp(7rem,21vw,25rem); line-height: .72; letter-spacing: -.09em; font-weight: 700; }
.work-intro h1 span, .work-index__head h2 span { color: #fdc434; }
.work-intro__bottom { font-size: clamp(1rem,1.8vw,1.6rem); line-height: 1.1; }
.work-intro__bottom p { max-width: 25ch; }
.work-filters { display: flex; gap: 7px; flex-wrap: wrap; margin-top: clamp(45px,7vh,90px); border-top: 1px solid #777; padding: 18px 0 0; }
.work-filters button { border: 1px solid #777; background: transparent; color: #f4f0e9; padding: 11px 17px; border-radius: 100px; cursor: pointer; font: 500 .84rem var(--font-text); transition: background .2s,color .2s,border-color .2s; }
.work-filters button:hover, .work-filters button.is-active { background: #f4f0e9; border-color: #f4f0e9; color: #111; }
.work-filters button span { opacity: .58; margin-left: .55em; }
.work-viewer { padding: 0 var(--gut) clamp(100px,14vh,180px); }
.work-viewer__stage { position: relative; width: 100%; height: min(72svh,780px); overflow: hidden; background: #242424; isolation: isolate; transition: background-color .4s; touch-action: pan-y; }
.work-viewer__image-wrap { position: absolute; inset: 0; display: grid; place-items: center; padding: clamp(20px,4.5vw,70px); background: var(--frame,#242424); }
.work-viewer__image-wrap img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 14px 25px #0003); }
.work-viewer__image-wrap.is-entering { animation: slide-in .42s cubic-bezier(.22,.75,.25,1) both; }
.work-viewer__image-wrap.is-leaving { animation: slide-out .42s cubic-bezier(.22,.75,.25,1) both; }
@keyframes slide-in { from { transform: translateX(calc(var(--dir,1)*100%)); } to { transform: translateX(0); } }
@keyframes slide-out { from { transform: translateX(0); } to { transform: translateX(calc(var(--dir,1)*-100%)); } }
.work-viewer__info { display: flex; justify-content: space-between; gap: 24px; border-top: 1px solid #f4f0e9; padding-top: 17px; margin-top: 20px; }
.work-viewer__category { text-transform: uppercase; font-size: .78rem; letter-spacing: .12em; color: #fdc434; }
.work-viewer__info h2 { font-family: var(--font-display); font-size: clamp(2.7rem,5.5vw,6.5rem); letter-spacing: -.055em; line-height: .92; max-width: 12ch; margin: 15px 0 20px; }
.work-viewer__meta { font-size: .95rem; color: #aaa; }
.work-viewer__sep { margin: 0 .7em; color: #555; }
.work-viewer__controls { display: flex; align-items: flex-start; gap: 8px; white-space: nowrap; }
.work-viewer__controls span { font-size: .9rem; margin: 18px 20px 0 0; font-variant-numeric: tabular-nums; }
.work-viewer__controls button { width: 56px; height: 56px; border-radius: 50%; border: 1px solid #eee; background: transparent; color: #eee; font: 1.6rem var(--font-text); cursor: pointer; transition: background .2s,color .2s; }
.work-viewer__controls button:hover { background: #f4f0e9; color: #111; }
.work-viewer__thumbs { display: flex; gap: 9px; margin-top: 45px; overflow-x: auto; padding: 2px 0 18px; scrollbar-color: #777 transparent; }
.work-viewer__thumbs button { width: 72px; height: 86px; flex: none; background: #222; border: 1px solid #555; padding: 0; cursor: pointer; opacity: .58; transition: opacity .2s, border-color .2s; }
.work-viewer__thumbs button.is-active, .work-viewer__thumbs button:hover { opacity: 1; border-color: #fdc434; }
.work-viewer__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.work-index { padding: clamp(70px,10vh,140px) var(--gut) 160px; background: #f1e0e4; color: #101010; }
.work-index__head { align-items: end; border-top: 1px solid #111; padding-top: 18px; margin-bottom: 35px; }
.work-index__head h2 { font-family: var(--font-display); font-size: clamp(2.5rem,7vw,8rem); line-height: .9; letter-spacing: -.07em; max-width: 11ch; }
.work-index__head h2 span { color: #e30f14; }
.work-index__head p { white-space: nowrap; font-size: .9rem; }
.work-index__grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.work-index__card { display: block; appearance: none; border: 0; padding: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.work-index__card[hidden] { display: none; }
.work-index__card img { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; background: var(--card-color,#eee); transition: filter .25s, transform .3s; }
.work-index__card:hover img { filter: saturate(1.15); transform: scale(.985); }
.work-index__card span { display: flex; justify-content: space-between; gap: 10px; padding: 12px 0 25px; border-top: 1px solid #111; font-size: .83rem; }
.work-index__card b { font-weight: 600; }
.work-index__card em { font-style: normal; opacity: .6; }
.work-contact { padding: 110px var(--gut); background: #fdc434; color: #111; }
.work-contact p { font-size: 1rem; margin-bottom: 18px; }
.work-contact a { color: inherit; font: 700 clamp(3rem,7vw,8rem)/.95 var(--font-display); letter-spacing: -.06em; text-decoration-thickness: .06em; text-underline-offset: .1em; }
.works-v4 .inner-foot { background: #0b0b0b; color: #eee; }
@media (max-width: 820px) {
  .work-intro { padding-top: 100px; }
  .work-intro h1 { font-size: clamp(6.7rem,25vw,13rem); margin-top: 80px; }
  .work-intro__bottom p:last-child { display: none; }
  .work-filters { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; }
  .work-filters button { flex: none; }
  .work-viewer__stage { height: min(64svh,680px); }
  .work-viewer__info h2 { font-size: clamp(2.6rem,9vw,5rem); }
  .work-viewer__controls { align-items: end; }
  .work-viewer__controls span { display: none; }
  .work-index__grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .work-index__head { display: block; }
  .work-index__head p { margin-top: 16px; }
}
@media (max-width: 500px) {
  .work-intro__top { font-size: .66rem; }
  .work-intro h1 { font-size: 24vw; }
  .work-viewer__stage { height: 58svh; }
  .work-viewer__image-wrap { padding: 15px; }
  .work-viewer__info { flex-direction: column; }
  .work-viewer__controls { align-self: flex-end; margin-top: -14px; }
  .work-viewer__controls button { width: 48px; height: 48px; }
  .work-viewer__thumbs { margin-top: 30px; }
  .work-index__card span { display: block; line-height: 1.35; }
  .work-index__card em { display: block; }
}
@media (prefers-reduced-motion: reduce) { .work-viewer__image-wrap.is-entering,.work-viewer__image-wrap.is-leaving { animation: none; } }

/* Category doors: six original geometric panels lead into the filtered slideshow. */
.category-doors { background: #0b0b0b; padding: 0 var(--gut) 90px; }
.work-intro { padding-top: 100px; padding-bottom: 30px; }
.work-intro h1 { font-size: clamp(6rem,16vw,18rem); margin: 42px 0 18px; }
.category-doors__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; background: #0b0b0b; }
.category-door { --door:#e45545; position: relative; display: flex; flex-direction: column; align-items: flex-start; width: 100%; aspect-ratio: 1.18; border: 0; overflow: hidden; padding: clamp(18px,2vw,30px); color: #fff; background: var(--door); text-align: left; cursor: pointer; isolation: isolate; }
.category-door:nth-child(1) { --door:#e45545; }
.category-door:nth-child(2) { --door:#9477cc; }
.category-door:nth-child(3) { --door:#6a9b69; }
.category-door:nth-child(4) { --door:#2941b8; }
.category-door:nth-child(5) { --door:#8f4861; }
.category-door:nth-child(6) { --door:#ec96d2; }
.category-door__label { position: relative; z-index: 2; font: 500 clamp(1.7rem,3vw,3.6rem)/1 var(--font-display); letter-spacing: -.05em; }
.category-door__foot { position: relative; z-index: 2; margin-top: auto; font-size: .86rem; letter-spacing: .04em; }
.category-door__symbol { position: absolute; z-index: 1; display: block; width: 54%; aspect-ratio: 1; left: 23%; top: 23%; border: 1.5px solid #fff; transition: transform .55s cubic-bezier(.2,.8,.2,1),border-radius .55s; }
.category-door:nth-child(1) .category-door__symbol { transform: rotate(45deg) scale(.74); }
.category-door:nth-child(2) .category-door__symbol { width: 60%; left: 20%; clip-path: polygon(34% 0,66% 0,66% 34%,100% 34%,100% 66%,66% 66%,66% 100%,34% 100%,34% 66%,0 66%,0 34%,34% 34%); background: #ffffff10; }
.category-door:nth-child(3) .category-door__symbol { border-radius: 50%; }
.category-door:nth-child(4) .category-door__symbol { width: 69%; left: 15.5%; border-radius: 2px; }
.category-door:nth-child(5) .category-door__symbol { clip-path: polygon(50% 0,100% 100%,0 100%); background: #ffffff12; }
.category-door:nth-child(6) .category-door__symbol { width: 59%; left: 20.5%; border-radius: 28%; transform: rotate(22.5deg); }
.category-door:hover .category-door__symbol, .category-door:focus-visible .category-door__symbol { transform: rotate(8deg) scale(1.08); }
.category-door:nth-child(3):hover .category-door__symbol, .category-door:nth-child(3):focus-visible .category-door__symbol { border-radius: 34%; }
.category-door__progress { position: absolute; z-index: 3; left: 0; bottom: 0; height: 6px; width: 0; background: #fff; }
.category-door.is-dwelling .category-door__progress { animation: door-dwell .95s linear forwards; }
@keyframes door-dwell { to { width: 100%; } }
.category-doors__hint { text-align: right; color: #aaa; font-size: .8rem; padding-top: 14px; }
.category-doors__hint span { padding: 0 .3em; }
.work-viewer[hidden], .work-index[hidden] { display: none; }
.work-viewer { padding-top: clamp(90px,11vh,140px); scroll-margin-top: 0; }
.work-viewer__return { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-bottom: 19px; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; }
.work-viewer__return button { border: 0; border-bottom: 1px solid #f1e0e4; padding: 0 0 5px; color: #f1e0e4; background: transparent; cursor: pointer; font: inherit; text-transform: inherit; letter-spacing: inherit; }
.work-viewer .work-filters { margin: 0 0 20px; border-top: 1px solid #777; }
@media (max-width: 820px) {
  .work-intro h1 { font-size: clamp(6rem,22vw,13rem); margin-top: 40px; }
  .category-doors__grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .category-door { aspect-ratio: .83; }
  .category-door__label { font-size: clamp(1.55rem,5vw,2.8rem); }
}
@media (max-width: 500px) {
  .work-intro h1 { font-size: 24vw; }
  .category-doors__grid { gap: 4px; }
  .category-door { padding: 14px; aspect-ratio: .74; }
  .category-door__label { font-size: 1.55rem; }
  .category-door__foot { font-size: .7rem; }
  .category-doors__hint { text-align: left; }
  .work-viewer__return span { display: none; }
}
@media (prefers-reduced-motion: reduce) { .category-door.is-dwelling .category-door__progress { animation: none; } }