/* Header and filter layout overrides. */
.header.site-header {
  display: grid; grid-template-columns: minmax(250px, 1fr) var(--filter-column-width, minmax(0, 1.15fr));
  grid-template-rows: auto auto; align-items: start; gap: 14px 12px;
  min-height: 0; height: auto; padding: 22px 32px 24px; overflow: visible;
}
.site-header .brand { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 6px; width: fit-content; color: inherit; text-decoration: none; }
.site-header .brand h1 { margin: 0; line-height: 1.05; font-size: clamp(2.3rem, 3.5vw, 3.8rem); }
.site-header .brand-logo { display: block; width: 54px; height: 54px; flex: none; object-fit: contain; margin: 0; padding: 0; }
.site-header .header-links { grid-area: 1 / 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; align-self: start; gap: 8px; }
.site-header .header-link { width: 42px; height: 42px; display: grid; place-items: center; color: #e2e8f0; border: 1px solid #94a3b833; border-radius: 12px; background: #94a3b80a; transition: background .15s ease, transform .15s ease; }
.site-header .header-link:hover { background: #94a3b820; transform: translateY(-2px); }
.site-header .header-link svg, .site-header .header-link img { width: 21px; height: 21px; object-fit: contain; }
.site-header a:focus-visible, .tile-badge:focus-visible, .tile-molecule:focus-visible { outline: 2px solid #c7d2fe; outline-offset: 4px; }
.header.site-header p { grid-area: 2 / 1; display: block; overflow: visible; max-width: none; margin: 0; font-size: .98rem; line-height: 1.6; text-align: justify; hyphens: auto; -webkit-line-clamp: unset; }
.header.site-header .filter_button { grid-area: 2 / 2; align-self: start; min-width: 0; width: 100%; overflow: visible; padding: 0; }
.header.site-header .filter-panel { width: var(--filter-width, 100%); max-width: 100%; margin-left: auto; }
.header.site-header .filterui { box-sizing: border-box; width: 100%; min-width: 0; display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 10px 12px; transition: none; }
.header.site-header .filterui-left { display: grid; grid-template-areas: 'type cat status'; grid-template-columns: max-content max-content max-content; justify-content: start; flex: 1; min-width: 0; width: 100%; gap: 8px 12px; overflow: visible; padding: 0; }
.header.site-header .filtergroup { display: flex; align-items: center; gap: 7px; min-width: 0; }
.header.site-header .filtergroup[data-filter-group='type'] { grid-area: type; }
.header.site-header .filtergroup[data-filter-group='cat'] { grid-area: cat; }
.header.site-header .filtergroup[data-filter-group='status'] { grid-area: status; }
.header.site-header .filtergroup-title { display: block; font-size: .8rem; flex: none; }
.header.site-header .filteroptions { flex-wrap: wrap; gap: 4px; min-width: 0; }
.header.site-header .filterbtn { flex: none; min-height: 34px; min-width: 34px; padding: 5px; }
.header.site-header .filterbtn .type-icon, .header.site-header .filterbtn .category-icon, .header.site-header .filterbtn .status-icon { width: 24px; height: 24px; }
.header.site-header .filterui-right { display: flex; flex: none; justify-content: flex-end; margin: 6px 4px 0; }
.header.site-header .filter-status { font-size: .68rem; color: #94a3b8; letter-spacing: .02em; }
.header.site-header .filterui[data-rows='2'] .filterui-left { grid-template-areas: 'type status' 'cat cat'; grid-template-columns: max-content minmax(0, 1fr); }
.header.site-header .filterui[data-rows='3'] .filterui-left { grid-template-areas: 'type' 'cat' 'status'; grid-template-columns: minmax(0, 1fr); }
.header.site-header .filterui[data-rows='2'] .filtergroup-title,
.header.site-header .filterui[data-rows='3'] .filtergroup-title { width: var(--filter-label-width); }
/* An invisible clone measures intrinsic sizes without changing visible layout. */
.header.site-header .filterui.filter-measure { position: fixed; top: -10000px; left: 0; width: max-content; visibility: hidden; pointer-events: none; }
.header.site-header p.description-measure { position: fixed; top: -10000px; left: 0; visibility: hidden; pointer-events: none; }
.header.site-header .filter-measure .filterui-left { display: flex; width: max-content; flex: none; }
.header.site-header .filter-measure .filtergroup, .header.site-header .filter-measure .filteroptions { flex-wrap: nowrap; width: max-content; flex: none; }
@media (max-width: 850px) {
  .header.site-header { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 16px 18px 18px; }
  .header.site-header p { grid-area: 2 / 1 / auto / -1; font-size: .9rem; line-height: 1.45; }
  .header.site-header .filter_button { grid-area: 3 / 1 / auto / -1; }
  .header.site-header .filter-panel { width: 100%; }
  .header.site-header .filterui-left { display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; padding: 2px 0 5px; scrollbar-width: thin; scrollbar-color: #64748b #0f172a; }
  .header.site-header .filtergroup, .header.site-header .filteroptions { flex: none; flex-wrap: nowrap; }
  .site-header .brand { gap: 4px; }
  .site-header .brand h1 { font-size: clamp(1.8rem, 7vw, 2.8rem); }
  .site-header .brand-logo { width: 38px; height: 38px; }
  .site-header .header-link { width: 34px; height: 34px; }
  .site-header .header-links { max-width: 120px; gap: 5px; }
}
@media (max-width: 400px) {
  .header.site-header { padding: 12px; }
  .header.site-header .filterui { padding: 8px; }
  .header.site-header .filtergroup { gap: 5px; }
}

/* Anchor both metadata groups to one bottom row, independent of card size. */
.card:not(.fullscreen) .category-container,
.card:not(.fullscreen) .status-container { top: auto; bottom: 18px; height: 30px; width: max-content; align-items: center; }
.card:not(.fullscreen) .category-container { left: auto; right: 18px; }
.card:not(.fullscreen) .status-container { left: 18px; right: auto; }
.card:not(.fullscreen) .category-icon,
.card:not(.fullscreen) .status-icon { flex: 0 0 30px; }

/* Filler tiles retain the existing grid size and accent colour. */
.card.fill-card { cursor: default; }
.card.fill-card:hover { transform: translate(var(--tx), var(--ty)) scale(.98); }
.tile-content { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; background: radial-gradient(ellipse at 15% 10%, rgba(var(--col), .18), transparent 70%), #080f1c; }
.tile-image { width: 100%; height: 100%; display: block; object-fit: var(--tile-fit, cover); }
.tile-badge { position: absolute; right: 12px; bottom: 12px; z-index: 8; display: flex; align-items: center; gap: 6px; max-width: calc(100% - 24px); padding: 7px; background: #020617d9; color: #e2e8f0; border: 1px solid #cbd5e140; border-radius: 10px; text-decoration: none; }
.tile-badge img { width: 24px; height: 24px; object-fit: contain; }
.tile-badge .tile-initial { display: grid; width: 24px; height: 24px; place-items: center; font-size: 12px; }
.tile-badge svg { width: 14px; height: 14px; }
.tile-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tile-caption { position: absolute; top: 12px; left: 14px; right: 14px; color: #cbd5e1; font-size: clamp(.65rem, 1.1vw, .85rem); pointer-events: none; text-shadow: 0 1px 5px #000; z-index: 2; }
.tile-molecule { --mx: 50%; --my: 50%; --rx: 0deg; --ry: 0deg; --mol-x: 0px; --mol-y: 0px; --mol-angle: -14deg; touch-action: pan-y; }
.molecule-art { position: absolute; inset: -12%; pointer-events: none; transform: translate(var(--mol-x), var(--mol-y)) perspective(600px) rotateX(var(--rx)) rotateY(var(--ry)) rotate(var(--mol-angle)); transition: transform .16s ease-out; }
.molecule-base, .molecule-holo { position: absolute; inset: 0; mask-image: var(--molecule-svg); mask-repeat: no-repeat; mask-position: center; mask-size: contain; -webkit-mask-image: var(--molecule-svg); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; }
.molecule-base { background: #dbeafe; opacity: .11; transition: opacity .25s ease; }
.molecule-holo { background: radial-gradient(ellipse at var(--mx) var(--my), #fff 0%, #a5f3fc 15%, #c4b5fd 36%, #f9a8d4 55%, transparent 75%); opacity: 0; transition: opacity .25s ease; }
.tile-molecule:hover .molecule-base, .tile-molecule:focus-visible .molecule-base { opacity: .2; }
.tile-molecule:hover .molecule-holo, .tile-molecule:focus-visible .molecule-holo { opacity: .7; }
.molecule-name { position: absolute; bottom: 14px; left: 16px; right: 16px; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: #cbd5e1; opacity: 0; transition: opacity .2s ease; }
.tile-molecule:hover .molecule-name, .tile-molecule:focus-visible .molecule-name { opacity: .7; }
.tile-error { margin: 20px; color: #94a3b8; font-size: .75rem; }
@media (prefers-reduced-motion: reduce) {
  .molecule-art { transform: rotate(var(--mol-angle)); transition: none; }
  .molecule-holo { display: none; }
  .site-header .header-link { transition: none; }
}
/* Do not animate measured header dimensions while selecting a filter layout. */
.header.site-header { transition: top .45s cubic-bezier(.22,1,.36,1); }
.header.site-header .filterbtn { transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.header.site-header .filterbtn .type-icon,
.header.site-header .filterbtn .category-icon,
.header.site-header .filterbtn .status-icon { transition: opacity .15s ease, filter .15s ease; }
/* Keep the tile empty while WASM is starting, rather than showing an unmasked box. */
.tile-molecule:not([data-ready='true']) .molecule-art { opacity: 0; }

/* Resize geometry once per frame, without continuously tweening layout/blur. */
.card { transition: transform .18s ease-out, opacity .16s ease-out, box-shadow .18s ease-out; }
.card-grid, .card-grid-container, .header.site-header { transition: none; }
.card.fullscreen { transition: none; }
.card.fullscreen .background-img { background-image: none; filter: none; }
.card.fullscreen .contain { backdrop-filter: none; -webkit-backdrop-filter: none; }
.project-motion-hidden { visibility: hidden !important; }
.project-motion-shell { position: fixed; z-index: 30000; pointer-events: none; border: 3px solid; border-radius: 18px; transform-origin: 0 0; will-change: transform; }
.project-loading { margin: 32px; color: #94a3b8; font: .9rem var(--font-sans); }
body.layout-busy .card, body.layout-busy .card *,
body.layout-busy .card::before, body.layout-busy .card::after,
body.layout-busy .card *::before, body.layout-busy .card *::after { transition: none !important; animation: none !important; }
body.layout-busy .card:not(.fullscreen), body.layout-busy .card:not(.fullscreen):hover { transform: translate(var(--tx), var(--ty)) scale(.98) !important; }
body.layout-busy .card .contain, body.layout-busy .filterui { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
body.layout-busy .card .background-img { filter: none; }
body.layout-busy .card .contain::before, body.layout-busy .card .contain::after { display: none !important; }
body.layout-busy .molecule-holo { opacity: 0; }
body.layout-busy .molecule-art { transform: rotate(var(--mol-angle)); }
body.layout-busy .card { box-shadow: none; }
body.is-resizing .project-page img,
body.is-resizing .project-page video,
body.is-resizing .project-page iframe { visibility: hidden; }
.tile-embed iframe { background: #14181e; color-scheme: dark; opacity: 0; transition: opacity .12s ease; }
.tile-embed iframe[data-ready='true'] { opacity: 1; }

/* Share buttons follow the existing project icon sizes, including mobile rows. */
.additional-link .link-icon { vertical-align: middle; }
.link-icon.link-share { position: relative; appearance: none; border: 0; border-radius: 6px; padding: 5px; background: transparent; color: #fff; cursor: pointer; vertical-align: middle; }
.link-icon.link-share::after { left: auto; right: 0; transform: translateY(0); }
.link-icon.link-share:hover::after { transform: translateY(-2px); }
.link-share svg { display: block; width: 100%; height: 100%; pointer-events: none; }
.link-share:focus-visible { outline: 2px solid #a5f3fc; outline-offset: 3px; }
.link-share[aria-busy='true'] { opacity: .6; }