/* ============================================================
   /examples gallery (v3, 2026-10-15)
   One row per set, stacked: a quiet label column on the left, the
   set's five frames side by side on the right, hairlines between
   rows, all on the neutral page. Clicking a frame opens the
   full-screen viewer. Built by scripts/pages/content/product/
   examples.js; behaviour in assets/js/examples.js.
   ============================================================ */
.ex{--ex-out:cubic-bezier(.22,1,.36,1)}

/* ---------- category filter: a sliding ink pill ---------- */
.ex-bar{display:flex;justify-content:center;margin:clamp(4px,1vw,10px) 0 clamp(18px,2.6vw,30px)}
.ex-filter{
  position:relative;display:flex;gap:2px;max-width:100%;padding:5px;border-radius:999px;
  background:var(--nx-surface);box-shadow:0 0 0 1px var(--nx-line),0 1px 2px rgba(16,16,20,.04);
  overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;
}
.ex-filter::-webkit-scrollbar{display:none}
.ex-pill{position:absolute;z-index:0;top:5px;left:0;width:0;height:36px;border-radius:999px;background:var(--nx-ink);transition:translate .6s var(--ex-out),width .6s var(--ex-out)}
.ex-filter button{
  position:relative;z-index:1;flex:none;display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 15px;
  border:0;border-radius:999px;background:none;cursor:pointer;font:inherit;font-size:14px;font-weight:500;letter-spacing:-.012em;color:var(--nx-sub);
  transition:color .35s ease;
}
.ex-filter button span{font-family:var(--nx-mono);font-size:11.5px;font-weight:400;color:var(--nx-mute);transition:color .35s ease}
.ex-filter button:hover{color:var(--nx-ink)}
.ex-filter button[aria-pressed="true"]{color:var(--nx-ink);background:var(--nx-field)}
.ex-filter.ready button[aria-pressed="true"]{color:#fff;background:none}
.ex-filter.ready button[aria-pressed="true"] span{color:rgba(255,255,255,.6)}
.ex-filter button:focus-visible{outline:2px solid var(--nx-violet);outline-offset:2px}

/* ---------- the rows ---------- */
.ex-list{border-top:1px solid var(--nx-line)}
.ex-row{
  display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,3.4fr);gap:clamp(24px,4vw,56px);align-items:center;
  padding:clamp(28px,3.6vw,48px) 0;border-bottom:1px solid var(--nx-line);
}
.ex-row[hidden]{display:none}
.ex-list.leaving .ex-row{opacity:0 !important;translate:0 10px !important;transition:opacity .22s ease,translate .3s ease !important}
.ex-list.arriving .ex-row{animation:exIn .8s var(--ex-out) both;animation-delay:calc(var(--k,0) * 70ms)}
@keyframes exIn{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}

.ex-meta{min-width:0;align-self:start;padding-top:4px}
.ex-num{display:block;margin-bottom:14px;font-family:var(--nx-mono);font-size:11.5px;color:var(--nx-mute)}
.ex-meta h2{margin:0;font-size:clamp(22px,2vw,26px);font-weight:500;line-height:1.15;letter-spacing:-.035em;color:var(--nx-ink)}
.ex-kind{margin:4px 0 0;font-size:15px;color:var(--nx-sub)}
.ex-prompt{margin:16px 0 0;max-width:36ch;font-size:14px;line-height:1.55;color:var(--nx-sub)}
.ex-prompt b{display:block;margin-bottom:4px;font-family:var(--nx-mono);font-size:10.5px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--nx-mute)}
.ex-links{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:18px}
.ex-open{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:none;cursor:pointer;font:inherit;font-size:14px;font-weight:500;color:var(--nx-ink)}
.ex-open svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:translate .3s var(--ex-out)}
.ex-open:hover svg{translate:3px 0}
.ex-links a{font-size:14px;font-weight:500;color:var(--nx-violet)}
.ex-open:focus-visible,.ex-links a:focus-visible{outline:2px solid var(--nx-violet);outline-offset:3px;border-radius:4px}

/* the five frames */
.ex-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.2vw,16px)}
.wf{display:block;padding:0;border:0;background:none;cursor:zoom-in;border-radius:clamp(10px,1.1vw,14px)}
.wf img{
  display:block;width:100%;height:auto;aspect-ratio:1320/2868;object-fit:cover;border-radius:inherit;background:var(--nx-field);
  box-shadow:0 0 0 1px rgba(16,16,20,.05),0 1px 2px rgba(16,16,20,.05),0 18px 36px -26px rgba(16,16,20,.35);
  transition:transform .6s var(--ex-out),box-shadow .6s ease;
}
.wf:hover img,.wf:focus-visible img{transform:translateY(-6px);box-shadow:0 0 0 1px rgba(16,16,20,.05),0 2px 4px rgba(16,16,20,.05),0 30px 50px -28px rgba(16,16,20,.45)}
.wf:focus-visible{outline:2px solid var(--nx-violet);outline-offset:4px}
/* the frames of a row arrive one after another */
.js .ex-row.pg-rv .wf{opacity:0;translate:0 18px;transition:opacity .7s ease,translate 1s var(--ex-out);transition-delay:calc(var(--n) * 70ms + .1s)}
.js .ex-row.pg-rv.in .wf{opacity:1;translate:0 0}

