/* QPang Online gallery. Loads after ../theme.css and ../site.css. Colours come from --qp-* tokens only. */

html { scroll-padding-top:calc(var(--qp-header-h) + 63px); }
.g-lb-lock { overflow:hidden; }

/* ---------- shared bits ---------- */
.g-tag { display:inline-flex; align-items:center; min-height:30px; padding:3px 12px; border:2px solid var(--qp-outline); border-radius:999px;
  font-weight:800; font-size:14px; line-height:1.2; color:var(--qp-ink); background:var(--qp-paper); }
.g-tag { gap:6px; }
.g-tag .qp-icon { width:1em; height:1em; }
.g-tag--art { background:var(--qp-orange); }
.g-tag--client { background:var(--qp-yellow); }

.g-section { padding-block:clamp(44px,6vw,80px); scroll-margin-top:-40px; }
.g-head { display:grid; gap:10px; max-width:720px; margin-bottom:clamp(20px,3vw,32px); justify-items:start; }
.g-head h2 { margin:0; font-family:var(--qp-font-display); font-weight:400; font-size:clamp(32px,4.2vw,48px); line-height:1.05; letter-spacing:.005em; }
.g-head p a { display:inline-block; padding-block:9px; margin-block:-9px; }
.g-head p { margin:0; font-size:clamp(16px,1.4vw,18px); color:var(--qp-ink-soft); }

/* ---------- tiles ---------- */
.g-tile { margin:0; min-width:0; display:flex; flex-direction:column; }
.g-shot { display:block; position:relative; flex:none; overflow:hidden; line-height:0; background:var(--qp-surface);
  border:var(--qp-stroke); border-radius:var(--qp-radius-md); box-shadow:var(--qp-sticker);
  transition:transform .16s ease, box-shadow .16s ease; }
.g-shot { cursor:zoom-in; }
.g-shot--cut { background:var(--qp-sky); }
.g-shot img { display:block; width:100%; height:auto; transition:transform .3s ease; }
.g-shot:hover { transform:translateY(-3px) rotate(-.4deg); box-shadow:0 8px 0 var(--qp-outline); }
.g-shot:hover img { transform:scale(1.03); }
.g-shot:active { transform:translateY(3px); box-shadow:0 2px 0 var(--qp-outline); }
.g-shot:focus-visible { outline:4px solid var(--qp-sky-strong); outline-offset:4px; border-radius:var(--qp-radius-md); }

.g-cap { padding-top:14px; font-size:15px; line-height:1.4; color:var(--qp-ink-soft); }
.g-cap-title { display:block; font-weight:900; font-size:17px; line-height:1.25; color:var(--qp-ink); }
.g-cap-text { display:block; margin-top:3px; }

/* ---------- hero ---------- */
.g-hero { position:relative; overflow:hidden; background-color:var(--qp-yellow); border-bottom:var(--qp-stroke);
  background-image:radial-gradient(color-mix(in srgb,var(--qp-orange) 42%,transparent) 2px,transparent 2.6px); background-size:16px 16px; }
.g-hero-grid { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); align-items:center; gap:clamp(28px,4vw,56px);
  padding-block:clamp(32px,5vw,64px); }
.g-eyebrow { display:inline-block; margin:0 0 14px; padding:4px 14px; background:var(--qp-paper); border:var(--qp-stroke); border-radius:10px;
  font-family:var(--qp-font-display); font-size:18px; line-height:1.2; transform:rotate(-2deg); box-shadow:var(--qp-sticker-sm); }
.g-hero h1 { margin:0; font-family:var(--qp-font-display); font-weight:400; font-size:clamp(46px,6.2vw,84px); line-height:.98; letter-spacing:.005em; }
.g-lead { margin:18px 0 0; max-width:34em; font-size:clamp(17px,1.5vw,20px); line-height:1.5; font-weight:600; color:var(--qp-ink); }

