/* My stack: a compact grid of pencil-sketched tool marks; the name appears as a tooltip.
   Mobile first: 5 per row, 7 on tablets, 10 on desktop. */
.about-stack{position:relative;max-width:1420px;margin:auto;padding:44px 20px 12px;color:var(--site-ink,#1e2a2d);font-family:var(--font-ui,'RagInter',Inter,Arial,sans-serif);--stack-ink:var(--site-ink,#1e2a2d)}
.about-stack-title{margin:0;font-size:26px;line-height:1.2;font-weight:500;letter-spacing:-.02em;color:var(--site-ink,#1e2a2d)}
.stack-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px 6px;margin:22px 0 0;padding:0;list-style:none}
.stack-grid>li{display:flex;justify-content:center}
.stack-item{position:relative;display:grid;place-items:center;width:56px;height:56px;padding:0;border:0;border-radius:12px;background:transparent;color:var(--stack-ink);cursor:default;-webkit-tap-highlight-color:transparent;opacity:0;translate:0 6px;transition:opacity .45s ease calc(var(--i)*40ms),translate .45s ease calc(var(--i)*40ms),background .2s}
.is-drawn .stack-item{opacity:1;translate:0 0}
.stack-item:hover,.stack-item:focus-visible,.stack-item.is-tipped{background:var(--site-accent-soft,#e1ece8)}
.stack-item:focus-visible{outline:2px solid var(--site-focus,#216c83);outline-offset:2px}
/* Pencil outline with a faint offset echo and paper grain. */
.stack-icon{width:34px;height:34px;overflow:visible;filter:url(#stack-pencil);transition:rotate .3s ease,scale .3s ease}
.stack-icon path{fill:var(--stack-ink);fill-opacity:.08;stroke:var(--stack-ink);stroke-width:.55;stroke-linejoin:round;transition:fill-opacity .3s}
.stack-icon .stack-echo{fill:none;stroke-width:.35;opacity:.3;translate:.45px .35px}
.stack-icon .stack-ink{stroke-dasharray:1;stroke-dashoffset:1}
.is-drawn .stack-icon .stack-ink{stroke-dashoffset:0;transition:stroke-dashoffset 1.3s cubic-bezier(.45,.05,.25,1) calc(var(--i)*60ms + .1s)}
.stack-item:is(:hover,:focus-visible,.is-tipped) .stack-icon{rotate:-6deg;scale:1.08}
.stack-item:is(:hover,:focus-visible,.is-tipped) .stack-icon path{fill-opacity:.28}
/* Lettered marks for tools whose logos are not published for reuse. */
.stack-letter{position:relative;display:inline-block;font:600 17px/1 var(--font-action,'Afacad','RagInter',sans-serif);letter-spacing:-.01em;color:var(--stack-ink)}
.stack-letter.is-long{font-size:13px}
.stack-letter>svg{position:absolute;left:-2px;bottom:-6px;width:calc(100% + 4px);height:7px;overflow:visible}
.stack-letter path{fill:none;stroke:var(--site-accent,#335d65);stroke-width:1.3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.is-drawn .stack-letter path{stroke-dashoffset:0;transition:stroke-dashoffset .9s ease calc(var(--i)*60ms + .3s)}
/* Tooltip: a small sketched label above the mark, kept inside the viewport by --tip-shift. */
.stack-item::after{content:attr(data-name);position:absolute;left:50%;bottom:calc(100% + 8px);z-index:5;padding:5px 10px;border:1.3px solid var(--stack-ink);border-radius:5px 10px 6px 9px;background:var(--site-surface,#fff);box-shadow:2px 2px 0 var(--site-line,#cbd4d0);color:var(--stack-ink);font:500 13px/1.2 var(--font-ui,'RagInter',sans-serif);white-space:nowrap;pointer-events:none;opacity:0;translate:calc(-50% + var(--tip-shift,0px)) 4px;transition:opacity .18s ease,translate .18s ease}
.stack-item:is(:hover,:focus-visible,.is-tipped)::after{opacity:1;translate:calc(-50% + var(--tip-shift,0px)) 0}
:root[data-style="sketch"] .stack-item:is(:hover,:focus-visible,.is-tipped){background:var(--site-yellow)}
@media(min-width:600px){.stack-grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:22px 10px}}
@media(min-width:961px){
  .about-stack{padding:64px max(24px,4vw) 16px}
  .about-stack-title{font-size:32px}
  .stack-grid{grid-template-columns:repeat(10,minmax(0,1fr));gap:30px 12px;margin-top:28px}
  .stack-grid>li{justify-content:flex-start}
  .stack-item{width:64px;height:64px}
  .stack-icon{width:40px;height:40px}
  .stack-letter{font-size:19px}.stack-letter.is-long{font-size:15px}
}
@media(prefers-reduced-motion:reduce){.stack-item,.stack-icon,.stack-icon .stack-ink,.stack-letter path,.stack-item::after{transition:none!important}}