/* ============================================================================
   RUDQP, work-grid concepts  (grids.css)  — pairs with light.css
   Six attractive, animated layouts for the homepage "work" showcase.
   Each is namespaced g1..g6 so they can coexist on the chooser page.
   ========================================================================== */

/* shared bits */
.gwrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
@media(max-width:600px){.gwrap{padding:0 18px}}
.gcap{position:absolute;left:0;right:0;bottom:0;padding:18px 20px;z-index:2;
  background:linear-gradient(to top,rgba(20,16,14,.82),rgba(20,16,14,.05) 70%,transparent)}
.gcap .k{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#fff;opacity:.85}
.gcap h3{font-family:var(--display);color:#fff;font-size:clamp(20px,2vw,26px);font-weight:600;line-height:1.05;margin-top:3px}
.gcap .go{display:inline-block;margin-top:8px;font-size:12px;font-weight:700;color:#fff;
  opacity:0;transform:translateY(8px);transition:.35s var(--ease)}
.gtile:hover .gcap .go,.gtile:focus-visible .gcap .go{opacity:1;transform:none}
.gtile{position:relative;display:block;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--blush)}
.gtile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s var(--ease)}
.gtile:hover img,.gtile:focus-visible img{transform:scale(1.07)}

/* ---- G1: BENTO MOSAIC --------------------------------------------------- */
.g1{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:14px}
.g1 .gtile{grid-column:span 1;grid-row:span 1}
.g1 .gtile:nth-child(1){grid-column:span 2;grid-row:span 2}
.g1 .gtile:nth-child(4){grid-row:span 2}
.g1 .gtile:nth-child(6){grid-column:span 2}
@media(max-width:880px){.g1{grid-template-columns:repeat(2,1fr);grid-auto-rows:180px}
  .g1 .gtile:nth-child(1){grid-column:span 2}.g1 .gtile:nth-child(4){grid-row:span 1}.g1 .gtile:nth-child(6){grid-column:span 2}}
@media(max-width:520px){.g1{grid-template-columns:1fr;grid-auto-rows:220px}.g1 .gtile{grid-column:span 1!important}}

/* ---- G2: EXPANDING ACCORDION ------------------------------------------- */
.g2{display:flex;gap:12px;height:460px}
.g2 .gtile{flex:1;transition:flex .55s var(--ease);min-width:0}
.g2 .gtile:hover{flex:3.2}
.g2 .gcap h3{writing-mode:vertical-rl;transform:rotate(180deg);transition:.4s}
.g2 .gtile:hover .gcap h3{writing-mode:horizontal-tb;transform:none}
.g2 .gcap{background:linear-gradient(to top,rgba(20,16,14,.8),transparent 60%)}
@media(max-width:880px){.g2{flex-direction:column;height:auto}.g2 .gtile{height:200px}.g2 .gtile:hover{flex:1}
  .g2 .gcap h3{writing-mode:horizontal-tb;transform:none}}

