/* Full-width project showcase. Timing is supplied by script.js. */
.projects { background: radial-gradient(ellipse at 85% 0, #e9ddc7 0, transparent 48%), var(--paper); }
.portfolio { --slide-duration: 2000ms; padding: 12px; border: 1px solid #35383d; border-radius: 24px; background: #16191e; box-shadow: 0 24px 60px #22201b20; }
.portfolio-main { display: block; }
.gallery-stage { position: relative; height: clamp(360px, 44vw, 550px); overflow: hidden; border-radius: 16px; background: #20262c; isolation: isolate; }
.gallery-backdrop { position: absolute; inset: -8%; width: 116%; height: 116%; max-width: none; object-fit: cover; filter: blur(25px) brightness(.38) saturate(.75); pointer-events: none; }
.gallery-stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #090d1460, transparent 28%, transparent 75%, #090d1450); pointer-events: none; }
.slides { position: relative; height: 100%; z-index: 1; }
.slide { position: absolute; inset: 0; margin: 0; }
.slide img { width: 100%; height: 100%; object-fit: contain; padding: 24px 68px; filter: drop-shadow(0 12px 24px #0005); }
.slide:not([hidden]) img { animation: gallery-photo-in .4s ease-out both; }
@keyframes gallery-photo-in { from { opacity: .25; transform: translateY(6px) scale(.992); } to { opacity: 1; transform: none; } }
.stage-top { position: absolute; z-index: 3; inset: 18px 18px auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; pointer-events: none; }
.photo-badge { display: flex; align-items: center; gap: 8px; padding: 9px 13px; border: 1px solid #ffffff25; border-radius: 30px; background: #11151dc9; color: #fff; font-size: 10px; font-weight: 600; letter-spacing: .06em; backdrop-filter: blur(12px); }
.gallery-live-dot { width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: #8c969e; }
.is-playing .gallery-live-dot { background: var(--accent); box-shadow: 0 0 12px #ffb00060; }
.expand-photo { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 5px 14px; pointer-events: auto; border: 1px solid #ffffff30; border-radius: 30px; color: white; background: #11151dc9; font: 600 11px var(--font-body); backdrop-filter: blur(12px); }
.expand-photo > span:first-child { font: 27px/1 Arial, sans-serif; }
.expand-photo:hover { background: #fff; color: #16191e; }
.stage-arrows { position: absolute; inset: 50% 14px auto; z-index: 3; display: flex; justify-content: space-between; pointer-events: none; transform: translateY(-50%); }
.stage-arrows button { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid #ffffff40; border-radius: 50%; background: #151a21cc; color: #fff; pointer-events: auto; font: 23px/1 Arial, sans-serif; backdrop-filter: blur(10px); transition: background .2s, transform .2s; }
.stage-arrows button:hover { background: var(--accent); border-color: var(--accent); color: #141414; transform: scale(1.07); }
.project-detail { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-rows: auto auto; column-gap: 24px; align-items: center; padding: 26px 18px; color: #fff; }
.project-index { grid-column: 1; grid-row: 1 / 3; font: 500 17px "Space Grotesk", sans-serif; color: #abb1bc; padding-right: 22px; border-right: 1px solid #ffffff20; white-space: nowrap; }
.index-line { display: none; }
.project-category { grid-column: 2; grid-row: 1; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: #e6b451; margin-bottom: 5px; }
.project-detail h3 { grid-column: 2; grid-row: 2; font-size: clamp(20px, 2.1vw, 27px); line-height: 1.3; letter-spacing: -.025em; }
.project-detail .text-link { grid-column: 3; grid-row: 1 / 3; padding: 10px 16px; border: 1px solid #ffffff26; border-radius: 30px; color: #e3e5e9; font-size: 11px; max-width: 195px; }
.project-detail .text-link:hover { background: #ffffff0c; border-color: #d3a543; color: #ffc64b; }
.playback { grid-column: 4; grid-row: 1 / 3; display: flex; align-items: center; gap: 10px; font-size: 10px; color: #c1c7d0; max-width: 145px; }
.playback button { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border: 1px solid #ffd16c70; border-radius: 50%; background: #ffb00012; color: #ffd16c; font: 19px/1 Arial, sans-serif; }
.playback button:hover { background: var(--accent); color: #141414; }
.slideshow-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; overflow: hidden; border-radius: 5px; background: #ffffff0e; }
.slideshow-progress > span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #b47d15, #ffd371); box-shadow: 0 0 12px #ffb00066; }
.portfolio.is-playing .slideshow-progress > span { animation: gallery-timer var(--slide-duration) linear forwards; }
@keyframes gallery-timer { to { width: 100%; } }
.thumbnail-panel { padding: 18px 6px 4px; }
.thumbnail-heading { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding-inline: 5px; margin-bottom: 12px; font-size: 11px; color: #b3b9c3; }
.thumbnail-heading > span:last-child { font-size: 21px; color: #e1b966; }
.gallery-thumbnails { position: relative; display: flex; gap: 10px; overflow-x: auto; padding: 3px 3px 10px; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: #64605a #ffffff08; overscroll-behavior-x: contain; }
.gallery-thumbnails button { position: relative; flex: 1 0 110px; min-width: 0; padding: 4px; border: 2px solid transparent; border-radius: 12px; background: #22262c; color: #c3c8d0; text-align: left; overflow: hidden; scroll-snap-align: center; transition: border-color .2s, background .2s; }
.gallery-thumbnails img { width: 100%; height: 72px; object-fit: cover; border-radius: 6px; opacity: .65; transition: opacity .2s; }
.gallery-thumbnails button:hover { background: #2b3038; }
.gallery-thumbnails button:hover img, .gallery-thumbnails button[aria-current="true"] img { opacity: 1; }
.gallery-thumbnails button[aria-current="true"] { border-color: #efbc55; background: #393226; color: #ffe0a1; }
.thumb-number { position: absolute; top: 9px; left: 9px; padding: 2px 5px; border-radius: 4px; background: #111b; color: #fff; font: 10px/1.5 "Space Grotesk", sans-serif; }
.thumb-caption { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 36px; margin: 8px 4px 5px; font: 500 10px/1.7 var(--font-body); }
.portfolio a:focus-visible, .portfolio button:focus-visible { outline-color: #ffcc65; outline-offset: 2px; }
@media (max-width: 1000px) {
  .project-detail { grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 18px; }
  .project-detail .text-link { display: none; }
  .playback { grid-column: 3; }
  .gallery-thumbnails button { flex: 0 0 124px; }
}
@media (max-width: 640px) {
  .portfolio { padding: 7px; border-radius: 18px; }
  .gallery-stage { height: 350px; border-radius: 12px; }
  .slide img { padding: 60px 10px 18px; }
  .stage-top { inset: 10px 10px auto; }
  .photo-badge { padding: 8px 10px; font-size: 9px; letter-spacing: 0; }
  .expand-photo { min-height: 38px; padding: 4px 10px; gap: 5px; font-size: 9px; }
  .expand-photo > span:first-child { font-size: 22px; }
  .stage-arrows { inset: 54% 8px auto; }
  .stage-arrows button { width: 44px; height: 44px; font-size: 21px; }
  .project-detail { padding: 20px 10px; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 14px; }
  .project-index { grid-column: 2; grid-row: 1; padding: 0; border: 0; text-align: right; font-size: 11px; }
  .project-category { grid-column: 1; grid-row: 1; font-size: 9px; margin: 0; }
  .project-detail h3 { grid-column: 1; grid-row: 2; font-size: 21px; min-height: 55px; }
  .playback { grid-column: 2; grid-row: 2; justify-content: flex-end; }
  .playback > #playback-label { display: none; }
  .thumbnail-panel { padding: 14px 3px 0; }
  .thumbnail-heading { font-size: 10px; margin-bottom: 8px; }
  .gallery-thumbnails { gap: 8px; }
  .gallery-thumbnails button { flex-basis: 102px; }
  .gallery-thumbnails img { height: 64px; }
  .thumb-caption { font-size: 9px; min-height: 32px; }
}
@media (max-width: 360px) { .gallery-stage { height: 310px; } .photo-badge { font-size: 8px; } .expand-photo { font-size: 8px; } }
@media (prefers-reduced-motion: reduce) { .portfolio *, .portfolio *::after { animation: none !important; transition: none !important; } }