.g-hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px; margin-top:24px; }
.g-faces { display:inline-flex; align-items:center; gap:14px; min-height:44px; color:var(--qp-ink); text-decoration:none; font-weight:900; font-size:17px; border-radius:12px; }
.g-faces-row { display:flex; flex:none; }
.g-faces-row img { display:block; width:54px; height:54px; border-radius:50%; border:3px solid var(--qp-outline); background:var(--qp-orange); margin-left:-12px; transition:transform .16s ease; }
.g-faces-row img:first-child { margin-left:0; }
.g-faces:hover .g-faces-row img { transform:translateY(-3px); }
.g-faces:hover .g-faces-row img:nth-child(even) { transform:translateY(3px); }
.g-faces-label { text-decoration:underline; text-decoration-thickness:3px; text-underline-offset:4px; text-decoration-color:var(--qp-orange-active); white-space:nowrap; }

.g-hero-art .g-shot { transform:rotate(1.2deg); border-radius:var(--qp-radius-lg); box-shadow:0 8px 0 var(--qp-outline); border-width:4px; background:var(--qp-sky); }
.g-hero-art .g-shot:hover { transform:translateY(-3px) rotate(.4deg); box-shadow:0 11px 0 var(--qp-outline); }
.g-hero-art .g-cap { color:var(--qp-ink); font-weight:600; }

/* ---------- jump bar ---------- */
.g-jump { position:sticky; top:calc(var(--qp-header-h) + 3px); z-index:40; background:var(--qp-paper); border-bottom:var(--qp-stroke); }
.g-jump-list { display:flex; align-items:center; gap:8px; padding-block:8px; overflow-x:auto; scrollbar-width:none; }
.g-jump-list::-webkit-scrollbar { display:none; }
.g-jump-label { font-weight:900; font-size:15px; color:var(--qp-ink-soft); margin-right:6px; white-space:nowrap; }
.g-jump a { display:inline-flex; align-items:center; gap:6px; min-height:42px; padding:6px 14px; border-radius:10px; border:2px solid transparent; white-space:nowrap;
  color:var(--qp-ink); text-decoration:none; font-weight:800; font-size:16px; }
.g-jump a:hover { background:var(--qp-surface); }
.g-jump a[aria-current] { background:var(--qp-yellow); border-color:var(--qp-outline); }
.g-jump a:focus-visible { outline-offset:-2px; outline-width:3px; }

