/* The gallery of trades: the landing page's shelf of kinds, opened out. Each kind of business is a band: its own glass object and its
   name at the left, staying in view, and its trades at the right as panes of glass, each with its own line of stages from its pack.
   Loaded after trade.css, on the gallery only. */
.g-hero{min-height:min(70svh,640px);padding-bottom:0}
.g-hero h1{max-width:11ch;font-size:clamp(2.9rem,5.6vw,5.8rem)}
.g-hero .h-art{aspect-ratio:auto;height:min(56svh,500px)}   /* a shorter first screen, so the shelf of kinds is in it */
.g-rail{padding-bottom:26px}
.g-rail .k-tile{height:112px}

.g-kinds{background:#fff}   /* white, as the pictures are made on white and lose their edge only on it */
.g-kind{display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr);align-items:start;gap:clamp(20px,3.4vw,60px);width:min(100% - 64px,1400px);margin-inline:auto;padding:clamp(44px,5.4vw,84px) 0}
.g-kind + .g-kind{border-top:1px solid rgba(14,18,28,.08)}
.g-side{position:sticky;top:calc(var(--top) + 40px)}
.g-side .k-art{height:230px;margin:-14px 0 6px -34px}
.g-side h2{margin-top:12px;font-size:clamp(2.1rem,3.2vw,3.1rem);font-weight:600;line-height:1;letter-spacing:-.04em;text-wrap:balance}
.g-side .k-say{margin-top:12px;font-size:17px}
.g-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:14px}

/* a trade: a pane of glass. Its name, its own line, and its stages as a line of lit glass, first to last. */
.g-tile{position:relative;display:flex;flex-direction:column;gap:9px;min-height:214px;padding:20px 20px 18px;border-radius:24px;overflow:hidden;color:var(--ink);text-decoration:none;
  background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(255,255,255,.55) 46%),linear-gradient(180deg,#fff,#f4f5f8);
  box-shadow:0 0 0 1px rgba(14,18,28,.08),inset 0 1px 0 #fff,inset 0 -18px 26px -22px rgba(22,30,48,.25),0 26px 40px -30px rgba(22,30,48,.5);
  animation:rise-in .6s var(--ease) both;animation-delay:calc(var(--i) * 40ms);transition:translate .35s var(--ease),box-shadow .45s}
.g-tile b{padding-right:38px;font-size:21px;font-weight:600;line-height:1.1;letter-spacing:-.026em;text-wrap:balance}
.g-tile > span:not(.g-strip){color:var(--ink-2);font-size:14.5px;line-height:1.4}
.g-tile::after{content:"\203A";position:absolute;right:16px;top:16px;display:grid;place-items:center;width:30px;height:30px;padding-bottom:2px;border-radius:50%;background:var(--steel);box-shadow:inset 0 0 0 1px rgba(14,18,28,.14),inset 0 2px 3px rgba(255,255,255,.8);font-size:19px;line-height:1;transition:background-color .3s,box-shadow .3s,translate .35s var(--ease)}
.g-strip{display:flex;gap:4px;min-height:9px;margin-top:auto;padding-top:6px}
.g-strip i{flex:1 1 0;max-width:40px;height:9px;border-radius:9px;background:linear-gradient(180deg,color-mix(in oklch,var(--hue) 70%,#fff),var(--hue));box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 4px 8px -4px var(--hue);animation:g-bead .5s var(--spring) both;animation-delay:calc(var(--i) * 40ms)}
@keyframes g-bead{from{opacity:0;scale:0 1}}
.g-tile small{min-height:18px;color:var(--soft);font-size:13px;line-height:1.35}
@media (hover:hover) and (pointer:fine){
  .g-tile:hover{translate:0 -4px;box-shadow:0 0 0 2.5px var(--accent),0 0 0 3.5px rgba(63,107,0,.32),inset 0 1px 0 #fff,0 0 44px -8px color-mix(in srgb,var(--accent) 80%,transparent),0 26px 40px -30px rgba(22,30,48,.5)}
  .g-tile:hover::after{translate:3px 0;background:linear-gradient(135deg,rgba(255,255,255,.55),transparent 46%),var(--accent);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 0 0 1px rgba(63,107,0,.4),0 0 14px -2px var(--accent)}
}
.g-tile:active{scale:.985}
.g-tile:focus-visible{outline:2px solid var(--ink);outline-offset:4px}

@media (max-width:899px){
  .g-hero{min-height:0}
  .g-hero h1{font-size:clamp(2.6rem,12vw,3.7rem)}
  .g-kind{grid-template-columns:minmax(0,1fr);width:calc(100% - 32px);gap:18px;padding:36px 0}
  .g-side{position:static}
  .g-side .k-art{height:200px;margin:0 -16px}
  .g-tiles{grid-template-columns:minmax(0,1fr)}
  .g-tile{min-height:0}
}
@media (prefers-reduced-motion:reduce){.g-tile,.g-strip i{animation:none}}