/* Layers: homepage contact 20, work view 25, intro 30. Only the single-bead wall uses PhotoSwipe. */
.bracelet-work{position:fixed;inset:0;z-index:25;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;color:var(--text);isolation:isolate}
.bracelet-work[hidden]{display:none}
.bracelet-work__backdrop{position:fixed;inset:0;background:var(--bg);z-index:-1}
.bracelet-work__layout{width:calc(100% - 40px);margin:0 auto;padding-bottom:calc(32px + env(safe-area-inset-bottom));display:grid;gap:24px;align-items:center}
.bracelet-work__controls{display:contents}
.bracelet-work__toolbar{grid-row:1;position:sticky;top:0;z-index:2;margin-inline:-20px;padding:10px 20px;background:var(--bg)}
.bracelet-work__back{display:flex;align-items:center;justify-content:flex-start;width:64px;height:44px;padding:0;color:var(--text)}
.bracelet-work__back svg{width:50px;height:9px;overflow:hidden;fill:none;stroke:currentColor;stroke-linecap:round;transition:color .2s}
.bracelet-work__back:hover,.bracelet-work__back:focus-visible{color:#d5a3a5}
.bracelet-work__media{grid-row:2;margin:0;min-width:0;display:flex;justify-content:center;align-items:center}
.bracelet-work__photo{width:100%;height:auto;max-width:100%;aspect-ratio:var(--work-ratio);object-fit:contain;transform-origin:0 0}
.bracelet-work__info{grid-row:3;min-width:0;padding:0 0 12px}
.bracelet-work__info h2{font-size:24px;line-height:1.5;margin-bottom:16px}
.bracelet-work__description,.bracelet-work__pending{font-size:16px;color:var(--muted);line-height:1.9;white-space:pre-line}
.bracelet-work__details{margin:24px 0 0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 20px;font-size:14px;line-height:1.8}
.bracelet-work__details dt{color:var(--muted)}.bracelet-work__details dd{margin:0;white-space:pre-line;overflow-wrap:anywhere}
.bracelet-work__action{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-top:26px}
.bracelet-work__compose{min-height:44px;padding:8px 0;border-bottom:1px solid #555;font-size:13px;white-space:nowrap;cursor:not-allowed}
.bracelet-work__action>span{color:var(--muted);font-size:11px;white-space:nowrap}
.bracelet-work__navigation{grid-row:4;min-width:0}
.bracelet-work__navigation>p{margin-bottom:10px;color:var(--muted);font-size:11px}
.bracelet-work__mini-scroll{width:min(100%,320px);height:240px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#555 transparent}
.bracelet-work__mini{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:4px;align-items:start}
.bracelet-work__thumb{width:100%;height:auto;min-width:0;margin:0;padding:0;line-height:0}
.bracelet-work__thumb img{width:100%;height:auto;object-fit:contain;border-radius:8px;transition:opacity .18s}
.bracelet-work__thumb[aria-current="true"] img{opacity:.3}
.bracelet-work__thumb:focus-visible{outline-offset:-2px}
@media(hover:hover) and (pointer:fine){.bracelet-work__thumb:not([aria-current="true"]):hover img{opacity:.7}}
@media(min-width:900px){
 .bracelet-work__layout{width:min(1440px,84%);grid-template-columns:minmax(220px,30%) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);column-gap:clamp(32px,6vw,90px);row-gap:24px;min-height:100svh;padding-top:12vh;padding-bottom:3vh;align-items:start}
 .bracelet-work__media{grid-column:2;grid-row:1/3;align-self:center}
 .bracelet-work__photo{width:min(100%,calc(85svh*var(--work-ratio)))}
 .bracelet-work__info{grid-column:1;grid-row:1;padding:0}
 .bracelet-work__controls{display:flex;flex-direction:column;grid-column:1;grid-row:2;align-self:end}
 .bracelet-work__toolbar{position:static;margin:0 0 16px;padding:0}
 .bracelet-work__mini-scroll{width:220px;height:190px}
 .bracelet-work__mini{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce){.bracelet-work__back svg,.bracelet-work__thumb img{transition:none}}