/* ============================================================
   Playground / Independent — shared by home (index*.html) and subpages.
   Link tiles on home, accordions + project cards on subpages.
   Expects the page tokens (--ink, --line, --turquoise-deep, ...).
   ============================================================ */

/* icon backgrounds (right-aligned, subtle) */
.ico{position:relative;overflow:hidden}
.ico::before{content:"";position:absolute;right:16px;bottom:12px;width:56px;height:56px;background:no-repeat center/contain;opacity:.22;pointer-events:none}
.ico-ai::before{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%230E6E77%22 stroke-width=%221.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9z%22/%3E%3Cpath d=%22M19 3v4M17 5h4M5 17v4M3 19h4%22/%3E%3C/svg%3E")}
.ico-vibe::before{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%230E6E77%22 stroke-width=%221.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M8 6l-6 6 6 6M16 6l6 6-6 6M14 4l-4 16%22/%3E%3C/svg%3E")}
.ico-apps::before{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%230E6E77%22 stroke-width=%221.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%227%22 y=%222%22 width=%2210%22 height=%2220%22 rx=%222.5%22/%3E%3Cpath d=%22M11 18h2%22/%3E%3Crect x=%229.5%22 y=%226%22 width=%222.2%22 height=%222.2%22 rx=%22.5%22/%3E%3Crect x=%2212.3%22 y=%226%22 width=%222.2%22 height=%222.2%22 rx=%22.5%22/%3E%3Crect x=%229.5%22 y=%229%22 width=%222.2%22 height=%222.2%22 rx=%22.5%22/%3E%3Crect x=%2212.3%22 y=%229%22 width=%222.2%22 height=%222.2%22 rx=%22.5%22/%3E%3C/svg%3E")}
.ico-proto::before{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%230E6E77%22 stroke-width=%221.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%222%22 y=%224%22 width=%2217%22 height=%2214%22 rx=%222%22/%3E%3Cpath d=%22M2 8.5h17%22/%3E%3Cpath d=%22M12 11.5l7 3-3 1.2-1.2 3z%22/%3E%3C/svg%3E")}
.ico-auto::before{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%230E6E77%22 stroke-width=%221.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%223%22 width=%226%22 height=%226%22 rx=%221.5%22/%3E%3Crect x=%2215%22 y=%2215%22 width=%226%22 height=%226%22 rx=%221.5%22/%3E%3Ccircle cx=%2218%22 cy=%226%22 r=%223%22/%3E%3Cpath d=%22M9 6h6M6 9v6a3 3 0 0 0 3 3h6%22/%3E%3C/svg%3E")}
.ico-agent::before{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%230E6E77%22 stroke-width=%221.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%224%22 y=%228%22 width=%2216%22 height=%2212%22 rx=%223%22/%3E%3Cpath d=%22M12 8V5%22/%3E%3Ccircle cx=%2212%22 cy=%223.5%22 r=%221.5%22/%3E%3Ccircle cx=%229%22 cy=%2214%22 r=%221%22/%3E%3Ccircle cx=%2215%22 cy=%2214%22 r=%221%22/%3E%3Cpath d=%22M2 14h2M20 14h2%22/%3E%3C/svg%3E")}
.ico-workshop::before{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%230E6E77%22 stroke-width=%221.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 22a10 10 0 1 1 10-10c0 3-2.5 4-5 4h-2a2 2 0 0 0-1.5 3.3c.6.8.3 2.7-1.5 2.7z%22/%3E%3Ccircle cx=%227.5%22 cy=%2211%22 r=%221%22/%3E%3Ccircle cx=%2212%22 cy=%227%22 r=%221%22/%3E%3Ccircle cx=%2216.5%22 cy=%2210%22 r=%221%22/%3E%3C/svg%3E")}
.ico-shop::before{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%230E6E77%22 stroke-width=%221.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z%22/%3E%3Cpath d=%22M3 6h18%22/%3E%3Cpath d=%22M16 10a4 4 0 0 1-8 0%22/%3E%3C/svg%3E")}
.ico-landing::before{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%230E6E77%22 stroke-width=%221.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%223%22 width=%2218%22 height=%2218%22 rx=%222%22/%3E%3Cpath d=%22M3 9h18M9 21V9%22/%3E%3C/svg%3E")}
.ico-side::before{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%230E6E77%22 stroke-width=%221.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%222%22 y=%227%22 width=%2220%22 height=%2214%22 rx=%222%22/%3E%3Cpath d=%22M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2M2 13h20%22/%3E%3C/svg%3E")}
.ico-social::before{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%230E6E77%22 stroke-width=%221.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2218%22 cy=%225%22 r=%223%22/%3E%3Ccircle cx=%226%22 cy=%2212%22 r=%223%22/%3E%3Ccircle cx=%2218%22 cy=%2219%22 r=%223%22/%3E%3Cpath d=%22M8.6 13.5l6.8 4M15.4 6.5l-6.8 4%22/%3E%3C/svg%3E")}
.ico-graphic::before{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%230E6E77%22 stroke-width=%221.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 19l7-7 3 3-7 7z%22/%3E%3Cpath d=%22M18 13l-1.5-7.5L2 2l3.5 14.5L13 18z%22/%3E%3Cpath d=%22M2 2l7.6 7.6%22/%3E%3Ccircle cx=%2211%22 cy=%2211%22 r=%222%22/%3E%3C/svg%3E")}

/* home: link tiles */
.tile--link{position:relative;overflow:hidden;display:block;text-decoration:none;color:inherit;border:1px solid var(--line);border-radius:14px;padding:24px 22px;background:var(--bg);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.tile--link>span,.tile--link>h4{position:relative;z-index:1}
.tile--link span{font-size:14px;color:var(--muted);display:block;margin-top:4px}
.tile--link span::before{content:"\2192";display:inline-block;margin-right:6px;transition:transform .15s,color .15s}
.tile--link:hover span::before{color:var(--turquoise-deep);transform:translateX(3px)}
.tile--link h4{font-size:15.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.tile--link:hover{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(11,43,51,.35);border-color:var(--turquoise-deep)}
.tile--link:focus-visible{outline:2px solid var(--teal-800);outline-offset:2px}
.tile-grid--2{grid-template-columns:repeat(2,1fr)}
@media(max-width:560px){.tile-grid--2{grid-template-columns:1fr}}

/* subpages: category groups */
.grps{display:grid;gap:clamp(40px,6vw,64px)}
.grp{scroll-margin-top:84px}
.grp-h{font-size:clamp(20px,2.6vw,26px);font-weight:600;letter-spacing:-.01em;line-height:1.2;color:var(--ink);margin-bottom:20px}
.grp-sub{font-family:var(--fm);font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text);margin:0 0 14px}
.proto-grid+.grp-sub{margin-top:40px}
.proto-grid{display:grid;gap:16px}
.proto-grid--web{grid-template-columns:repeat(3,1fr)}
.proto-grid--mobile{grid-template-columns:repeat(4,1fr)}
@media(max-width:820px){.proto-grid--web{grid-template-columns:repeat(2,1fr)}.proto-grid--mobile{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.proto-grid--web{grid-template-columns:1fr}.proto-grid--mobile{grid-template-columns:repeat(2,1fr)}}
.acc-empty{font-size:15px;color:var(--muted);padding:8px 0}

/* project cards: full-bleed preview; details on hover (desktop) or on the flipped back (touch) */
.proto-card{position:relative;aspect-ratio:16/10;perspective:1200px}
.proto-grid--mobile .proto-card{aspect-ratio:9/16}
.proto-inner{position:relative;width:100%;height:100%;border:1px solid var(--line);border-radius:14px;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.proto-front,.proto-back{position:absolute;inset:0;border-radius:13px;overflow:hidden}
.proto-front{background:var(--bg2)}
/* fit to width, let the bottom overflow */
.proto-thumb{width:100%;height:auto;display:block;transform-origin:center top;transition:transform .5s ease}
.proto-back{display:flex;flex-direction:column;gap:8px;padding:20px 22px;background:rgba(255,255,255,.93);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.proto-back h5{font-size:18px;line-height:1.25;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.proto-meta{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:14px;line-height:1.45}
.proto-meta li:nth-child(2){color:var(--muted)}
.proto-status{display:inline-block;margin:8px 0;font-size:12px;font-weight:600;color:var(--teal-900);background:var(--turquoise-soft);border-radius:999px;padding:2px 10px}
.proto-link{margin-top:auto;align-self:flex-start;font-family:var(--fm);font-size:14px;color:var(--accent-text);text-decoration:none;transition:color .15s}
.proto-link:hover{color:var(--turquoise-deep);text-decoration:underline;text-underline-offset:3px}
.proto-link:focus-visible{outline:2px solid var(--teal-800);outline-offset:3px;border-radius:2px}
.proto-grid--mobile .proto-back{justify-content:center;align-items:center;text-align:center;padding:20px 14px}
.proto-grid--mobile .proto-link{margin-top:14px;align-self:center;white-space:nowrap;font-size:13px}
.proto-links{margin-top:auto;display:grid;grid-template-columns:repeat(2,max-content);gap:2px 18px}
.proto-links .proto-link{margin-top:0}
@media(min-width:821px) and (max-width:1060px){.proto-grid--web .proto-back{padding:14px 18px;gap:4px}.proto-grid--web .proto-status{margin:4px 0}.proto-grid--web .proto-back h5{font-size:16px}.proto-grid--web .proto-meta,.proto-grid--web .proto-link{font-size:13px;line-height:1.35}}
.proto-grid--mobile .proto-links{margin-top:14px;grid-template-columns:max-content;justify-items:center;gap:6px}

/* desktop: overlay fades in on hover / keyboard focus */
@media(hover:hover) and (pointer:fine){
  .proto-back{opacity:0;transition:opacity .2s ease}
  .proto-back>*{transform:translateY(6px);transition:transform .25s ease}
  .proto-card:hover .proto-inner,.proto-card:focus-within .proto-inner{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(11,43,51,.35);border-color:var(--turquoise-deep)}
  .proto-card:hover .proto-back,.proto-card:focus-within .proto-back{opacity:1}
  .proto-card:hover .proto-back>*,.proto-card:focus-within .proto-back>*{transform:none}
  .proto-card:hover .proto-thumb{transform:scale(1.05)}
}

/* touch: tap flips the card, the back holds details + link */
@media not ((hover:hover) and (pointer:fine)){
  .proto-card{cursor:pointer;-webkit-tap-highlight-color:transparent}
  .proto-inner{transform-style:preserve-3d;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
  .proto-front,.proto-back{-webkit-backface-visibility:hidden;backface-visibility:hidden}
  .proto-back{transform:rotateY(180deg);background:var(--bg);visibility:hidden;transition:visibility 0s .28s}
  .proto-card.is-flipped .proto-inner{transform:rotateY(180deg)}
  .proto-card.is-flipped .proto-back{visibility:visible;transition-delay:0s}
}
@media(prefers-reduced-motion:reduce){
  .proto-inner,.proto-thumb,.proto-back,.proto-back>*{transition:none!important}
  .proto-card:hover .proto-thumb{transform:none}
  .proto-card:hover .proto-inner,.proto-card:focus-within .proto-inner{transform:none}
}