/* Black Lion Digital · "The hallmark" v3 · work.html only.
   Shared tokens, nav, menu, cover grammar, buttons and the audit band are main.css's.
   Here: the cover's reel (frames of built sites passing on three shelves in the dark, the one in front lit gold) and the
   project grid (one framed after capture per site, each a link to the live site). The before/after band and the shelf were
   on this page for one round (27 Oct, first build) and came off at Jack's call the same day: "just one project grid of
   after captures and then visit the site". */

/* ---------- 01 cover: the reel. Three shelves of frames pass right to left in the dark; the frame in front of the reader is gold ---------- */
.cover--work{background:#070707}
.cover__reel{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.8s ease}
.cover__reel.is-on{opacity:1}
.cover__reelFallback{position:absolute;inset:-6%;width:112%;height:112%;opacity:.9;transition:opacity 1.2s ease}
.cover__reelRow{animation:reelRow var(--d,60s) linear infinite}
.cover__reelRow--2{--d:84s}
.cover__reelRow--3{--d:110s}
.cover__reelGold{animation:reelGold 6s var(--io) infinite alternate}
@keyframes reelRow{from{transform:translateX(0)}to{transform:translateX(-640px)}}
@keyframes reelGold{from{opacity:.35}to{opacity:1}}
.cover.is-reel .cover__reelFallback{opacity:0}
.cover--work .cover__wash{background:linear-gradient(180deg,rgba(7,7,7,.5) 0%,rgba(7,7,7,0) 24%,rgba(7,7,7,0) 50%,rgba(7,7,7,.9) 100%),linear-gradient(90deg,rgba(7,7,7,.66) 0%,rgba(7,7,7,.1) 46%,rgba(7,7,7,0) 60%)}
@media (max-width:900px){.cover__reel{display:none}.cover__reelFallback{opacity:.55}.cover__reelGold{display:none}}
@media (prefers-reduced-motion:reduce){.cover__reelRow,.cover__reelGold{animation:none}}
.cover__actions{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- 02 the projects: a grid of framed after captures, three across, every tile the same size (Jack, notes 46 and 47:
     "these all be even sizing", "I do prefer the three-grid approach"); each tile is one link to the live site in a new tab,
     sitting on its own plate (note 48: a touch less radius, shading so it pops) ---------- */
.projects{position:relative;background:var(--black);color:#fff;padding:clamp(80px,10vh,130px) 0 var(--section)}
.projects__head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:40px;margin-bottom:clamp(40px,6vh,72px)}
.projects__sub{color:rgba(255,255,255,.66);max-width:36ch;padding-bottom:10px;font-size:15px;font-weight:300}
.projects__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,2.6vw,36px) clamp(18px,2.2vw,30px);list-style:none;margin:0;padding:0}
.project{margin:0;min-width:0}
.project__link{display:block;height:100%;color:inherit;outline:none}
.project__fig{position:relative;margin:0;height:100%;padding:12px 12px 16px;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.075) 0%,rgba(255,255,255,.035) 60%,rgba(255,255,255,.02) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 1px rgba(255,255,255,.07),0 30px 60px -30px rgba(0,0,0,.9);transition:transform .6s var(--ease),box-shadow .6s,background .6s}
.project__frame{position:relative;aspect-ratio:1200/750;border-radius:10px;overflow:hidden;background:#161412;box-shadow:0 18px 40px -18px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.6)}
.project__frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .9s var(--ease)}
.project__link:hover .project__fig,.project__link:focus-visible .project__fig{transform:translateY(-6px);background:linear-gradient(180deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,.05) 60%,rgba(255,255,255,.03) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px rgba(227,186,28,.5),0 44px 80px -34px rgba(0,0,0,.95)}
.project__link:hover .project__frame img{transform:scale(1.03)}
.project__link:focus-visible .project__fig{outline:3px solid var(--gold);outline-offset:4px}
/* the client's mark, when we have one, sits bottom-right of the frame on a dark chip; tiles without one show nothing there */
.project__logo{position:absolute;right:12px;bottom:12px;z-index:2;display:flex;align-items:center;justify-content:center;height:40px;max-width:46%;padding:8px 12px;border-radius:9px;background:rgba(11,11,11,.78);box-shadow:0 0 0 1px rgba(255,255,255,.12),0 10px 24px -10px rgba(0,0,0,.9);backdrop-filter:blur(6px)}
.project__logo img{display:block;height:100%;width:auto;max-width:100%;object-fit:contain}
/* a mark drawn dark on transparent (or on a baked white box) gets the cream chip instead, so it still reads */
.project__logo--light{background:rgba(243,238,228,.94);box-shadow:0 0 0 1px rgba(0,0,0,.18),0 10px 24px -10px rgba(0,0,0,.9)}
/* the plate's texture (note 52): a faint dot lattice under everything, fading out towards the caption; frame and caption sit above it */
.project__fig::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1.3px);background-size:14px 14px;background-position:7px 7px;opacity:.55;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,1) 0%,rgba(0,0,0,.35) 70%,rgba(0,0,0,.15) 100%);mask-image:linear-gradient(180deg,rgba(0,0,0,1) 0%,rgba(0,0,0,.35) 70%,rgba(0,0,0,.15) 100%)}
.project__frame,.project__cap{position:relative;z-index:1}
.project__cap{display:grid;grid-template-columns:1fr auto;gap:6px 16px;align-items:start;margin-top:14px;padding:0 4px}
.project__link:hover .project__fig .project__cap strong{color:var(--gold)}
.project__cap strong{grid-column:1;font-weight:800;font-size:clamp(16px,1.25vw,19px);letter-spacing:-.02em;color:#fff;line-height:1.2}
/* note 50: the service line and the industry are two badges, the industry one gold */
.project__tags{grid-column:1;display:flex;flex-wrap:wrap;gap:6px}
.project__tags i{font-style:normal;font-size:10px;line-height:1;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.66);padding:6px 9px 5px;border-radius:999px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.13)}
.project__tags i:last-child{color:var(--gold);background:rgba(227,186,28,.09);box-shadow:inset 0 0 0 1px rgba(227,186,28,.32)}
.project__cap em{grid-column:2;grid-row:1/3;align-self:start;margin-top:4px;font-style:normal;display:inline-flex;align-items:center;gap:7px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--gold);white-space:nowrap}
/* note 51: an outward arrow (the link opens a new tab), not the page chevron */
.project__arrow{width:12px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .45s var(--ease)}
.project__link:hover .project__arrow,.project__link:focus-visible .project__arrow{transform:translate(2px,-2px)}
.projects__foot{margin-top:clamp(40px,6vh,72px);color:rgba(255,255,255,.55);font-size:13px;font-weight:300;max-width:60ch}

/* 03 the audit is the homepage's band, form included: main.css carries it, nothing here */

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .projects__head{grid-template-columns:1fr}
  .projects__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .projects__grid{grid-template-columns:1fr}
  .project__cap{grid-template-columns:1fr}
  .project__cap em{grid-column:1;grid-row:auto;margin-top:6px}
  .project__frame{border-radius:8px}
  .project__fig{padding:10px 10px 14px;border-radius:14px}
  .cover__actions{width:100%}
}