/* ============================================================================
   DALC — graphic design archive (work-graphic-design.html, "Selected work")
   Modelled on indevelopment.studio/archive: a dark list of very large client
   names with a discipline column and stacked tags, filter pills that re-flow
   the rows, and a preview that follows the cursor over the list.

   Default styles are the finished static list (no JS). gd-archive.js adds
   .is-live; the cursor preview only runs on a fine pointer wider than 991px
   without reduced motion — everywhere else each row shows its own thumbnail.
   ========================================================================== */
.ga{--ga-bg:#141414;--ga-ink:#FAF7F2;--ga-dim:rgba(250,247,242,.56);--ga-line:rgba(250,247,242,.14);
    --ga-ease:cubic-bezier(.65,0,.35,1);
    background:var(--ga-bg);color:var(--ga-ink);margin:0 0 40px}
.ga-in{max-width:1440px;margin:0 auto;padding:clamp(56px,7vw,110px) 48px clamp(70px,9vw,140px)}

/* ── filter row ───────────────────────────────────────────────────────── */
.ga-top{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
    margin-bottom:clamp(36px,5vw,64px)}
.ga-filters{display:flex;flex-wrap:wrap;gap:8px}
.ga-pill{font:inherit;font-size:14px;font-weight:600;color:var(--ga-ink);background:none;cursor:pointer;
    padding:9px 18px 9px 16px;border-radius:999px;border:1px solid var(--ga-line);
    transition:background .3s,color .3s,border-color .3s}