/* ---------- open-me badge on every picture that opens ---------- */
.g-shot::after { content:""; position:absolute; right:8px; bottom:8px; width:30px; height:30px; border-radius:50%; border:2px solid var(--qp-outline); background:var(--qp-paper) no-repeat center/18px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317243C' stroke-width='3' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E"); }

/* The corners of a game screen hold its on-screen display, so the badge sits at the side. */
.g-night .g-shot::after { bottom:auto; top:50%; margin-top:-15px; }

/* ---------- the crew ---------- */
.g-port { overflow:hidden; line-height:0; background:var(--qp-orange); border:var(--qp-stroke); border-radius:var(--qp-radius-md); box-shadow:var(--qp-sticker); }
.g-port img { display:block; width:100%; height:auto; }
.g-crew { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:clamp(12px,1.6vw,22px); }
.g-crew .g-cap-title { font-family:var(--qp-font-display); font-weight:400; font-size:22px; letter-spacing:.01em; }

/* ---------- mosaics: one big picture, two smaller ---------- */
.g-bento { display:grid; gap:clamp(20px,2.2vw,28px); grid-template-columns:minmax(0,2.2fr) minmax(0,1fr); }
.g-bento > :first-child { grid-row:span 2; }
.g-bento > :first-child .g-shot { flex:1 1 auto; }
.g-bento > :first-child .g-shot img { position:absolute; inset:0; height:100%; object-fit:cover; }
.g-bento > :first-child .g-cap-title { font-size:20px; }

/* ---------- night section: the dev client ---------- */
.g-night { background:var(--qp-night); color:var(--qp-paper); border-block:var(--qp-stroke); }
.g-night .g-head p { color:var(--qp-border); }
.g-night .g-cap { color:var(--qp-border); }
.g-night .g-cap-title { color:var(--qp-paper); }
.g-night .g-shot { border-color:var(--qp-paper); box-shadow:0 5px 0 var(--qp-orange); background:var(--qp-night-surface); }
.g-night .g-shot:hover { box-shadow:0 8px 0 var(--qp-orange); }
.g-night .g-shot:focus-visible { outline-color:var(--qp-yellow); }

/* ---------- models ---------- */
.g-models { display:grid; gap:clamp(20px,2.2vw,28px); grid-template-columns:minmax(0,2.286fr) minmax(0,3.455fr); }
.g-section--flush { padding-top:0; scroll-margin-top:0; }
.g-section--tint { background:var(--qp-surface); border-bottom:var(--qp-stroke); }

/* ---------- game screens: two by two ---------- */
.g-duo { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(20px,2.4vw,32px); }

/* ---------- call to action ---------- */
.g-cta { background:var(--qp-sky-strong); color:var(--qp-paper); padding-block:clamp(40px,5.4vw,72px); border-top:var(--qp-stroke); }
.g-cta-inner { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px 48px; }
.g-cta h2 { margin:0; font-family:var(--qp-font-display); font-weight:400; font-size:clamp(36px,4.8vw,60px); line-height:1.04; }
.g-cta p { margin:8px 0 0; font-size:clamp(17px,1.6vw,21px); font-weight:700; }
.g-cta-actions { display:flex; flex-wrap:wrap; align-items:center; gap:14px 16px; }
.g-cta-play { font-size:clamp(22px,2.2vw,28px); padding:16px 36px; min-height:64px; }
.g-cta .discord-msg { flex:none; width:fit-content; max-width:100%; }
.g-note { display:none; flex-basis:100%; margin:0; font-size:15px; font-weight:700; line-height:1.35; }
.g-cta .g-note { margin:0; font-size:15px; }
@media (max-width:1023px) { .g-note { display:block; } }
.g-cta :focus-visible { outline-color:var(--qp-yellow); }

/* ---------- phones and small tablets ---------- */
/* Two-column hero with a narrow text column: smaller faces, label may drop below them. */
@media (min-width:720px) and (max-width:1023px) {
  .g-faces { flex-wrap:wrap; gap:6px 10px; font-size:16px; }
  .g-faces-row img { width:38px; height:38px; margin-left:-9px; }
}
@media (max-width:719px) {
  .g-hero-grid { grid-template-columns:minmax(0,1fr); gap:20px; padding-block:24px 34px; }
  .g-hero-art .g-shot { transform:rotate(.6deg); }
  .g-lead { margin-top:12px; }
  .g-hero-actions { margin-top:16px; }
}
@media (max-width:480px) {
  .g-hero-actions .g-faces { gap:10px; font-size:16px; }
  .g-faces-row img { width:42px; height:42px; margin-left:-10px; }
}
@media (max-width:639px) {
  .g-crew { grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px 12px; }
  .g-port { border-radius:var(--qp-radius-sm); box-shadow:var(--qp-sticker-sm); }
  .g-crew .g-cap-title { font-size:18px; }
  .g-crew .g-cap-text { line-height:1.3; }

  .g-bento { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 12px; }
  .g-bento > :first-child { grid-column:1 / -1; grid-row:auto; }
  .g-bento > :first-child .g-shot img { position:static; height:auto; }
  .g-bento > :nth-child(n+2) .g-shot, .g-duo > :nth-child(2) .g-shot, .g-duo > :nth-child(3) .g-shot { border-radius:var(--qp-radius-sm); box-shadow:var(--qp-sticker-sm); }
  .g-bento > :nth-child(n+2) .g-cap, .g-duo > :nth-child(2) .g-cap, .g-duo > :nth-child(3) .g-cap, .g-crew .g-cap { padding-top:9px; }
  .g-bento > :nth-child(n+2) .g-cap-title, .g-duo > :nth-child(2) .g-cap-title, .g-duo > :nth-child(3) .g-cap-title { font-size:16px; }

  .g-duo { gap:18px 12px; }
  .g-duo > :first-child, .g-duo > :last-child { grid-column:1 / -1; }

  .g-models { grid-template-columns:minmax(0,1fr); gap:18px; }
  .g-cta-actions { width:100%; }
  .g-cta-actions .qp-btn { width:100%; text-align:center; }
  .g-cap { font-size:14px; }
  .g-jump-label { display:none; }
  .g-jump a { padding-inline:7px; font-size:15px; gap:5px; }
  .g-jump-list { gap:2px; justify-content:space-between; }
  html { scroll-padding-top:calc(var(--qp-header-h) + 61px); }
  .g-section { scroll-margin-top:-20px; }
  .g-section--flush { scroll-margin-top:0; }
}
@media (max-width:389px) { .g-jump .qp-icon { display:none; } }
@media (max-width:360px) {
  .g-jump-list { gap:2px; }
  .g-jump a { padding-inline:6px; }
  .g-faces-row img { width:34px; height:34px; margin-left:-8px; }
}
@media (max-height:520px) { .g-jump { position:static; } html { scroll-padding-top:calc(var(--qp-header-h) + 12px); } }

/* ---------- lightbox ---------- */
.g-lb { width:100vw; height:100vh; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; overflow:hidden; background:transparent; color:var(--qp-paper); }
.g-lb[open] { display:grid; grid-template-rows:auto minmax(0,1fr) auto; }
.g-lb::backdrop { background:var(--qp-night); }
.g-lb-top { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px clamp(12px,2vw,24px) 6px; }
.g-lb-count { margin:0; font-weight:800; font-size:15px; color:var(--qp-border); }
.g-lb-stage { position:relative; min-height:0; display:flex; align-items:center; justify-content:center; padding:4px clamp(10px,2vw,24px); touch-action:pan-y pinch-zoom; }
.g-lb-img { display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; border:3px solid var(--qp-paper); border-radius:var(--qp-radius-sm); background:var(--qp-night-surface); }
.g-lb-img.is-cut { background:var(--qp-sky); }
.g-lb-img.is-soft { filter:blur(6px); }
.g-lb-loading, .g-lb-error { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); margin:0; padding:10px 16px; display:flex; align-items:center; gap:10px;
  background:var(--qp-night); border:2px solid var(--qp-paper); border-radius:12px; font-weight:800; font-size:15px; white-space:nowrap; }
