/* ======================================================================
   Fascicolo (dossier): js/dossier.js. Modes set from JS: spread ≥ 900, panel 600–900, sheet < 600.
   Materials: kraft board (--tx-board), photo/print paper (--tx-paper), worn stamp ink (--tx-ink) are canvas
   textures generated once by dossier.js. Light from the top-left: highlights top-left, shadows bottom-right.
   ====================================================================== */
html.dz-lock { overflow: hidden; scrollbar-gutter: stable; }
.dz { --ease-o: cubic-bezier(.2, .9, .25, 1.06); --ease-c: cubic-bezier(.45, .05, .2, 1);
  --ink-red: #A8261C; --ink-grn: #1E5534; --steel: linear-gradient(180deg, #F4F6F8 0%, #B5BBC2 38%, #EEF0F2 52%, #8D939A 100%);
  --board: var(--tx-board, none), radial-gradient(130% 100% at 0 0, rgba(255, 247, 222, .42), transparent 55%),
    radial-gradient(120% 120% at 100% 100%, rgba(84, 54, 18, .24), transparent 62%), linear-gradient(172deg, #DCC28C, #CDAE73);
  --paper: var(--tx-paper, none), linear-gradient(140deg, #FFFFFF, #F3F1EC);
  --edge: inset 1px 1px 0 rgba(255, 250, 236, .6), inset -1px -1px 0 rgba(104, 70, 26, .38), inset 0 0 24px rgba(116, 80, 30, .3);
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; perspective: 2200px; touch-action: none; }
.dz__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.dz__bd { position: absolute; inset: 0; background: radial-gradient(120% 90% at 40% 35%, rgba(34, 32, 27, .66), rgba(8, 8, 7, .88)); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .3s; }
.dz.is-shown .dz__bd { opacity: 1; }
.dz__fly { position: relative; width: var(--W); height: var(--H); margin-top: 34px; transform-style: preserve-3d; transition: opacity .24s; }
.dz.is-gone .dz__fly { opacity: 0; }
.dz__folder { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform var(--t-cover, .46s) var(--ease-c); }
.dz.is-closing { --t-cover: .36s; }

/* ---------- boards ---------- */
.dz__back, .dz__cover { position: absolute; top: 0; height: 100%; border-radius: 3px 7px 6px 3px; }
.dz__back { z-index: 0; background:
    linear-gradient(90deg, rgba(64, 40, 10, .26), transparent 26px),
    linear-gradient(90deg, transparent 12px, rgba(92, 62, 24, .28) 12px 13px, rgba(255, 246, 222, .45) 13px 14px, transparent 14px 20px, rgba(92, 62, 24, .22) 20px 21px, rgba(255, 246, 222, .4) 21px 22px, transparent 22px),
    var(--board);
  box-shadow: var(--edge), 1px 1px 0 #B7975A, 1.5px 2px 0 #9C7D45, 3px 5px 6px rgba(20, 12, 2, .38), 20px 36px 54px -12px rgba(0, 0, 0, .6); }
/* die-cut tab with a typed label sticker */
.dz__tab { position: absolute; left: 30px; top: -30px; width: min(64%, 300px); height: 34px; border-radius: 10px 10px 0 0; pointer-events: none;
  background: var(--tx-board, none), linear-gradient(rgba(255, 247, 222, .3), transparent), linear-gradient(#DCC28C, #D9BF88); box-shadow: inset 1px 1px 0 rgba(255, 250, 236, .65), inset -1px 0 0 rgba(104, 70, 26, .3); }
.dz__tab::before, .dz__tab::after { content: ''; position: absolute; bottom: 4px; width: 9px; height: 9px; }
.dz__tab::before { left: -9px; background: radial-gradient(circle at 0 0, transparent 8.5px, #D9BF88 9px); }
.dz__tab::after { right: -9px; background: radial-gradient(circle at 100% 0, transparent 8.5px, #D9BF88 9px); }
.dz__tabl { position: absolute; left: 12px; right: 12px; top: 7px; height: 20px; display: flex; align-items: center; gap: 8px; padding: 0 8px 0 0; overflow: hidden;
  background: var(--paper); font: 500 10px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: #1C1C1C; transform: rotate(-.4deg);
  box-shadow: 0 0 0 .5px rgba(40, 26, 6, .22), 1px 1px 1px rgba(40, 26, 6, .3), inset 0 -3px 0 rgba(0, 0, 0, .02); }
.dz__tabn { flex: none; align-self: stretch; display: grid; place-items: center; padding: 0 7px; background: var(--black); color: var(--white); font-weight: 600; }
.dz__tabt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0 .5px rgba(0, 0, 0, .5); }
/* yellow plastic index tab on the fore-edge */
.dz__itab { position: absolute; right: -21px; top: 14%; width: 22px; height: 104px; display: grid; place-items: center; border-radius: 0 6px 6px 0; pointer-events: none;
  background: linear-gradient(90deg, #C99E00, #FFCB05 22%, #FFE372 40%, #FFCB05 58%, #E0B000);
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .55), 2px 2px 3px rgba(20, 12, 2, .35); }
.dz__itab span { writing-mode: vertical-rl; font: 600 9.5px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--black); }

.dz__cover { z-index: 1; transform: translateZ(1px); transform-origin: 0 50%; transform-style: preserve-3d; transition: transform var(--t-cover, .46s) var(--ease-c), opacity .2s; }
.dz__front, .dz__inside { position: absolute; inset: 0; border-radius: inherit; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.dz__front { overflow: hidden; background:
    radial-gradient(circle at 80% 84%, transparent 34px, rgba(110, 70, 24, .13) 35.5px, rgba(110, 70, 24, .05) 38px, transparent 41px),
    radial-gradient(60% 18% at 50% 100%, rgba(255, 248, 228, .16), transparent),
    linear-gradient(90deg, transparent 12px, rgba(92, 62, 24, .28) 12px 13px, rgba(255, 246, 222, .45) 13px 14px, transparent 14px 20px, rgba(92, 62, 24, .22) 20px 21px, rgba(255, 246, 222, .4) 21px 22px, transparent 22px),
    var(--board);
  box-shadow: var(--edge), 1px 1px 0 #B39255, 2px 3px 4px rgba(30, 18, 4, .34); }
.dz__front::after, .dz__inside::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: rgba(28, 16, 2, .5); pointer-events: none; transition: opacity var(--t-cover, .46s) var(--ease-c); }
.dz__front::after { opacity: 0; }
.dz.is-open .dz__front::after { opacity: 1; }
.dz__inside { transform: rotateY(180deg); padding: 26px 30px 26px 24px; background:
    linear-gradient(270deg, rgba(64, 40, 10, .28), transparent 26px),
    linear-gradient(270deg, transparent 12px, rgba(92, 62, 24, .24) 12px 13px, rgba(255, 246, 222, .4) 13px 14px, transparent 14px),
    var(--tx-board, none), radial-gradient(130% 100% at 0 0, rgba(255, 249, 230, .5), transparent 55%), linear-gradient(188deg, #E2CA96, #D3B67D);
  box-shadow: var(--edge); }
.dz.is-open .dz__inside::after { opacity: 0; }

/* ---------- cover: grommets, blind-debossed mark, printed job sheet, stamp, pencil, elastic ---------- */
.dz__grom { position: absolute; left: 32px; top: 8%; width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle, #2E2414 0 2.6px, #6A5232 3.2px, transparent 3.6px), conic-gradient(from 210deg, #F5F7F9, #8E949B, #E3E6E9, #6F757C, #F5F7F9);
  box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .4), 1px 1.5px 2px rgba(20, 12, 2, .45); }
.dz__grom--b { top: auto; bottom: 8%; }
.dz__emb { position: absolute; left: 38px; bottom: 30px; width: 46px; height: 46px; filter: drop-shadow(1px 1px 0 rgba(255, 248, 228, .6)) drop-shadow(-.6px -.6px 0 rgba(70, 44, 10, .38)); }
.dz__emb svg { width: 100%; height: 100%; fill: rgba(150, 112, 56, .55); }
.dz__form { position: absolute; left: 13%; right: 15%; top: 8%; color: rgba(21, 41, 27, .88); mix-blend-mode: multiply; }
.dz__fh { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 2px solid currentColor; }
.dz__fh img { width: 30px; height: 30px; flex: none; filter: grayscale(1) contrast(1.2); opacity: .9; }
.dz__fh p { flex: 1; min-width: 0; display: grid; gap: 3px; }
.dz__fh b { font: 800 clamp(13px, 1.25vw, 16px)/1 var(--f-cond); letter-spacing: .06em; text-transform: uppercase; }
.dz__addr { font: 400 8px/1.2 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dz__mod { flex: none; padding-left: 10px; border-left: 1px solid currentColor; font: 400 8px/1.35 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; text-align: right; }
.dz__fttl { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 12px 0 10px; }
.dz__fttl span:first-child { font: 800 clamp(22px, 2.3vw, 30px)/.9 var(--f-cond); letter-spacing: .04em; text-transform: uppercase; }
.dz__fkind { padding: 4px 7px 3px; border: 1px solid currentColor; font: 600 9px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; }
.dz__grid { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid currentColor; border-left: 1px solid currentColor; }
.dz__f { position: relative; grid-column: span 6; display: grid; gap: 4px; min-width: 0; padding: 5px 7px 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; }
.dz__f--no, .dz__f--dt { grid-column: span 3; }
.dz__f--rep, .dz__f--n, .dz__f--sh { grid-column: span 2; }
.dz__fk { font: 600 8.5px/1 var(--f-cond); letter-spacing: .14em; text-transform: uppercase; }
/* typed on the form: a typewriter's uneven ink and baseline */
.dz__ty { display: block; min-height: 1.2em; font: 400 12.5px/1.2 var(--f-mono); letter-spacing: .02em; color: #1A1A18; opacity: .9; text-shadow: 0 0 .7px rgba(0, 0, 0, .55), .3px 0 0 rgba(0, 0, 0, .15);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transform: translate(1px, 1px) rotate(-.35deg); }
.dz__f--obj .dz__ty { font-size: 15px; text-transform: uppercase; transform: translate(3px, 0) rotate(.25deg); }
.dz__f--dt .dz__ty { transform: translate(-1px, 2px) rotate(.4deg); }
.dz__f--n .dz__ty, .dz__f--sh .dz__ty { transform: translate(2px, 1px) rotate(-.6deg); }
.dz__circ { position: absolute; left: 2px; top: 10px; width: 86%; height: 30px; overflow: visible; fill: none; stroke: rgba(68, 70, 74, .62); stroke-width: 1.3; stroke-linecap: round; pointer-events: none; }
.dz__stamp { position: absolute; right: 13%; bottom: 15%; display: grid; grid-template-columns: auto; justify-items: center; gap: 3px; padding: 8px 14px 7px; border: 3px solid currentColor; border-radius: 4px; color: var(--ink-red); opacity: .82;
  transform: rotate(-9deg); mix-blend-mode: multiply; -webkit-mask: var(--tx-ink, none) 0 0 / 128px; mask: var(--tx-ink, none) 0 0 / 128px; }
.dz__stamp::before { content: ''; position: absolute; inset: 3px; border: 1px solid currentColor; border-radius: 2px; }
.dz[data-kind="pezzo"] .dz__stamp { color: var(--ink-grn); }
.dz__stw { font: 800 clamp(24px, 2.6vw, 34px)/.9 var(--f-cond); letter-spacing: .16em; text-transform: uppercase; padding-left: .16em; }
.dz__std { font: 600 8.5px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.dz__pencil { position: absolute; left: 30%; bottom: 7.5%; font: italic 400 13px/1 var(--f-serif); color: rgba(64, 66, 70, .66); transform: rotate(-3deg); mix-blend-mode: multiply; white-space: nowrap; }
.dz__pencil svg { display: block; width: 100%; height: 8px; margin-top: 3px; fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; }
.dz__band { position: absolute; top: -2px; bottom: -2px; right: 6.5%; width: 11px; border-radius: 2px;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 3px), linear-gradient(90deg, #070707, #2C2C2C 26%, #4E4E4E 40%, #242424 60%, #050505);
  box-shadow: 3px 2px 4px rgba(20, 12, 2, .5), 1px 0 1px rgba(20, 12, 2, .4); transition: transform .2s var(--ease-c), opacity .16s; }
.dz.is-open .dz__band { transform: translateX(30px) rotate(4deg); opacity: 0; }
.dz.is-closing .dz__band { transition-delay: .24s; }

/* ---------- page content ---------- */
.dz__body { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 26px 26px 22px 34px; }
.dz__prints { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.dz__stage { position: relative; flex: 1; min-height: 0; container-type: size; touch-action: pan-y; }
/* a drawing sheet filed under the prints */
.dz__under { position: absolute; left: 50%; top: 50%; width: min(78cqw, 98cqh * 1.414); aspect-ratio: 1.414; transform: translate(-55%, -46%) rotate(-4.5deg); pointer-events: none;
  background: linear-gradient(rgba(54, 92, 112, .09) 1px, transparent 1px) 0 0 / 10px 10px, linear-gradient(90deg, rgba(54, 92, 112, .09) 1px, transparent 1px) 0 0 / 10px 10px, var(--tx-paper, none), linear-gradient(150deg, #F8F4E8, #ECE4CF);
  box-shadow: 0 0 0 .5px rgba(40, 26, 6, .2), 1px 1px 1px rgba(40, 26, 6, .25), 6px 10px 18px -8px rgba(40, 26, 6, .45); }
.dz__under::before { content: ''; position: absolute; inset: 8px; border: 1px solid rgba(21, 41, 27, .55); }
.dz__under i { position: absolute; right: 8px; bottom: 8px; width: 38%; height: 16%; border-top: 1px solid rgba(21, 41, 27, .55); border-left: 1px solid rgba(21, 41, 27, .55);
  background: linear-gradient(rgba(21, 41, 27, .45) 1px, transparent 1px) 0 50% / 100% 50% no-repeat, linear-gradient(90deg, transparent 60%, rgba(21, 41, 27, .45) 60% calc(60% + 1px), transparent 0); }
.dz:not(.is-open) .dz__under { opacity: 0; }
.dz__under { transition: opacity .3s .1s; }

/* lab prints: matte border, glossy emulsion, clip, tape, index stamp */
.dz__print { --x: 0%; --y: 0%; --r: 0deg; --s: 1; position: absolute; left: 50%; top: 50%; width: min(66cqw, calc((100cqh - 70px) * var(--ar))); padding: 9px 9px 0; border: 0; border-radius: 1.5px; color: var(--ink); text-align: left; cursor: pointer;
  background: radial-gradient(70% 45% at 100% 100%, rgba(60, 40, 10, .08), transparent 70%), radial-gradient(55% 35% at 0 100%, rgba(60, 40, 10, .05), transparent 70%), var(--paper);
  box-shadow: 0 0 0 .5px rgba(30, 20, 5, .16), 1px 1px 1px rgba(30, 20, 5, .22), 3px 6px 8px -3px rgba(30, 20, 5, .3), 10px 20px 28px -12px rgba(30, 20, 5, .4);
  transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--r)) scale(var(--s)); transition: transform .48s var(--ease-o), box-shadow .3s; }
.dz:not(.is-open) .dz__print { --x: 0% !important; --y: 2% !important; --r: calc(var(--tr, 0deg) * .4) !important; --s: .9 !important; }
.dz.is-open:not(.is-settled) .dz__print { transition-duration: .42s; transition-delay: calc(var(--dl, 0s) + var(--fan-delay, .16s)); }
.dz__print.is-front { cursor: zoom-in;
  box-shadow: 0 0 0 .5px rgba(30, 20, 5, .16), 1px 1px 1px rgba(30, 20, 5, .24), 6px 12px 14px -6px rgba(30, 20, 5, .36), 20px 36px 46px -16px rgba(30, 20, 5, .5); }
.dz__print:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.dz__ph { position: relative; display: block; overflow: hidden; background: var(--mist); }
.dz__ph img { display: block; width: 100%; aspect-ratio: var(--ar); object-fit: cover; filter: saturate(.92) contrast(1.04); }
.dz__ph::after { content: ''; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; background-size: 240% 240%; background-position: 0 0; transition: background-position .7s var(--ease-c);
  background-image: linear-gradient(118deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, .1) 20%, transparent 34%, transparent 60%, rgba(255, 255, 255, .12) 72%, transparent 86%);
  box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .3), inset 0 0 22px rgba(0, 0, 0, .14); }
.dz__print.is-front .dz__ph::after { background-position: 45% 45%; }
.dz__cap { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 34px; font: 400 10.5px/1 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: #232321; }
.dz__ct { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0 .6px rgba(0, 0, 0, .5); }
.dz__fs { flex: none; padding: 3px 5px 2px; border: 1.5px solid currentColor; border-radius: 2px; color: var(--ink-grn); font: 600 9px/1 var(--f-mono); letter-spacing: .08em; opacity: .85;
  transform: rotate(-4deg); mix-blend-mode: multiply; -webkit-mask: var(--tx-ink, none) 0 0 / 96px; mask: var(--tx-ink, none) 0 0 / 96px; }
.dz__clip { position: absolute; left: 22px; top: -18px; width: 15px; height: 44px; transform: rotate(-5deg); filter: drop-shadow(1.2px 1.8px 1px rgba(20, 12, 2, .45)); opacity: 0; transition: opacity .2s; pointer-events: none; }
.dz__print.is-front .dz__clip { opacity: 1; }
.dz__tape { position: absolute; right: -16px; top: 8px; width: 60px; height: 19px; transform: rotate(38deg); pointer-events: none; opacity: .9;
  background: var(--tx-paper, none), linear-gradient(rgba(252, 246, 222, .7), rgba(238, 228, 196, .6));
  clip-path: polygon(0 8%, 6% 0, 10% 12%, 14% 2%, 86% 0, 90% 10%, 95% 0, 100% 12%, 100% 90%, 95% 100%, 90% 88%, 85% 100%, 14% 98%, 9% 88%, 5% 100%, 0 90%); }
.dz__print:nth-child(odd) .dz__tape { right: auto; left: -16px; top: auto; bottom: 30px; transform: rotate(-34deg); }
.dz__print.is-far { opacity: 0; }

/* embossed label-maker strip */
.dz__bar { align-self: center; display: flex; align-items: center; margin-top: 14px; padding: 0 4px; flex: none; border-radius: 3px; transform: rotate(-.5deg);
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px), linear-gradient(#2E2E2D, #151514 60%, #1C1C1B);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -1px 0 rgba(0, 0, 0, .6), 1px 2px 2px rgba(20, 12, 2, .4), 4px 8px 12px -5px rgba(20, 12, 2, .5); }
.dz__bar button, .dz__count { color: #EFEFEA; text-shadow: 0 -1px 0 rgba(0, 0, 0, .95), 0 1px 0 rgba(255, 255, 255, .2); }
.dz__bar button { width: 44px; height: 40px; border: 0; background: none; font: 400 15px/1 var(--f-mono); border-radius: 2px; }
.dz__bar button:hover { background: var(--accent); color: var(--black); text-shadow: none; }
.dz__count { min-width: 112px; text-align: center; font: 600 11px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; }

/* ---------- scheda tecnica: punched sheet on a steel fastener ---------- */
.dz__sheet { position: relative; display: block; padding: 46px 24px 18px; overflow: auto; overscroll-behavior: contain; touch-action: pan-y; color: var(--ink); border-radius: 1px;
  background: radial-gradient(80% 30% at 100% 100%, rgba(60, 40, 10, .05), transparent), var(--paper);
  box-shadow: 0 0 0 .5px rgba(30, 20, 5, .16), 1px 1px 1px rgba(30, 20, 5, .22), 4px 8px 12px -5px rgba(30, 20, 5, .34), 12px 22px 30px -16px rgba(30, 20, 5, .4); }
.dz__holes { position: absolute; top: 14px; left: 50%; width: 92px; height: 14px; transform: translateX(-50%);
  background: radial-gradient(circle at 7px 7px, #7A5D2E 0 1.5px, #B49460 4.2px, rgba(40, 24, 4, .3) 5px, transparent 5.8px), radial-gradient(circle at calc(100% - 7px) 7px, #7A5D2E 0 1.5px, #B49460 4.2px, rgba(40, 24, 4, .3) 5px, transparent 5.8px); }
.dz__fast { display: none; position: absolute; top: 12px; left: 50%; width: 112px; height: 18px; transform: translateX(-50%); border-radius: 3px; background: var(--steel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(0, 0, 0, .25), 0 0 0 .5px rgba(0, 0, 0, .4), 1px 2px 3px rgba(20, 12, 2, .45); }
.dz__fast::before, .dz__fast::after { content: ''; position: absolute; top: 4px; width: 22px; height: 10px; border-radius: 2px; background: linear-gradient(180deg, #D9DDE1, #858B92); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 1px 1px rgba(0, 0, 0, .35); }
.dz__fast::before { left: 6px; } .dz__fast::after { right: 6px; }
.dz[data-mode="spread"] .dz__fast { display: block; }
.dz[data-mode="spread"] .dz__holes { display: none; }
.dz__sk { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 10px; border-bottom: 2px solid var(--black); font: 600 11px/1.2 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; }
.dz__ref { color: var(--grey-t); font-weight: 500; }
.dz__t { font: 800 clamp(24px, 2.4vw, 34px)/1 var(--f-cond); text-transform: uppercase; margin-top: 14px; color: var(--black); }
.dz__sub { margin-top: 6px; font: 500 11px/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--grey-t); }
.dz__specs { width: 100%; border-collapse: collapse; margin-top: 12px; }
.dz__specs th, .dz__specs td { padding: 6px 0; border-bottom: 1px dotted rgba(21, 41, 27, .34); vertical-align: baseline; }
.dz__specs th { font: 500 13px/1.3 var(--f-sans); text-align: left; padding-right: 12px; color: #34362F; }
.dz__specs td { font: 600 12px/1.3 var(--f-mono); text-align: right; white-space: nowrap; color: var(--black); }
.dz__ik { margin-top: 14px; font: 600 10px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--grey-t); }
.dz__idx { margin-top: 8px; display: grid; gap: 2px; }
.dz__idx li { display: flex; gap: 10px; font: 500 11px/1.5 var(--f-mono); color: var(--grey-t); }
.dz__idx li span { color: var(--black); padding: 0 2px; }
.dz__idx li.is-on { color: var(--black); }
.dz__idx li.is-on span { background: var(--accent); }
.dz__tb { display: grid; grid-template-columns: 2.2fr 1fr .8fr 1.2fr; margin-top: 16px; border: 1.5px solid var(--black); font: 500 8.5px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--black); }
.dz__tb span { padding: 6px 6px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dz__tb span + span { border-left: 1px solid var(--black); }
.dz__tb span:first-child { font-weight: 600; }

/* ---------- chrome ---------- */
.dz__x { position: absolute; top: 16px; right: 16px; z-index: 5; display: inline-flex; gap: 10px; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, .55); background: rgba(14, 14, 14, .6); color: var(--white); font: 500 12px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; opacity: 0; transition: opacity .25s; }
.dz.is-open .dz__x, .dz.is-done .dz__x { opacity: 1; }
.dz__x:hover { background: var(--accent); color: var(--black); border-color: var(--accent); }
.dz__zoom { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; padding: 72px 24px 48px; background: rgba(10, 10, 9, .92); opacity: 0; transition: opacity .2s; cursor: zoom-out; touch-action: pan-y pinch-zoom; }
.dz__zoom.is-in { opacity: 1; }
.dz__zoom figure { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 100%; min-height: 0; margin: 0; }
/* whole photo always visible: fit inside the overlay (minus padding and caption), never crop */
.dz__zoom img { box-sizing: border-box; width: auto; height: auto; max-width: 100%; max-height: min(calc(100% - 32px), calc(100dvh - 160px)); min-height: 0; object-fit: contain; background: #FFFFFF; padding: 10px;
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .3), 8px 16px 40px -10px rgba(0, 0, 0, .7); }
.dz__zoom figcaption { font: 500 11px/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: #E6E6E6; }
/* final state guaranteed (transitionend or timeout) */
.dz.is-done .dz__cover, .dz.is-done .dz__folder, .dz.is-done .dz__bd { transition: none; }

/* --- spread (≥ 900 px): the cover turns into the left page --- */
.dz[data-mode="spread"] { --W: min(1000px, 92vw, calc(100vw - 48px)); --H: min(640px, 84vh, calc(100vh - 176px)); --pw: calc(var(--W) / 2); --fan-delay: .16s; }
.dz[data-mode="spread"] .dz__folder { transform: translateX(calc(var(--pw) * -.5)); }
.dz[data-mode="spread"].is-open .dz__folder { transform: none; }
.dz[data-mode="spread"] .dz__back, .dz[data-mode="spread"] .dz__cover { left: 50%; width: var(--pw); }
.dz[data-mode="spread"] .dz__cover { transform: translateZ(1px); }
.dz[data-mode="spread"].is-open .dz__cover { transform: translateZ(1px) rotateY(-180deg); }
.dz[data-mode="spread"] .dz__inside .dz__sheet { height: 100%; transform: rotate(-.6deg); }

/* --- panel (600–900 px) and sheet (< 600 px): the cover swings off on its spine, sheet under the prints --- */
.dz[data-mode="panel"], .dz[data-mode="sheet"] { --t-cover: .34s; --fan-delay: .1s; }
.dz[data-mode="panel"].is-closing, .dz[data-mode="sheet"].is-closing { --t-cover: .26s; }
.dz[data-mode="panel"] { --W: min(560px, calc(100vw - 64px)); --H: min(720px, calc(88vh - 30px), calc(100vh - 150px)); }
.dz[data-mode="sheet"] { --W: 100vw; --H: min(780px, calc(92svh - 34px)); place-items: end center; }
.dz[data-mode="sheet"] .dz__fly { margin-top: 0; }
.dz[data-mode="panel"] .dz__back, .dz[data-mode="panel"] .dz__cover, .dz[data-mode="sheet"] .dz__back, .dz[data-mode="sheet"] .dz__cover { left: 0; width: 100%; }
.dz[data-mode="sheet"] .dz__back, .dz[data-mode="sheet"] .dz__cover { border-radius: 10px 10px 0 0; }
.dz[data-mode="panel"].is-open .dz__cover, .dz[data-mode="sheet"].is-open .dz__cover { transform: translateZ(1px) rotateY(-104deg); opacity: 0; pointer-events: none; transition: transform var(--t-cover) var(--ease-c), opacity .12s calc(var(--t-cover) * .7); }
.dz[data-mode="panel"] .dz__inside, .dz[data-mode="sheet"] .dz__inside { display: none; }
.dz[data-mode="panel"] .dz__prints, .dz[data-mode="sheet"] .dz__prints { flex: 0 0 55%; }
.dz[data-mode="panel"] .dz__print, .dz[data-mode="sheet"] .dz__print { width: min(70cqw, calc((100cqh - 70px) * var(--ar))); }
.dz[data-mode="panel"] .dz__body > .dz__sheet, .dz[data-mode="sheet"] .dz__body > .dz__sheet { flex: 1; min-height: 0; margin-top: 16px; padding: 38px 20px 16px; }
.dz[data-mode="panel"] .dz__t, .dz[data-mode="sheet"] .dz__t { margin-top: 12px; font-size: 26px; }
.dz[data-mode="sheet"] .dz__body { padding: 20px 14px calc(14px + env(safe-area-inset-bottom, 0px)) 30px; }
.dz[data-mode="sheet"] .dz__tab { left: 22px; width: min(66%, 270px); }
.dz[data-mode="sheet"] .dz__itab { display: none; }
.dz[data-mode="sheet"] .dz__x .dz__xl { display: none; }
.dz[data-mode="sheet"] .dz__x { top: 12px; right: 12px; padding: 0 12px; }
.dz[data-mode="sheet"] .dz__form { left: 15%; right: 13%; top: 6%; }
.dz[data-mode="sheet"] .dz__stamp { right: 9%; bottom: 20%; }
.dz[data-mode="sheet"] .dz__pencil { left: 26%; bottom: 10%; }
.dz[data-mode="sheet"] .dz__band { right: 5%; }

/* reduced motion: plain fade, folder already open */
.dz.is-rm .dz__folder, .dz.is-rm .dz__cover, .dz.is-rm .dz__print, .dz.is-rm .dz__bd, .dz.is-rm .dz__band, .dz.is-rm .dz__front::after, .dz.is-rm .dz__inside::after { transition: none !important; }
.dz.is-rm { opacity: 0; transition: opacity .2s; }
.dz.is-rm.is-shown { opacity: 1; }