@font-face { font-family:"DS-Digital"; src:url("assets/fonts/ds-digital/DS-DIGI.TTF") format("truetype"); font-style:normal; font-weight:400; font-display:swap; }

:root { --fragments-paper:#efeee9; --fragments-ink:#0a0a0a; --fragments-accent:#ff3157; }

.fragments-project { --project-header-bg:var(--fragments-ink); --project-progress-color:var(--fragments-ink); background:var(--fragments-paper); }
.fragments-project .project-header {
  background-color:var(--fragments-ink);
  background-image:linear-gradient(90deg,rgba(5,5,6,.86),rgba(5,5,6,.58)),url("assets/projects/visual-fragments/gallery/12-display.webp");
  background-size:auto 185%;
  background-position:50% 39%;
}
.fragments-project .project-progress i { background:var(--fragments-accent); }
.fragments-project .project-overview { background:var(--fragments-paper); }
.fragments-project .project-eyebrow { color:#b61734; }
.fragments-project .project-summary p { max-width:930px; }
.fragments-project .project-text { background:var(--fragments-ink); }

.fragments-viewbar { position:sticky; z-index:80; top:0; height:64px; display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:clamp(18px,3vw,54px); align-items:center; padding:0 clamp(18px,3vw,48px); border:0; color:var(--fragments-ink); background:rgba(239,238,233,.94); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.fragments-viewbar__count { grid-column:3; grid-row:1; }
.fragments-viewbar > div { position:static; grid-column:2; grid-row:1; transform:none; }
.fragments-viewbar__label { grid-column:1; grid-row:1; overflow:hidden; color:rgba(10,10,10,.52); font-size:7px; font-weight:900; letter-spacing:.13em; text-overflow:ellipsis; white-space:nowrap; }
.fragments-viewbar__count { display:flex; align-items:baseline; gap:8px; margin:0; }
.fragments-viewbar__count strong { font-family:var(--display); font-size:clamp(1.65rem,2.2vw,2.45rem); font-weight:400; letter-spacing:-.07em; line-height:1; }
.fragments-viewbar__count span { color:rgba(10,10,10,.42); font-size:7px; font-weight:900; letter-spacing:.12em; }
.fragments-viewbar > div { display:flex; gap:4px; padding:3px; border:1px solid rgba(10,10,10,.13); border-radius:12px; background:rgba(255,255,255,.36); }
.fragments-viewbar button { width:34px; height:34px; display:grid; padding:0; border:0; border-radius:9px; place-items:center; color:rgba(10,10,10,.42); background:transparent; cursor:pointer; transition:color .25s,background .25s,transform .35s cubic-bezier(.16,1,.3,1); }
.fragments-viewbar button:hover { color:var(--fragments-ink); }.fragments-viewbar button.is-active { color:var(--fragments-paper); background:var(--fragments-ink); }
.fragments-viewicon { position:relative; display:block; width:16px; height:16px; }
.fragments-viewicon--gallery::before { content:""; position:absolute; top:2px; left:2px; width:5px; height:5px; border-radius:1px; background:currentColor; box-shadow:8px 0 currentColor,0 8px currentColor,8px 8px currentColor; }
.fragments-viewicon--list::before { content:""; position:absolute; top:2px; left:1px; width:14px; height:1.5px; border-radius:2px; background:currentColor; box-shadow:0 5.5px currentColor,0 11px currentColor; }

.fragments-view--gallery .project-progress { display:none; }
.fragments-gallery { position:relative; height:100dvh; min-height:520px; display:grid; grid-template-columns:minmax(340px,34%) minmax(0,66%); overflow:hidden; scroll-margin-top:64px; touch-action:pan-y; color:var(--fragments-ink); background:#0a0a0b; }
.fragments-gallery__stage { position:relative; isolation:isolate; order:2; width:100%; height:100%; min-width:0; display:grid; grid-template-columns:40px minmax(0,1fr) 40px; gap:7px; align-items:center; padding:14px clamp(10px,1.2vw,22px); overflow:hidden; background:#050506; }
.fragments-gallery__osd { position:absolute; z-index:4; right:clamp(18px,2.4vw,38px); bottom:24px; left:clamp(18px,2.4vw,38px); display:flex; justify-content:space-between; pointer-events:none; color:#fff; font-family:"DS-Digital","OCR A Extended",monospace; font-size:clamp(20px,1.65vw,31px); font-weight:400; letter-spacing:.06em; line-height:1; text-shadow:0 0 4px rgba(255,255,255,1),0 0 14px rgba(255,255,255,.7),0 0 30px rgba(210,230,255,.34); animation:fragments-osd-flicker 4.6s steps(1,end) infinite; }
.fragments-gallery__artwork { position:relative; z-index:2; min-width:0; height:100%; display:flex; align-items:center; justify-content:center; overflow:visible; }
.fragments-gallery__artwork img { width:auto !important; max-width:100%; height:auto !important; max-height:calc(100dvh - 28px); object-fit:contain; cursor:e-resize; transition:opacity .25s ease,transform .45s cubic-bezier(.16,1,.3,1); }
.fragments-gallery__artwork figcaption { position:absolute; right:0; bottom:0; display:flex; gap:16px; width:max-content; max-width:100%; padding:6px 8px; color:rgba(255,255,255,.56); background:rgba(10,10,11,.88); font-size:6px; font-weight:900; letter-spacing:.1em; }
.fragments-gallery__artwork.is-loading img { opacity:.35; transform:scale(.985); }
.fragments-gallery__loading { position:absolute; top:50%; left:50%; opacity:0; pointer-events:none; color:#fff; font-size:7px; font-weight:900; letter-spacing:.14em; transform:translate(-50%,-50%); transition:opacity .2s; }
.fragments-gallery__artwork.is-loading .fragments-gallery__loading { opacity:1; }
.fragments-gallery__nav { position:relative; z-index:3; display:grid; width:40px; height:64px; padding:0; border:0; place-items:center; color:rgba(255,255,255,.42); background:none; cursor:pointer; }
.fragments-gallery__nav span { display:block; font-size:clamp(28px,2.3vw,40px); line-height:1; transition:color .25s,transform .4s cubic-bezier(.16,1,.3,1); }
.fragments-gallery__nav small { display:none; }
.fragments-gallery__nav:hover span { color:#fff; }.fragments-gallery__nav--previous:hover span { transform:translateX(-5px); }.fragments-gallery__nav--next:hover span { transform:translateX(5px); }

.fragments-thumbs { order:1; display:grid; width:100%; height:100%; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(7px,.75vw,12px); align-content:center; padding:clamp(28px,4vw,68px); overflow-y:auto; overscroll-behavior:contain; background:#e7e5df; scrollbar-width:none; }
.fragments-thumbs::before { content:"ARTWORK INDEX  /  SELECT TO PREVIEW"; grid-column:1/-1; padding-bottom:clamp(8px,1.2vh,14px); color:rgba(10,10,10,.48); font-size:7px; font-weight:900; letter-spacing:.13em; }
.fragments-thumbs::-webkit-scrollbar { display:none; }
.fragments-thumbs button { position:relative; width:100%; aspect-ratio:1; padding:0; overflow:hidden; border:1px solid rgba(10,10,10,.12); border-radius:clamp(9px,.75vw,14px); opacity:.64; background:#d8d6d0; cursor:pointer; transition:opacity .3s,border-color .3s,transform .4s cubic-bezier(.16,1,.3,1),box-shadow .3s; }
.fragments-thumbs button span { position:absolute; z-index:2; top:7px; left:8px; color:#fff; font-size:6px; font-weight:900; text-shadow:0 1px 6px #000; }
.fragments-thumbs img { width:100%; height:100%; object-fit:cover; }
.fragments-thumbs button:hover { z-index:2; opacity:.92; transform:translateY(-3px); }.fragments-thumbs button.is-active { z-index:3; border-color:var(--fragments-ink); opacity:1; box-shadow:0 0 0 3px rgba(10,10,10,.13),0 14px 28px rgba(10,10,10,.16); transform:translateY(-2px); }

@keyframes fragments-signal-drift { 0% { transform:translate3d(-3%,-2%,0) scale(1); } 45% { transform:translate3d(4%,3%,0) scale(1.08); } 100% { transform:translate3d(-1%,5%,0) scale(1.03); } }
@keyframes fragments-scan { from { background-position:0 0,0 -160px; } to { background-position:0 4px,0 160px; } }
@keyframes fragments-osd-flicker { 0%,92%,100% { opacity:.88; } 93% { opacity:.56; } 94% { opacity:.96; } }

.fragments-view--gallery .fragments-wall,.fragments-view--gallery .project-text,.fragments-view--gallery .project-end { display:none; }
.fragments-view--wall .fragments-gallery { display:none; }
.fragments-view--gallery .project-next { margin-top:clamp(90px,14vh,170px); }

.fragments-wall { --pair-gap:clamp(28px,4.5vw,82px); --row-gap:clamp(90px,11vw,180px); padding-top:clamp(110px,12vw,180px); padding-bottom:clamp(110px,12vw,180px); background:var(--fragments-paper); }
.fragments-wall--opening { padding-top:clamp(40px,5vw,80px); }
.fragment-band { display:grid; width:min(100%,1400px); gap:var(--pair-gap); margin:0 auto var(--row-gap); }
.fragment-band:last-child { margin-bottom:0; }
.fragment-band--two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.fragment-band figure { min-width:0; }
.fragment-band img { width:100%; height:auto; background:#fff; border:1px solid rgba(18,16,14,.08); box-shadow:0 3px 7px rgba(18,16,14,.08),0 18px 38px rgba(18,16,14,.14),0 44px 90px rgba(18,16,14,.16); transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s cubic-bezier(.16,1,.3,1); }
.fragment-band figure:hover img { transform:translateY(-5px); box-shadow:0 4px 9px rgba(18,16,14,.08),0 24px 48px rgba(18,16,14,.16),0 54px 110px rgba(18,16,14,.2); }
.fragment-band figcaption { display:flex; justify-content:space-between; gap:20px; padding-top:12px; color:rgba(10,10,10,.52); font-size:7px; font-weight:900; letter-spacing:.11em; }
.fragment-band figcaption span:first-child { text-transform:uppercase; }

.fragments-end { background:var(--fragments-paper); }
.fragments-end h2 { color:var(--fragments-ink); }
.fragments-project .project-next { color:var(--fragments-ink); background:var(--fragments-accent); }

@media (max-width:800px) {
  .fragments-project .project-overview h1 { font-size:clamp(3rem,14vw,5rem); }
  .fragments-wall { --pair-gap:12px; --row-gap:52px; padding:70px 16px; }
  .fragments-wall--opening { padding-top:30px; }
  .fragment-band img { box-shadow:0 2px 5px rgba(18,16,14,.08),0 12px 24px rgba(18,16,14,.14),0 26px 54px rgba(18,16,14,.14); }
  .fragment-band figcaption { display:block; font-size:6px; line-height:1.5; }
  .fragment-band figcaption span { display:block; }
  .fragments-viewbar { height:52px; grid-template-columns:minmax(0,1fr) auto; gap:8px; padding:0 8px; }
  .fragments-viewbar > div { position:static; grid-column:1; grid-row:1; transform:none; }.fragments-viewbar__count { grid-column:2; grid-row:1; justify-self:end; }
  .fragments-viewbar__label { display:none; }
  .fragments-viewbar__count { gap:4px; }.fragments-viewbar__count strong { font-size:clamp(1.2rem,6.5vw,1.45rem); }.fragments-viewbar__count span { font-size:6px; }.fragments-viewbar > div { gap:2px; padding:2px; border-radius:9px; }.fragments-viewbar button { width:28px; height:28px; border-radius:7px; }.fragments-viewicon { width:14px; height:14px; }
  .fragments-gallery { height:100dvh; min-height:560px; grid-template-columns:1fr; grid-template-rows:34% 66%; scroll-margin-top:56px; }
  .fragments-gallery__stage { width:100%; height:100%; grid-template-columns:26px minmax(0,1fr) 26px; gap:2px; padding:8px 5px; }
  .fragments-gallery__artwork img { width:auto !important; max-width:100%; height:auto !important; max-height:calc(66dvh - 12px); }
  .fragments-gallery__artwork figcaption { right:0; bottom:0; display:block; max-width:88%; padding:4px 5px; font-size:5px; line-height:1.4; }.fragments-gallery__artwork figcaption span { display:block; }
  .fragments-gallery__nav { width:26px; height:44px; }.fragments-gallery__nav span { font-size:22px; }
  .fragments-gallery__osd { right:12px; bottom:12px; left:12px; font-size:clamp(11px,3.4vw,16px); }
  .fragments-thumbs { width:100%; height:100%; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; align-content:center; padding:12px 10px; overflow:hidden; }
  .fragments-thumbs::before { padding-bottom:2px; font-size:5px; }
  .fragments-thumbs button { border-radius:7px; }.fragments-thumbs button span { top:3px; left:4px; font-size:4px; }
  .fragments-view--gallery .project-next { margin-top:80px; }
}

@media (max-height:620px) and (orientation:landscape) {
  .fragments-viewbar { height:50px; }
  .fragments-gallery { height:100dvh; min-height:360px; grid-template-columns:34% 66%; grid-template-rows:1fr; scroll-margin-top:50px; }
  .fragments-gallery__stage { width:100%; height:100%; grid-template-columns:30px minmax(0,1fr) 30px; gap:4px; padding:12px 8px; }
  .fragments-gallery__artwork img { max-height:calc(100dvh - 16px); }
  .fragments-thumbs { grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; padding:14px; }
  .fragments-thumbs::before { padding-bottom:3px; }
  .fragments-gallery__artwork figcaption { padding:3px 4px; }
}

@media (prefers-reduced-motion:reduce) {
  .fragments-gallery__artwork img,.fragments-gallery__nav span,.fragments-thumbs button,.fragments-viewbar button { transition:none; }
  .fragments-gallery__osd { animation:none; }
}