.g-lb-loading[hidden], .g-lb-error[hidden] { display:none; }
.g-lb-spin { width:18px; height:18px; border-radius:50%; border:3px solid var(--qp-night-surface); border-top-color:var(--qp-yellow); animation:g-spin .8s linear infinite; }
@keyframes g-spin { to { transform:rotate(360deg); } }
.g-lb-bottom { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:clamp(10px,2vw,24px); padding:10px clamp(12px,2vw,24px) max(14px,env(safe-area-inset-bottom)); max-width:1100px; width:100%; margin-inline:auto; }
.g-lb-cap { min-width:0; text-align:center; }
.g-lb-cap p { margin:0; }
.g-lb-title { font-family:var(--qp-font-display); font-size:clamp(20px,2vw,26px); line-height:1.15; }
.g-lb-text { margin-top:3px !important; font-size:16px; line-height:1.4; color:var(--qp-border); }
.g-lb-meta { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px 14px; margin-top:7px !important; }
.g-lb-btn { flex:none; width:52px; height:52px; padding:0; display:grid; place-items:center; cursor:pointer; color:var(--qp-ink); background:var(--qp-paper);
  border:var(--qp-stroke); border-radius:14px; box-shadow:0 4px 0 var(--qp-orange); transition:transform .12s ease; }
.g-lb-btn:hover { background:var(--qp-yellow); }
.g-lb-btn:active { transform:translateY(3px); }
.g-lb :focus-visible { outline:3px solid var(--qp-yellow); outline-offset:3px; }
.g-lb-btn .qp-icon { width:24px; height:24px; }
.g-lb-prev .qp-icon { transform:rotate(-90deg); }
.g-lb-next .qp-icon { transform:rotate(90deg); }
.g-lb-close { width:46px; height:46px; }
@media (max-width:699px) {
  .g-lb-bottom { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px 12px; }
  .g-lb-prev, .g-lb-next { width:100%; }
  .g-lb-cap { grid-column:1 / -1; grid-row:1; text-align:left; }
  .g-lb-meta { justify-content:flex-start; }
  .g-lb-text { font-size:15px; }
}

@media (prefers-reduced-motion:reduce) {
  .g-shot:hover, .g-hero-art .g-shot:hover { transform:none; }
  .g-shot:hover img { transform:none; }
  .g-lb-img.is-soft { filter:none; }
  .g-lb-spin { display:none; }
}