@media (max-width:900px){
  .ex-row{grid-template-columns:1fr;gap:18px}
  .ex-meta{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:baseline}
  .ex-num{grid-row:1;margin:0}
  .ex-meta h2{grid-column:2}
  .ex-kind,.ex-prompt,.ex-links{grid-column:1/-1}
  .ex-prompt{max-width:60ch;margin-top:10px}
  .ex-links{margin-top:10px}
}
@media (max-width:640px){
  .ex-strip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(-1 * var(--nx-gutter));padding:4px var(--nx-gutter) 10px;scroll-padding:0 var(--nx-gutter)}
  .ex-strip::-webkit-scrollbar{display:none}
  .wf{flex:0 0 42%;scroll-snap-align:start}
  .ex-filter button{padding:0 13px}
  .ex-bar{margin-bottom:12px}
}

/* ---------- the full-screen viewer (neutral page colour) ---------- */
.ex-lb{
  position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:transparent;color:var(--nx-ink);overflow:hidden;
}
.ex-lb::backdrop{background:transparent}
html.ex-lock{overflow:hidden}
.ex-lb-in{
  --pad:clamp(16px,3.4vw,40px);--gap:clamp(10px,1.5vw,22px);
  position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;isolation:isolate;
  background:var(--nx-paper);opacity:0;transition:opacity .45s ease;
}
.ex-lb-in::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(circle,rgba(23,23,26,.08) 1px,transparent 1.3px);background-size:20px 20px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,#000,transparent 80%);mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,#000,transparent 80%);
}
.ex-lb.open .ex-lb-in{opacity:1}

.ex-lb-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px var(--pad) 10px}
.ex-lb-name{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;min-width:0}
.ex-lb-name h2{margin:0;font-size:clamp(22px,2.2vw,28px);font-weight:500;letter-spacing:-.035em}
.ex-lb-name span{font-size:15px;color:var(--nx-sub)}
.ex-lb-nav{display:flex;align-items:center;gap:6px;flex:none}
.ex-lb-count{min-width:44px;text-align:center;font-family:var(--nx-mono);font-size:12.5px;color:var(--nx-mute)}
.ex-lb-btn{
  display:grid;place-items:center;width:42px;height:42px;border:0;border-radius:50%;cursor:pointer;
  background:var(--nx-surface);color:var(--nx-ink);box-shadow:0 0 0 1px var(--nx-line);
  transition:box-shadow .2s ease,scale .3s var(--ex-out,ease);
}
.ex-lb-btn:hover{box-shadow:0 0 0 1px var(--nx-line-strong)}
.ex-lb-btn:active{scale:.94}
.ex-lb-btn:focus-visible{outline:2px solid var(--nx-violet);outline-offset:2px}
.ex-lb-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ex-lb-x{margin-left:8px;background:var(--nx-ink);color:#fff;box-shadow:none}
.ex-lb-x:hover{background:var(--nx-action-hover);box-shadow:none}

.ex-lb-row{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:var(--gap);padding:8px var(--pad)}
.ex-lb-row figure{
  flex:none;margin:0;aspect-ratio:1320/2868;
  height:min(calc(100dvh - 200px),calc((100vw - 2 * var(--pad) - 4 * var(--gap)) / 5 * 2.1727));
  border-radius:clamp(12px,1.4vw,20px);overflow:hidden;background:var(--nx-field);
  box-shadow:0 0 0 1px rgba(16,16,20,.05),0 30px 60px -34px rgba(16,16,20,.45);
  opacity:0;translate:0 40px;scale:.96;
  transition:opacity .6s ease,translate .9s cubic-bezier(.22,1,.36,1),scale .9s cubic-bezier(.22,1,.36,1);
  transition-delay:calc(var(--i) * 65ms + .1s);
}
.ex-lb-row img{display:block;width:100%;height:100%;object-fit:cover}
.ex-lb.open .ex-lb-row figure{opacity:1;translate:0 0;scale:1}
.ex-lb.open.swap .ex-lb-row figure{opacity:0;translate:0 14px;scale:.98;transition-duration:.25s,.35s,.35s;transition-delay:calc(var(--i) * 30ms)}

.ex-lb-foot{display:flex;align-items:center;justify-content:space-between;gap:14px 28px;padding:12px var(--pad) 22px}
.ex-lb-prompt{margin:0;max-width:72ch;font-size:15px;line-height:1.5;color:var(--nx-sub)}
.ex-lb-prompt[hidden]{display:none}
.ex-lb-prompt b{display:inline-block;margin-right:8px;font-family:var(--nx-mono);font-size:11px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--nx-mute)}
.ex-lb-foot .btn{flex:none;margin-left:auto}

@media (max-width:760px){
  .ex-lb-top{padding-top:14px}
  .ex-lb-count{display:none}
  .ex-lb-btn{width:38px;height:38px}
  .ex-lb-row{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:8px 14vw;scroll-padding:0 14vw}
  .ex-lb-row::-webkit-scrollbar{display:none}
  .ex-lb-row figure{height:min(calc(100dvh - 250px),156vw);scroll-snap-align:center}
  .ex-lb-foot{flex-direction:column;align-items:stretch;padding-bottom:max(18px,env(safe-area-inset-bottom))}
  .ex-lb-prompt{font-size:14px}
  .ex-lb-foot .btn{width:100%;justify-content:center;margin-left:0}
}

@media (prefers-reduced-motion:reduce){
  .wf img,.ex-pill,.ex-lb-in,.ex-lb-row figure,.js .ex-row.pg-rv .wf{transition:none}
  .js .ex-row.pg-rv .wf{opacity:1;translate:none}
  .ex-list.arriving .ex-row{animation:none}
}