/* ---- G3: AUTO-SCROLL MARQUEE ------------------------------------------- */
.g3{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.g3__track{display:flex;gap:16px;width:max-content;animation:g3move 36s linear infinite}
.g3:hover .g3__track{animation-play-state:paused}
.g3 .gtile{width:300px;height:380px;flex:0 0 auto}
@keyframes g3move{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.g3__track{animation:none}.g3{overflow-x:auto}}

/* ---- G4: TILTED POLAROID SCATTER --------------------------------------- */
.g4{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 20px;padding-top:10px}
.g4 .gtile{background:#fff;padding:12px 12px 0;border-radius:14px;border:1px solid var(--line);
  box-shadow:0 14px 34px -22px rgba(33,30,26,.5);transition:transform .5s var(--ease),box-shadow .5s}
.g4 .gtile .ph{border-radius:8px;overflow:hidden;aspect-ratio:4/5}
.g4 .gtile:nth-child(odd){transform:rotate(-2.2deg)}
.g4 .gtile:nth-child(even){transform:rotate(1.8deg)}
.g4 .gtile:nth-child(3n){transform:rotate(2.6deg)}
.g4 .gtile:hover{transform:rotate(0) translateY(-6px);box-shadow:0 26px 50px -24px rgba(33,30,26,.55)}
.g4 .lbl{padding:12px 4px 16px;font-family:var(--display);font-size:19px;display:flex;justify-content:space-between;align-items:center}
.g4 .lbl small{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:700}
@media(max-width:880px){.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.g4{grid-template-columns:1fr}.g4 .gtile{transform:none!important}}

/* ---- G5: INTERACTIVE SPLIT SHOWCASE ------------------------------------ */
.g5{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:stretch}
.g5__stage{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:460px;background:var(--sage)}
.g5__stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s var(--ease),transform 6s var(--ease)}
.g5__stage img.on{opacity:1;transform:scale(1.06)}
.g5__list{display:flex;flex-direction:column;justify-content:center;gap:4px}
.g5__item{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 8px;border-bottom:1px solid var(--line);
  cursor:pointer;background:none;border-left:0;border-right:0;border-top:0;text-align:left;width:100%;font:inherit;color:var(--ink);transition:.3s}
.g5__item .n{font-size:12px;color:var(--accent);font-weight:700;letter-spacing:.1em}
.g5__item h3{font-family:var(--display);font-size:clamp(22px,2.4vw,30px);font-weight:500;transition:.3s}
.g5__item .a{opacity:0;transform:translateX(-8px);transition:.3s;font-weight:700}
.g5__item:hover h3,.g5__item.on h3{color:var(--accent);padding-left:6px}
.g5__item.on .a,.g5__item:hover .a{opacity:1;transform:none}
@media(max-width:880px){.g5{grid-template-columns:1fr}.g5__stage{min-height:320px;order:-1}}

/* ---- G6: HOVER COLOR-WASH GRID ----------------------------------------- */
.g6{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.g6 .gtile{aspect-ratio:4/5}
.g6 .gtile img{filter:grayscale(.5) contrast(1.02);transition:filter .6s var(--ease),transform 1s var(--ease)}
.g6 .gtile:hover img{filter:grayscale(0)}
.g6 .gtile::before{content:"";position:absolute;inset:0;z-index:1;background:var(--wash,var(--accent));mix-blend-mode:multiply;
  opacity:0;transition:opacity .5s var(--ease)}
.g6 .gtile:hover::before{opacity:.16}
.g6 .gtile:nth-child(1){--wash:var(--accent-soft)}.g6 .gtile:nth-child(2){--wash:#7FB3D5}
.g6 .gtile:nth-child(3){--wash:#C9A227}.g6 .gtile:nth-child(4){--wash:#88B04B}
.g6 .gtile:nth-child(5){--wash:#9B7EDE}.g6 .gtile:nth-child(6){--wash:#E08AAE}
.g6 .gnum{position:absolute;top:12px;left:14px;z-index:2;font-family:var(--display);font-size:30px;color:#fff;
  opacity:.0;transform:translateY(-6px);transition:.4s}
.g6 .gtile:hover .gnum{opacity:.95;transform:none}
@media(max-width:880px){.g6{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.g6{grid-template-columns:1fr}}

/* chooser page section frame */
.gopt{padding:48px 0;border-top:1px solid var(--line)}
.gopt__head{display:flex;flex-wrap:wrap;gap:12px;align-items:baseline;justify-content:space-between;margin-bottom:26px}
.gopt__head .num{font-family:var(--display);font-size:clamp(28px,4vw,46px);color:var(--accent)}
.gopt__head .nm{font-family:var(--display);font-size:clamp(20px,2.2vw,26px)}
.gopt__head .ds{color:var(--muted);font-size:14px;max-width:46ch}