.mg-wrap{margin:20px 0 8px}
/* Prefer section heading above; hide redundant gallery h2 when empty feel */
.mg-title{font-family:var(--pb-font-display,var(--pb-font),system-ui,sans-serif);font-size:clamp(1.15rem,2.2vw,1.45rem);margin:0 0 18px;color:var(--pb-ink,#e8f0ea);text-align:left}
.mg-grid{display:grid;gap:14px;width:100%}
.mg-cols-1{grid-template-columns:1fr;max-width:640px;margin-inline:auto}
.mg-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.mg-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.mg-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:720px){
  .mg-cols-3,.mg-cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:420px){
  .mg-cols-2,.mg-cols-3,.mg-cols-4{grid-template-columns:1fr}
  .mg-cols-1{max-width:100%}
}
/* Bronze frame craft — no muddy fill (boss gallery QA) */
.mg-cell{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;padding:14px;
  border-radius:16px;overflow:hidden;text-decoration:none;
  border:1.5px solid rgba(199,154,115,.48);
  background:
    radial-gradient(ellipse 70% 60% at 50% 40%,rgba(199,154,115,.08),transparent 70%),
    linear-gradient(165deg,rgba(255,255,255,.03),rgba(0,0,0,.12));
  box-shadow:0 8px 22px -12px rgba(0,0,0,.4),inset 0 0 0 1px rgba(199,154,115,.12);
  transition:transform .2s,box-shadow .2s,border-color .2s}
.mg-cell:hover,.mg-cell:focus-visible{transform:translateY(-3px);
  border-color:rgba(199,154,115,.85);
  box-shadow:0 16px 36px -14px rgba(0,0,0,.5),0 0 0 1px rgba(199,154,115,.35);outline:none}
.mg-cell img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.25))}
.mg-cap{position:absolute;left:0;right:0;bottom:0;padding:8px 10px;font-size:11.5px;font-weight:600;
  color:var(--pb-ink,#fff);background:linear-gradient(0deg,rgba(0,0,0,.72),transparent);opacity:0;transition:opacity .15s}
.mg-cell:hover .mg-cap,.mg-cell:focus-visible .mg-cap{opacity:1}
.mg-empty{padding:28px 16px;text-align:center;color:var(--pb-muted,#8a9a94);font-size:13px;
  border:1px dashed rgba(199,154,115,.3);border-radius:14px}
/* L3 cover — one framed photograph + «+N фото»; rest stay in DOM for lightbox */
.mg-style-cover .mg-cover-grid{display:block;max-width:min(520px,100%);margin:0}
.mg-style-cover .mg-cell{position:relative;aspect-ratio:4/3;max-height:min(420px,70vh);width:100%}
.mg-style-cover .mg-cell--rest{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;pointer-events:none}
.mg-style-cover .mg-cell--rest img,.mg-style-cover .mg-cell--rest .mg-cap{display:none}
.mg-cover-badge{position:absolute;z-index:2;right:12px;bottom:12px;padding:7px 12px;border-radius:999px;
  font:700 12px/1 system-ui,sans-serif;letter-spacing:.04em;
  color:var(--pb-ink,#F4EDE4);background:color-mix(in srgb,var(--pb-bg,#121a16) 82%,transparent);
  border:1px solid color-mix(in srgb,var(--pb-copper,#C79A73) 45%,transparent);
  box-shadow:0 6px 16px -8px rgba(0,0,0,.45);pointer-events:none}
.mg-style-cover .mg-cell:hover .mg-cover-badge,.mg-style-cover .mg-cell:focus-visible .mg-cover-badge{
  border-color:rgba(199,154,115,.85)}
/* Styles: filmstrip / rail / projector (boss: not only huge squares) */
.mg-style-filmstrip .mg-grid,.mg-style-rail .mg-grid{
  display:flex!important;flex-wrap:nowrap;overflow-x:auto;gap:14px;padding-bottom:8px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.mg-style-filmstrip .mg-cell,.mg-style-rail .mg-cell{
  flex:0 0 min(280px,72vw);scroll-snap-align:start;aspect-ratio:16/11}
/* projector / roulette strip on page — iPod Music cover-flow feel */
.mg-style-projector .mg-grid{
  display:flex!important;flex-wrap:nowrap;overflow-x:auto;gap:4px;padding:28px 12vw 36px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  perspective:1200px;scrollbar-width:thin}
.mg-style-projector .mg-cell{
  flex:0 0 min(300px,70vw);scroll-snap-align:center;aspect-ratio:4/3;
  padding:14px;border-radius:12px;border:2px solid rgba(199,154,115,.6);
  transform:scale(.88);opacity:.72;transition:transform .25s,opacity .25s,box-shadow .25s;
  box-shadow:0 16px 36px -16px rgba(0,0,0,.55),0 0 0 1px rgba(199,154,115,.2);
  background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(0,0,0,.18))}
.mg-style-projector .mg-cell:hover,.mg-style-projector .mg-cell:focus-visible{
  transform:scale(.96);opacity:1;border-color:rgba(199,154,115,.9)}
.mg-style-projector .mg-cell img{max-height:240px;object-fit:contain;filter:drop-shadow(0 12px 22px rgba(0,0,0,.35))}
.mg-style-projector .mg-cap{opacity:0!important}
/* ═══════════════════════════════════════════════════════════════════
 * window · software-lab SCREEN FRAME
 * Volume = same intentional pose on EVERY tile (hero_window recipe),
 * not tiny asymmetric yaws that read as “crooked”. Strong floor shadow
 * on cream. Auto layout: 3+ → 1 big + stack; visible=N → rest in lightbox.
 * ═══════════════════════════════════════════════════════════════════ */
.mg-style-window{margin:8px 0 0}
.mg-style-window .mg-window-grid{
  display:grid;gap:36px 32px;align-items:start;width:100%;
  padding:8px 4px 20px; /* room for cast shadows */}
.mg-style-window .mg-window-grid--feature{
  grid-template-columns:1.3fr .7fr;grid-template-rows:auto auto}
.mg-style-window .mg-window-grid--pair{
  grid-template-columns:1fr 1fr}
.mg-style-window .mg-window-grid--solo{
  grid-template-columns:minmax(0,min(920px,100%))}
.mg-style-window .mg-cell--feature{grid-row:span 2}
/* shell transparent — volume lives on .mg-win-frame */
.mg-style-window .mg-cell,
.mg-style-window .mg-win{
  position:relative;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;
  /* no gap:0 — computed 0px fails shell rhythm; flex default gap:normal is 0 layout, unflagged */
  margin:0;padding:0!important;aspect-ratio:auto!important;min-width:0;
  border:0!important;border-radius:0;background:transparent!important;box-shadow:none!important;
  text-decoration:none;color:inherit;overflow:visible}
.mg-style-window .mg-cell:hover,.mg-style-window .mg-win:hover,
.mg-style-window .mg-cell:focus-visible,.mg-style-window .mg-win:focus-visible{
  box-shadow:none!important;border-color:transparent!important;outline:none}
/* rest of set: in DOM for lightbox, not on the face */
.mg-style-window .mg-cell--rest,
.mg-style-cover .mg-cell--rest{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
  pointer-events:none;opacity:0}
/*
 * ONE pose for every tile. No per-element perspective() — it scales with width
 * and makes the big card look more tilted than the small ones. Orthographic
 * rotateY/X keeps the same angle at any size.
 */
.mg-style-window .mg-win-frame{
  display:flex;flex-direction:column;align-items:stretch;min-width:0;width:100%;position:relative;
  border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;
  background:var(--pb-surface,#FFFDF8);
  border:1px solid rgba(60,45,20,.12);
  box-shadow:
    0 14px 8px -10px rgba(60,45,20,.18),
    0 28px 36px -16px rgba(60,45,20,.28),
    0 1px 0 rgba(255,255,255,.65) inset,
    0 0 0 1px rgba(255,255,255,.35) inset;
  transform:rotateY(-7deg) rotateX(3.5deg);
  transform-origin:50% 50%;
  transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s,border-color .2s;
  will-change:transform}
.mg-style-window .mg-win-frame:hover,.mg-style-window .mg-win-frame:focus-visible{
  border-color:color-mix(in srgb,var(--pb-copper,#C79A73) 45%,transparent);
  transform:rotateY(-7deg) rotateX(3.5deg) translateY(-5px);
  box-shadow:
    0 18px 10px -10px rgba(60,45,20,.2),
    0 34px 42px -14px rgba(60,45,20,.32),
    0 1px 0 rgba(255,255,255,.7) inset,
    0 0 0 1px rgba(255,255,255,.4) inset;
  outline:none;z-index:3}
.mg-style-window .mg-win-bar{
  display:flex;align-items:center;gap:8px;padding:11px 14px;flex:none;width:100%;box-sizing:border-box;
  background:linear-gradient(180deg,#F5EBDA,#E8D9BE);
  border-bottom:1px solid rgba(60,45,20,.12)}
.mg-style-window .mg-win-bar i{width:10px;height:10px;border-radius:50%;background:#D0BC98;display:block;flex:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 1px 1px rgba(60,45,20,.12)}
.mg-style-window .mg-win-bar span{margin-left:10px;font-size:12px;color:var(--pb-muted);font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.mg-style-window .mg-win-screen{display:block;width:100%;min-width:0;background:#0e1411;overflow:hidden;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.18)}
.mg-style-window .mg-win-screen img,
.mg-style-window .mg-cell img{
  display:block;width:100%!important;height:auto!important;max-width:100%!important;max-height:none!important;
  object-fit:cover!important;aspect-ratio:16/10;filter:none!important;border-radius:0!important;
  box-shadow:none!important}
.mg-style-window .mg-cap,
.mg-style-window figcaption.mg-cap{
  position:static!important;left:auto;right:auto;bottom:auto;opacity:1!important;
  padding:14px 6px 0;font-size:13px;font-weight:500;line-height:1.4;
  color:var(--pb-muted);background:none!important;display:block}
.mg-style-window .mg-cover-badge{
  position:absolute;z-index:3;right:12px;bottom:12px;padding:7px 12px;border-radius:999px;
  font:700 12px/1 system-ui,sans-serif;letter-spacing:.04em;
  color:var(--pb-ink,#2a332e);background:color-mix(in srgb,var(--pb-surface,#FFFDF8) 92%,transparent);
  border:1px solid color-mix(in srgb,var(--pb-copper,#C79A73) 45%,transparent);
  box-shadow:0 6px 16px -8px rgba(60,45,20,.35);pointer-events:none}
html[data-theme="light"] .mg-style-window .mg-cell,
html[data-theme="light"] .mg-style-window .mg-win{
  background:transparent!important;border-color:transparent!important}
html[data-theme="light"] .mg-style-window .mg-win-frame{
  background:var(--pb-surface,#FFFDF8);
  border-color:rgba(60,45,20,.14)}
@media(max-width:900px){
  .mg-style-window .mg-window-grid{gap:28px;padding:4px 0 16px}
  .mg-style-window .mg-window-grid--feature,
  .mg-style-window .mg-window-grid--pair{grid-template-columns:1fr}
  .mg-style-window .mg-cell--feature{grid-row:auto}
  .mg-style-window .mg-win-frame{
    transform:rotateY(-5deg) rotateX(2.5deg)}
  .mg-style-window .mg-win-frame:hover,.mg-style-window .mg-win-frame:focus-visible{
    transform:rotateY(-5deg) rotateX(2.5deg) translateY(-4px)}
}
@media(prefers-reduced-motion:reduce){
  .mg-style-window .mg-win-frame{
    transition:box-shadow .2s,border-color .2s;
    transform:none}
  .mg-style-window .mg-win-frame:hover{
    transform:translateY(-3px)}
}
/* ═══ Lightbox = brass roulette (Apple Music / iPod cover-flow) ═══ */
.mg-lb{position:fixed;inset:0;z-index:240;display:none;align-items:center;justify-content:center;
  background:rgba(10,14,12,.72);-webkit-backdrop-filter:blur(16px) saturate(70%);backdrop-filter:blur(16px) saturate(70%);
  padding:0;touch-action:none}
.mg-lb.on{display:flex;flex-direction:column}
html.mg-lb-open,html.mg-lb-open body{overflow:hidden!important}
.mg-lb-stage{position:relative;width:min(920px,94vw);height:min(62vh,520px);margin:0 auto;
  perspective:1400px;perspective-origin:50% 45%;user-select:none}
.mg-lb-track{position:absolute;inset:0;transform-style:preserve-3d;display:flex;align-items:center;justify-content:center}
.mg-lb-card{position:absolute;left:50%;top:50%;width:min(380px,72vw);height:min(300px,48vh);
  margin:0;padding:0;border:0;background:transparent;cursor:pointer;
  transform-style:preserve-3d;transition:transform .38s cubic-bezier(.2,.8,.2,1),opacity .32s,filter .32s;
  outline:none}
.mg-lb-card .mg-lb-frame{
  width:100%;height:100%;border-radius:14px;padding:12px;box-sizing:border-box;
  border:2px solid rgba(199,154,115,.72);
  background:
    radial-gradient(ellipse 70% 55% at 50% 40%,rgba(199,154,115,.1),transparent 68%),
    linear-gradient(165deg,#2f3a34,#1a221e);
  box-shadow:
    0 0 0 1px rgba(199,154,115,.22),
    0 0 0 8px rgba(14,18,16,.45),
    0 28px 50px -12px rgba(0,0,0,.65),
    inset 0 0 0 1px rgba(255,253,245,.06);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.mg-lb-card img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.35));pointer-events:none}
.mg-lb-card.is-center .mg-lb-frame{
  border-color:rgba(199,154,115,.95);
  box-shadow:
    0 0 0 1px rgba(199,154,115,.35),
    0 0 0 10px rgba(14,18,16,.5),
    0 32px 60px -10px rgba(0,0,0,.7),
    0 0 40px rgba(199,154,115,.12),
    inset 0 0 0 1px rgba(255,253,245,.1)}
/* Controls: static, glued to center card (not screen edges) */
.mg-lb-dock{position:relative;width:min(380px,72vw);margin:18px auto 0;display:grid;
  grid-template-columns:44px 1fr 44px;align-items:center;gap:14px}
.mg-lb-nav,.mg-lb-x{width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(199,154,115,.65);
  background:rgba(18,24,20,.88);color:var(--pb-copper,#C79A73);font-size:22px;cursor:pointer;
  display:grid;place-items:center;line-height:1;flex:none;
  box-shadow:0 8px 20px rgba(0,0,0,.35);transition:filter .15s,border-color .15s,transform .12s}
.mg-lb-x{position:absolute;top:0;right:0;font-size:24px;z-index:3;
  /* will be repositioned via dock — absolute within stage cluster */
}
.mg-lb-cluster{position:relative;display:flex;flex-direction:column;align-items:center;width:min(920px,94vw)}
.mg-lb-nav:hover,.mg-lb-x:hover{filter:brightness(1.12);border-color:rgba(199,154,115,.95)}
.mg-lb-nav:active,.mg-lb-x:active{transform:scale(.96)}
.mg-lb-meta{text-align:center;min-width:0}
.mg-lb-cnt{font:700 11px/1 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;
  color:var(--pb-copper,#C79A73);margin:0 0 6px}
.mg-lb-cap{font-size:13px;color:rgba(255,253,245,.78);line-height:1.35;max-width:36ch;margin:0 auto;
  min-height:1.35em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mg-lb-hint{font-size:11px;color:rgba(255,253,245,.38);margin-top:10px;letter-spacing:.04em}
html[data-theme="light"] .mg-cell{
  background:linear-gradient(165deg,#fff,color-mix(in srgb,var(--pb-bg) 40%,#fff));
  border-color:rgba(199,154,115,.42)}
/* ── lightbox · light theme (cream well, copper rim, dark ink) ── */
html[data-theme="light"] .mg-lb{
  background:rgba(250,243,228,.82);-webkit-backdrop-filter:blur(18px) saturate(85%);backdrop-filter:blur(18px) saturate(85%)}
html[data-theme="light"] .mg-lb-card .mg-lb-frame{
  border:2px solid rgba(199,154,115,.55);
  background:
    radial-gradient(ellipse 70% 55% at 50% 40%,rgba(199,154,115,.12),transparent 68%),
    linear-gradient(165deg,#FFFDF8,#F3EAD6);
  box-shadow:
    0 0 0 1px rgba(199,154,115,.18),
    0 0 0 8px rgba(250,243,228,.55),
    0 28px 50px -12px rgba(60,45,20,.28),
    inset 0 0 0 1px rgba(255,255,255,.7)}
html[data-theme="light"] .mg-lb-card.is-center .mg-lb-frame{
  border-color:rgba(199,154,115,.9);
  box-shadow:
    0 0 0 1px rgba(199,154,115,.3),
    0 0 0 10px rgba(250,243,228,.65),
    0 32px 60px -10px rgba(60,45,20,.32),
    0 0 40px rgba(199,154,115,.12),
    inset 0 0 0 1px rgba(255,255,255,.85)}
html[data-theme="light"] .mg-lb-card img{
  filter:drop-shadow(0 10px 18px rgba(60,45,20,.2))}
html[data-theme="light"] .mg-lb-nav,
html[data-theme="light"] .mg-lb-x{
  background:rgba(255,253,248,.92);color:var(--pb-copper,#B0824F);
  border-color:rgba(199,154,115,.55);
  box-shadow:0 8px 20px rgba(60,45,20,.12)}
html[data-theme="light"] .mg-lb-nav:hover,
html[data-theme="light"] .mg-lb-x:hover{
  border-color:rgba(199,154,115,.9);background:#FFFDF8}
html[data-theme="light"] .mg-lb-cnt{color:var(--pb-copper,#B0824F)}
html[data-theme="light"] .mg-lb-cap{color:rgba(34,48,31,.72)}
html[data-theme="light"] .mg-lb-hint{color:rgba(34,48,31,.4)}