/* ==========================================================================
   BYISHIDA — /projects filtering system
   Shared by /projects/index.html (EN) and /projects/jp/index.html (JA).

   Design tokens, card, grid and filter-pill rules are carried over verbatim
   from the existing portfolio pages so the visual identity is preserved.
   Breakpoints match the legacy pages (1200 / 1024 / 768 / 480).
   ========================================================================== */

:root {
  --void: #020510;
  --deep: #060d1f;
  --panel: rgba(8, 16, 38, 0.72);
  --cyan: #00d4ff;
  --violet: #7b2fff;
  --magenta: #ff2d9b;
  --rose: #ff6ec7;
  --star: #e8f0ff;
  --muted: rgba(180, 200, 255, 0.55);
  --border: rgba(0, 212, 255, 0.18);
  --glow-c: 0 0 30px rgba(0, 212, 255, 0.35);
  --glow-v: 0 0 30px rgba(123, 47, 255, 0.4);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; overflow-x: hidden; max-width: 100%; }

body {
  font-family: 'Syne', sans-serif;
  background: var(--void);
  color: var(--star);
  overflow-x: hidden;
  max-width: 100%;
  position: relative;
}

/* ── BACKGROUND ─────────────────────────────────────────────────────────── */
.nebula {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 15% 20%, rgba(123, 47, 255, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 75%, rgba(0, 212, 255, 0.14) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(255, 45, 155, 0.10) 0%, transparent 60%),
    linear-gradient(160deg, #020510 0%, #060b1c 50%, #040915 100%);
}
.orb {
  position: fixed; border-radius: 50%; filter: blur(60px);
  z-index: 0; pointer-events: none;
}
.orb-1 { width: 380px; height: 380px; background: rgba(123, 47, 255, 0.22); top: -80px; left: -100px; }
.orb-2 { width: 300px; height: 300px; background: rgba(0, 212, 255, 0.18); bottom: 10%; right: -60px; }

.wrap { position: relative; z-index: 1; }

/* ── NAV ────────────────────────────────────────────────────────────────── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 60px;
  background: rgba(2, 5, 16, 0.65);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
/* The header lockup is identical to the homepage: the real logo asset plus
   the BYISHIDA wordmark, one link, pointing at the site root. It replaces a
   text-glyph placeholder that no longer matched the homepage identity.
   min-height keeps it a comfortable tap target on phones, where this page
   has no other navigation control. */
.nav-logo {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Orbitron', sans-serif; font-size: 15px; font-weight: 900;
  color: var(--star); letter-spacing: 2px; text-decoration: none;
  min-height: 46px; padding-right: 8px; border-radius: 10px;
}
.nav-logo:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
/* Inline glyph, inherits the icon colour — same treatment as the homepage. */
.nav-icon .ico { width: 16px; height: 16px; fill: currentColor; display: block; }
.nav-logo img { width: 34px; height: 32px; object-fit: contain; display: block; }
.nav-logo .wordmark { color: var(--star); }
.nav-logo .tag {
  display: block; font-family: 'Syne', sans-serif; font-size: 9px; font-weight: 600;
  letter-spacing: 1.4px; color: rgba(180, 200, 255, 0.5); margin-top: 2px;
  text-transform: uppercase;
}
/* ── MOBILE NAVIGATION ────────────────────────────────────────────────
   This page previously hid .nav-links below 768px and put nothing in their
   place, so the portfolio had no navigation at all on a phone. The drawer
   below is the same component the homepage uses — same breakpoint, same
   markup, same behaviour — so the header behaves identically on both routes
   instead of each page inventing its own. */
html.nav-open, html.nav-open body { overflow: hidden; }

.nav-toggle {
  display: none;
  width: 46px; height: 46px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.14);
  cursor: pointer; padding: 0;
  align-items: center; justify-content: center;
}
.nav-toggle:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.nav-toggle .bars { display: block; width: 20px; height: 14px; position: relative; }
.nav-toggle .bars span {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
  background: var(--star); transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle .bars span:nth-child(1) { top: 0; }
.nav-toggle .bars span:nth-child(2) { top: 6px; }
.nav-toggle .bars span:nth-child(3) { top: 12px; }
.nav-toggle[aria-expanded="true"] .bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav-backdrop {
  position: fixed; inset: 0; z-index: 940;
  background: rgba(2, 5, 16, 0.72); backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.nav-backdrop.is-open { opacity: 1; pointer-events: auto; }

.nav-drawer {
  position: fixed; top: 0; right: 0; z-index: 950;
  width: min(84vw, 340px); height: 100%;
  background: linear-gradient(180deg, #060d1f 0%, #04091a 100%);
  border-left: 1px solid rgba(0, 212, 255, 0.18);
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.6);
  transform: translateX(100%); transition: transform .28s ease;
  display: flex; flex-direction: column;
  padding: 18px 20px calc(24px + env(safe-area-inset-bottom));
  overflow-y: auto;
}
.nav-drawer.is-open { transform: translateX(0); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.drawer-title { font-family: 'Orbitron', sans-serif; font-size: 13px; font-weight: 900; letter-spacing: 2px; }
.drawer-close {
  width: 42px; height: 42px; border-radius: 12px; cursor: pointer;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--star); font-size: 18px; line-height: 1;
}
.drawer-close:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.drawer-links { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.drawer-links a {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 52px; padding: 14px 16px; border-radius: 12px;
  font-family: 'Orbitron', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 1.6px;
  color: var(--star); text-decoration: none;
  background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07);
  transition: border-color .2s, background .2s;
}
.drawer-links a:hover, .drawer-links a:focus-visible {
  border-color: rgba(0, 212, 255, 0.5); background: rgba(0, 212, 255, 0.08); outline: none;
}
.drawer-links a .chev { color: var(--cyan); font-size: 15px; }
.drawer-links a[aria-current="page"] { border-color: rgba(0, 212, 255, 0.45); background: rgba(0, 212, 255, 0.08); }
.drawer-contact { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.drawer-contact-label {
  font-family: 'Orbitron', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-bottom: 12px;
}
.drawer-contact-link {
  display: flex; align-items: center; gap: 12px;
  min-height: 48px; padding: 12px 14px; margin-bottom: 8px; border-radius: 12px;
  font-size: 14px; font-weight: 600; color: var(--star); text-decoration: none;
  background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07);
}
.drawer-contact-link:hover, .drawer-contact-link:focus-visible {
  border-color: rgba(0, 212, 255, 0.5); background: rgba(0, 212, 255, 0.08); outline: none;
}
.dc-ico { width: 20px; display: flex; align-items: center; justify-content: center; color: var(--cyan); }
.drawer-socials { margin-top: auto; padding-top: 26px; display: flex; gap: 10px; }
.drawer-socials a {
  width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.12); color: var(--muted); text-decoration: none;
}
.drawer-socials .ico { width: 18px; height: 18px; fill: currentColor; }

.nav-links { display: flex; gap: 36px; list-style: none; }
.nav-links a {
  text-decoration: none; color: var(--muted);
  font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
  transition: color .25s; position: relative;
}
.nav-links a::after {
  content: ''; position: absolute; bottom: -4px; left: 0; right: 0; height: 1px;
  background: var(--cyan); transform: scaleX(0); transition: transform .25s;
}
.nav-links a:hover { color: var(--star); }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.nav-links a.active { color: var(--star); }
.nav-actions { display: flex; gap: 14px; }
.nav-icon {
  width: 32px; height: 32px; border-radius: 8px;
  border: 1px solid var(--border); background: rgba(255, 255, 255, 0.04);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 13px; cursor: pointer; transition: all .2s;
  text-decoration: none;
}
.nav-icon:hover { border-color: var(--cyan); color: var(--cyan); }

/* ── SECTION SHELL ──────────────────────────────────────────────────────── */
section { padding: 100px 60px; position: relative; z-index: 1; }
.section-header { margin-bottom: 40px; }
.section-label {
  display: inline-block; color: var(--cyan);
  font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
  margin-bottom: 12px;
}
.section-title {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(26px, 3.5vw, 42px); font-weight: 900; letter-spacing: -0.5px;
}
.section-title span {
  background: linear-gradient(120deg, var(--cyan) 0%, var(--violet) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.section-line { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.line { height: 1px; width: 60px; background: linear-gradient(90deg, var(--cyan), transparent); }

/* ── FILTER BAR ─────────────────────────────────────────────────────────── */
.filter-bar { margin-top: 34px; }
.filter-group { margin-bottom: 20px; }
.filter-group:last-child { margin-bottom: 0; }

.filter-group-label {
  font-family: 'Orbitron', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 10px;
}

.filter-pills { display: flex; gap: 8px; flex-wrap: wrap; }

.filter-pill {
  padding: 7px 16px; border-radius: 30px; cursor: pointer;
  font-family: 'Syne', sans-serif; font-size: 10px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--muted); transition: all .25s;
}
.filter-pill:hover { border-color: rgba(255, 255, 255, 0.25); color: var(--star); }
.filter-pill:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* active states, colour-coded per facet (mirrors legacy filter buttons) */
.filter-pill.active[data-facet="category"] {
  background: rgba(255, 200, 80, 0.08);
  border-color: rgba(255, 200, 80, 0.4);
  color: #ffc850;
  box-shadow: 0 0 12px rgba(255, 200, 80, 0.1);
}
.filter-pill.active[data-facet="industry"] {
  background: rgba(0, 212, 255, 0.1);
  border-color: rgba(0, 212, 255, 0.45);
  color: var(--cyan);
  box-shadow: 0 0 12px rgba(0, 212, 255, 0.15);
}
.filter-pill.active[data-facet="client"] {
  background: rgba(123, 47, 255, 0.1);
  border-color: rgba(123, 47, 255, 0.45);
  color: #b97fff;
  box-shadow: 0 0 12px rgba(123, 47, 255, 0.15);
}
.filter-pill.active[data-facet="language"] {
  background: rgba(110, 242, 176, 0.09);
  border-color: rgba(110, 242, 176, 0.42);
  color: #6ef2b0;
  box-shadow: 0 0 12px rgba(110, 242, 176, 0.14);
}

/* Pill internals. The count is derived from the data at load time, so it
   always reflects how much published work sits behind the option. */
.filter-pill { display: inline-flex; align-items: center; gap: 7px; }
.pill-count {
  font-family: 'Orbitron', sans-serif; font-size: 9px; font-weight: 700;
  line-height: 1; padding: 3px 6px; border-radius: 20px;
  background: rgba(255, 255, 255, 0.07); color: inherit; opacity: .75;
}
.filter-pill.active .pill-count { background: rgba(0, 0, 0, 0.28); opacity: 1; }

/* The video-language facet is a short row; keep it visually lighter than the
   category and industry rows so the filter bar does not read as three equals. */
.filter-group-lang .filter-pill { text-transform: none; letter-spacing: .5px; }

/* ── CLIENT COMBOBOX ────────────────────────────────────────────────────
   Replaces the client pill row. The registry is far larger than the other
   vocabularies, so client is a searchable single-select instead of chips.
   Violet accent matches the client colour used elsewhere.                 */
.client-select { position: relative; max-width: 380px; }

.client-input-wrap {
  display: flex; align-items: center; gap: 8px;
  padding: 0 8px 0 14px; border-radius: 30px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.client-input-wrap:hover { border-color: rgba(255, 255, 255, 0.25); }
.client-select.is-open .client-input-wrap,
.client-input-wrap:focus-within {
  border-color: rgba(123, 47, 255, 0.55);
  box-shadow: 0 0 14px rgba(123, 47, 255, 0.18);
}
.client-select.has-value .client-input-wrap {
  background: rgba(123, 47, 255, 0.1);
  border-color: rgba(123, 47, 255, 0.45);
}

.client-input-icon { font-size: 13px; color: var(--muted); line-height: 1; }

.client-input {
  flex: 1; min-width: 0; padding: 11px 0;
  background: transparent; border: 0; outline: none;
  font-family: 'Syne', sans-serif; font-size: 12px; letter-spacing: .5px;
  color: var(--star);
}
.client-input::placeholder {
  color: var(--muted); text-transform: uppercase;
  font-size: 10px; letter-spacing: 1px;
}
.client-select.has-value .client-input { color: #c9a6ff; font-weight: 600; }

.client-clear, .client-caret {
  flex: none; display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: transparent; border: 0; cursor: pointer;
  color: var(--muted); font-size: 14px; line-height: 1;
  transition: color .2s, background .2s;
}
.client-clear:hover, .client-caret:hover { color: var(--star); background: rgba(255, 255, 255, 0.08); }
.client-clear:focus-visible, .client-caret:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.client-clear[hidden] { display: none; }
.client-select.is-open .client-caret { transform: rotate(180deg); }

.client-listbox {
  position: absolute; z-index: 40; top: calc(100% + 8px); left: 0; right: 0;
  max-height: 320px; overflow-y: auto; list-style: none;
  margin: 0; padding: 6px; border-radius: 14px;
  background: rgba(6, 13, 31, 0.97);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
}
.client-listbox[hidden] { display: none; }

.client-option {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border-radius: 9px; cursor: pointer;
  font-size: 12px; color: var(--muted);
  transition: background .15s, color .15s;
}
.client-option:hover, .client-option.is-active {
  background: rgba(123, 47, 255, 0.16); color: var(--star);
}
.client-option[aria-selected="true"] { color: #c9a6ff; font-weight: 600; }
.client-option[aria-selected="true"] .client-option-name::before {
  content: '\2022'; margin-right: 7px; color: #b97fff;
}
.client-option-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.client-option-count {
  flex: none; font-family: 'Orbitron', sans-serif; font-size: 10px;
  color: var(--muted); opacity: .8;
}
.client-option-all {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9px 9px 0 0; margin-bottom: 4px; padding-bottom: 12px;
  text-transform: uppercase; letter-spacing: 1px; font-size: 10px;
}
.client-empty { padding: 16px 12px; font-size: 12px; color: var(--muted); text-align: center; }

/* The UI-language switch was removed with /projects/jp/. The interface is
   English for everyone; Video Language is a filter over the work, not over
   this page, and it renders as ordinary filter pills. */

/* ── RESULT META ────────────────────────────────────────────────────────── */
.result-bar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin: 28px 0 24px; padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.result-count {
  font-family: 'Orbitron', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase; color: var(--star);
}
/* selected client name inside the result line */
.result-client { color: #c9a6ff; }
.clear-filters {
  padding: 5px 14px; border-radius: 20px; cursor: pointer;
  font-family: 'Syne', sans-serif; font-size: 10px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase;
  background: transparent; border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--muted); transition: all .25s;
}
.clear-filters:hover { border-color: var(--magenta); color: var(--rose); }
.clear-filters[hidden] { display: none; }

/* ignored-value notice (some values valid, some not) */
.filter-notice {
  margin-bottom: 24px; padding: 12px 16px; border-radius: 10px;
  background: rgba(255, 200, 80, 0.07);
  border: 1px solid rgba(255, 200, 80, 0.28);
  color: #ffc850; font-size: 12px; line-height: 1.6;
}
.filter-notice[hidden] { display: none; }
.filter-notice code {
  font-family: 'Orbitron', monospace; font-size: 11px;
  background: rgba(0, 0, 0, 0.3); padding: 1px 6px; border-radius: 4px;
}

/* ── FORMAT BLOCKS ──────────────────────────────────────────────────────── */
.format-block { margin-bottom: 32px; }
.format-block:last-child { margin-bottom: 0; }
.format-block[hidden] { display: none; }
.format-sublabel { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.format-sublabel-text {
  font-size: 10px; font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; color: var(--muted);
}
.format-sublabel-badge {
  padding: 2px 9px; border-radius: 20px; font-size: 9px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
}
.badge-h { background: rgba(0, 212, 255, 0.12); color: var(--cyan); border: 1px solid rgba(0, 212, 255, 0.3); }
.badge-v { background: rgba(123, 47, 255, 0.12); color: #b97fff; border: 1px solid rgba(123, 47, 255, 0.3); }
.format-sublabel-line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.06), transparent);
}

/* ── GRIDS ──────────────────────────────────────────────────────────────── */
.projects-grid-h { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.projects-grid-v { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }

/* ── CARDS ──────────────────────────────────────────────────────────────── */
.project-card {
  border-radius: 16px; overflow: visible;
  border: 1px solid var(--border);
  background: var(--panel); backdrop-filter: blur(8px);
  cursor: pointer; transition: all .35s; position: relative;
  z-index: 1;
}
.project-card:hover {
  transform: translateY(-8px); border-color: var(--cyan);
  box-shadow: var(--glow-c); z-index: 999;
}

.project-thumb, .project-thumb-v { border-radius: 16px 16px 0 0; overflow: hidden; }
.project-thumb {
  aspect-ratio: 16/9; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #0c1630, #1a0c2e);
}
.project-thumb-v {
  aspect-ratio: 9/16; position: relative; overflow: hidden;
  background: linear-gradient(160deg, #0c1630, #1a0c2e);
}

/* lazy poster — replaced by a real YouTube iframe only on click */
.yt-poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border: none; display: block;
}
/* Every poster rendition 404'd (video removed or made private on YouTube).
   The panel gradient becomes the tile and a muted glyph marks it, so the card
   reads as intentional rather than broken. */
.project-thumb.is-missing::after,
.project-thumb-v.is-missing::after {
  content: '\25A6'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 34px; color: rgba(180, 200, 255, 0.18);
}

.yt-mount { position: absolute; inset: 0; width: 100%; height: 100%; }
.yt-mount iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }

.yt-overlay {
  position: absolute; inset: 0; z-index: 10; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.25); transition: background .25s;
  border: none; padding: 0; width: 100%; height: 100%;
}
.yt-overlay:hover { background: rgba(0, 0, 0, 0.1); }
.yt-overlay:focus-visible { outline: 2px solid var(--cyan); outline-offset: -4px; }
.yt-overlay[hidden] { display: none; }

.cp-circle {
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.55); border: 2px solid rgba(0, 212, 255, 0.7);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 24px rgba(0, 212, 255, 0.35);
  transition: transform .2s, box-shadow .2s;
}
.yt-overlay:hover .cp-circle {
  transform: scale(1.1);
  box-shadow: 0 0 36px rgba(0, 212, 255, 0.55);
}
.cp-icon { color: #fff; font-size: 18px; margin-left: 3px; font-style: normal; }

.thumb-format {
  position: absolute; top: 8px; left: 8px; z-index: 11;
  background: rgba(123, 47, 255, 0.75); color: #fff;
  font-size: 9px; font-weight: 700; letter-spacing: 1px;
  padding: 2px 7px; border-radius: 6px; text-transform: uppercase;
}

.project-info { padding: 12px 14px; }
.project-name {
  font-family: 'Orbitron', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: 1px; margin-bottom: 4px; line-height: 1.5;
}
.project-tools {
  font-size: 10px; font-weight: 300; color: rgba(180, 200, 255, 0.4);
  letter-spacing: 0.5px; margin-top: 4px;
}
.project-meta { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.meta-tag {
  font-size: 8px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  padding: 2px 7px; border-radius: 20px;
}
.meta-tag.is-type { background: rgba(255, 200, 80, 0.1); color: #ffc850; border: 1px solid rgba(255, 200, 80, 0.25); }
.meta-tag.is-industry { background: rgba(0, 212, 255, 0.08); color: var(--cyan); border: 1px solid rgba(0, 212, 255, 0.22); }
.meta-tag.is-lang { background: rgba(110, 242, 176, 0.08); color: #6ef2b0; border: 1px solid rgba(110, 242, 176, 0.22); }
.meta-tag.is-format { background: rgba(255, 255, 255, 0.05); color: var(--muted); border: 1px solid rgba(255, 255, 255, 0.12); }

/* Client sits directly under the title — the second thing a visitor reads. */
.project-client {
  font-family: 'Syne', sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: .6px; color: #c9a6ff; margin-top: 2px;
}

/* ── LOAD MORE ──────────────────────────────────────────────────────────
   The library is far too large to mount at once. One batch renders on load
   and this reveals the next; the result line above always states the full
   matching total, so the button never hides how much work there is.       */
.load-more-wrap { display: flex; justify-content: center; margin: 34px 0 8px; }
.load-more-wrap[hidden] { display: none; }
.load-more {
  padding: 12px 34px; border-radius: 30px; cursor: pointer;
  font-family: 'Orbitron', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  background: rgba(0, 212, 255, 0.08);
  border: 1px solid rgba(0, 212, 255, 0.38);
  color: var(--cyan); transition: all .25s;
}
.load-more:hover { background: rgba(0, 212, 255, 0.16); box-shadow: var(--glow-c); }
.load-more:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* ── EMPTY / INVALID STATES ─────────────────────────────────────────────── */
.state-panel {
  text-align: center; padding: 70px 24px;
  border: 1px dashed rgba(255, 255, 255, 0.14); border-radius: 16px;
  background: rgba(8, 16, 38, 0.4);
}
.state-panel[hidden] { display: none; }
.state-icon { font-size: 38px; margin-bottom: 18px; opacity: .8; }
.state-title {
  font-family: 'Orbitron', sans-serif; font-size: 15px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 12px;
}
.state-invalid .state-title { color: var(--rose); }
.state-text { font-size: 13px; color: var(--muted); line-height: 1.7; max-width: 460px; margin: 0 auto 24px; }
.state-text code {
  font-family: 'Orbitron', monospace; font-size: 12px; color: var(--star);
  background: rgba(0, 0, 0, 0.35); padding: 2px 7px; border-radius: 4px;
}
.state-action {
  display: inline-block; padding: 10px 26px; border-radius: 30px;
  font-family: 'Orbitron', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  background: rgba(0, 212, 255, 0.1); border: 1px solid rgba(0, 212, 255, 0.45);
  color: var(--cyan); cursor: pointer; text-decoration: none; transition: all .25s;
}
.state-action:hover { background: rgba(0, 212, 255, 0.18); box-shadow: var(--glow-c); }

/* ── FOOTER ─────────────────────────────────────────────────────────────── */
footer {
  padding: 40px 60px; border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; color: var(--muted); position: relative; z-index: 1;
}

/* ── RESPONSIVE (breakpoints match the legacy pages) ────────────────────── */
@media (max-width: 1200px) {
  /* 1200 still fits three 16:9 cards comfortably; dropping to two here made
     them oversized and pushed the vertical block far below the fold. */
  .projects-grid-h { grid-template-columns: repeat(3, 1fr); }
  .projects-grid-v { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1024px) {
  .projects-grid-h { grid-template-columns: repeat(2, 1fr); }
  .projects-grid-v { grid-template-columns: repeat(3, 1fr); }
}
/* Collapse at the same width as the homepage so the header behaves
   identically on both routes, and swap the links for the drawer toggle
   rather than removing navigation entirely. */
@media (max-width: 900px) {
  .nav-links, .nav-actions { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-logo .tag { display: none; }
  .nav-logo { font-size: 14px; }
}

@media (max-width: 768px) {
  nav { padding: 14px 20px; }
  /* The bar is fixed, so the first section has to clear it with room to
     spare — 80px against a 79px bar left content sitting flush underneath. */
  section { padding: 104px 20px 60px; }
  .projects-grid-h { grid-template-columns: repeat(2, 1fr); }
  .projects-grid-v { grid-template-columns: repeat(2, 1fr); }
  .nebula { max-width: 100vw; overflow: hidden; }
  .orb { max-width: 100vw; }
  footer { flex-direction: column; gap: 12px; text-align: center; padding: 32px 20px; }
  /* FILTER DENSITY ON SMALL SCREENS
     Stacked, the four facets ran roughly 870px tall at 375 — the visitor
     scrolled past a wall of chips before seeing a single video. Each facet
     becomes one swipeable row instead, which keeps all four visible, keeps
     every active state on screen (a collapsed panel would hide them) and
     brings the first cards back above the fold. */
  .filter-bar { margin-top: 22px; }
  .filter-group { margin-bottom: 14px; position: relative; }
  .filter-group-label { margin-bottom: 7px; }

  .filter-pills {
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    padding-right: 30px;          /* clearance for the fade */
  }
  .filter-pills::-webkit-scrollbar { display: none; }
  .filter-pill { flex: 0 0 auto; scroll-snap-align: start; }

  /* Fade marks a row that continues past the edge. Scoped with :has() so it
     never lands on the Client group, which holds an input rather than chips.
     Where :has() is unsupported the rule is simply dropped. */
  .filter-group:has(.filter-pills)::after {
    content: ''; position: absolute; right: 0; bottom: 0;
    width: 32px; height: 36px; pointer-events: none;
    background: linear-gradient(90deg, rgba(2, 5, 16, 0), var(--void) 78%);
  }

  /* Chips carry the whole filter UI on touch, so give them a real hit area.
     min-height guarantees it regardless of font metrics; padding alone left
     them at 35px. */
  .filter-pill { padding: 9px 14px; font-size: 9px; gap: 5px; min-height: 42px; }
  .pill-count { font-size: 8px; padding: 2px 5px; }
  /* Clear filters sits beside the result line and was the one control still
     under a comfortable tap height. */
  .clear-filters { padding: 8px 16px; }
  .result-bar { gap: 12px; margin: 22px 0 20px; }
  .load-more { width: 100%; max-width: 320px; padding: 14px 20px; }
  .project-client { font-size: 10px; }

  /* client combobox: full width, 16px input so iOS does not zoom on focus,
     larger hit targets, dropdown capped to the viewport */
  .client-select { max-width: none; }
  .client-input { font-size: 16px; padding: 12px 0; }
  .client-clear, .client-caret { width: 40px; height: 40px; font-size: 16px; }
  .client-listbox { max-height: 58vh; }
  .client-option { padding: 13px 12px; font-size: 13px; }
}
@media (max-width: 380px) {
  /* 320px devices: the two-up vertical grid leaves cards ~140px wide, which
     is still legible, but the surrounding chrome needs to give up padding. */
  section { padding: 100px 14px 52px; }
  nav { padding: 12px 14px; }
  footer { padding: 28px 14px; }
  .projects-grid-h, .projects-grid-v { gap: 10px; }
  .nav-drawer { width: min(90vw, 320px); }
}

@media (max-width: 480px) {
  .projects-grid-h { grid-template-columns: 1fr; }
  /* deliberately NOT 1fr: a full-width 9:16 card is taller than the viewport
     and reduces the page to one Short per screen */
  .projects-grid-v { grid-template-columns: repeat(2, 1fr); }
  .client-option-name { max-width: 68vw; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .project-card:hover { transform: none; }
}