.ga-pill sup{margin-left:4px;font-size:10px;font-weight:700;color:var(--ga-dim);transition:color .3s}
.ga-pill:hover{border-color:rgba(250,247,242,.5)}
.ga-pill.on{background:var(--ga-ink);color:var(--ga-bg);border-color:var(--ga-ink)}
.ga-pill.on sup{color:#1FA396}
.ga-pill:focus-visible{outline:2px solid #1FA396;outline-offset:3px}
.ga-note{margin:0;font-size:13px;color:var(--ga-dim)}

/* ── list ─────────────────────────────────────────────────────────────── */
.ga-cols,.ga-row{display:grid;grid-template-columns:minmax(0,1fr) 190px 250px;column-gap:32px}
.ga-link{display:contents;color:inherit;text-decoration:none}
.ga-cols{padding-bottom:14px;border-bottom:1px solid var(--ga-line);font-size:12px;font-weight:700;
    letter-spacing:.1em;text-transform:uppercase;color:var(--ga-dim)}
.ga-list{list-style:none;margin:0;padding:0}
.ga-row{position:relative;align-items:start;padding:22px 0 24px;border-bottom:1px solid var(--ga-line);
    cursor:pointer;transition:opacity .45s var(--ga-ease),transform .7s var(--ga-ease)}
.ga-thumb{display:none}
.ga-name{font-family:var(--font-heading);font-weight:400;font-size:clamp(40px,4.6vw,68px);
    line-height:.9;letter-spacing:-.02em;padding-top:4px;
    transition:transform .5s var(--ga-ease),color .3s}
.ga-cat{display:flex;flex-direction:column;gap:4px;padding-top:8px;font-size:15px;font-weight:600}
.ga-cat small{font-size:13px;font-weight:500;color:var(--ga-dim)}
.ga-tags{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding-top:8px}
.ga-desc{margin-bottom:4px;font-size:13px;line-height:1.35;color:var(--ga-dim)}
.ga-tag{font-size:15px;font-weight:600;color:var(--ga-ink);text-decoration:none;
    background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;
    transition:background-size .35s var(--ga-ease),color .3s}
.ga-tag:hover,.ga-tag:focus-visible{background-size:100% 1px;color:#1FA396;outline:none}
.ga-link:focus-visible .ga-name{color:#1FA396}
.ga-tag.ga-case{margin-top:6px;color:#1FA396}

/* hover: the row under the pointer stays bright, the others step back */
@media (hover:hover){
  .ga-list:hover .ga-row{opacity:.38}
  .ga-list:hover .ga-row:hover{opacity:1}
  .ga-row:hover .ga-name{transform:translateX(14px);color:#fff}
}

/* ── motion states (JS) ───────────────────────────────────────────────── */
.ga.is-live .ga-row.rv{opacity:0;transform:translateY(24px)}
.ga.is-live .ga-row.rv.in{opacity:1;transform:none}
.ga.is-live .ga-row.out,.ga.is-live .ga-row.pre{opacity:0!important;transform:translateY(10px);transition-duration:.35s}
.ga-row[hidden]{display:none}

/* ── cursor preview ───────────────────────────────────────────────────── */
.ga-prev{position:fixed;left:0;top:0;z-index:40;width:clamp(230px,19vw,300px);aspect-ratio:4/5;
    pointer-events:none;border-radius:6px;overflow:hidden;background:#222;
    box-shadow:0 30px 70px rgba(0,0,0,.55);opacity:0;scale:.86;
    transition:opacity .22s ease,scale .3s cubic-bezier(.22,1,.36,1);will-change:transform}
.ga-prev.show{opacity:1;scale:1}
.ga-prev img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    opacity:0;scale:1.03;transition:opacity .22s ease,scale .22s cubic-bezier(.22,1,.36,1)}
.ga-prev img.on{opacity:1;scale:1}
.ga-prev img.gone{opacity:0;scale:1;transition:opacity .16s ease}
.ga-prev-cap{position:absolute;left:10px;right:10px;bottom:10px;z-index:2;display:flex;
    justify-content:space-between;gap:8px;padding:6px 10px;border-radius:4px;
    background:rgba(20,20,20,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    color:#FAF7F2;font-size:11.5px;font-weight:600;letter-spacing:.04em}
.ga-prev-cap i{font-style:normal;color:rgba(250,247,242,.6)}
.ga-prev-bar{position:absolute;left:0;top:0;height:3px;background:#1FA396;z-index:2;width:0}
.ga-prev.show .ga-prev-bar.run{width:100%;transition:width linear var(--ga-cycle,1.4s)}

/* ── thumbnail layout: touch, narrow, reduced motion ─────────────────── */
@media (max-width:991px),(hover:none),(prefers-reduced-motion:reduce){
  .ga-prev{display:none}
  .ga-row{grid-template-columns:88px minmax(0,1fr);column-gap:18px;row-gap:10px;padding:18px 0}
  .ga-cols{display:none}
  .ga-thumb{display:block;grid-row:span 3;width:88px;aspect-ratio:1;border-radius:6px;overflow:hidden;background:#FAF7F2}
  /* the logo cards are 4:5 with the mark centred: a square crop only trims cream */
  .ga-thumb img{width:100%;height:100%;object-fit:cover;scale:1.25}
  .ga-name{font-size:clamp(30px,7vw,46px);padding-top:2px}
  .ga-cat{padding-top:0;flex-direction:row;flex-wrap:wrap;gap:4px 10px;font-size:13.5px}
  .ga-tags{grid-column:2;padding-top:0;flex-direction:row;flex-wrap:wrap;gap:4px 14px}
  .ga-desc{flex-basis:100%;margin:0}
  .ga-list:hover .ga-row{opacity:1}
  .ga-row:hover .ga-name{transform:none}
}
@media (max-width:900px){ .ga-in{padding-left:22px;padding-right:22px} }
@media (max-width:520px){
  .ga-row{grid-template-columns:64px minmax(0,1fr);column-gap:14px}
  .ga-thumb{width:64px}
  .ga-note{display:none}
}
@media (prefers-reduced-motion:reduce){
  .ga-row,.ga-name,.ga-tag,.ga-pill{transition:none}
  .ga.is-live .ga-row.rv,.ga.is-live .ga-row.out,.ga.is-live .ga-row.pre{opacity:1!important;transform:none}
}