/* ==========================================================================
   Portfolio — the catalog page only.
   Kept out of site.css on purpose: site.css is byte-identical with the Korean
   site and should stay that way. Everything here uses the shared brand tokens
   (--ink / --accent / --line / --paper / --tint), no second accent hue.
   ========================================================================== */

/* --- hero filmstrip: three real captures under the headline --------------- */
.mus-filmstrip { display: flex; gap: .875rem; margin: 2rem 0 0; max-width: 35rem; padding: 0; list-style: none; }
.mus-filmstrip figure { flex: 1; margin: 0; border-radius: 10px; overflow: hidden; border: 1px solid rgba(255,255,255,.22); aspect-ratio: 16 / 10; background: var(--primary-deep); }
.mus-filmstrip img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.mus-filmcap { margin: .75rem 0 0; font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.66); }
@media (max-width: 40rem) { .mus-filmstrip figure:nth-child(3) { display: none; } }

/* --- exhibit frame: masterpiece and plate screenshots --------------------- */
.mus-frame { position: relative; margin: 0; border: 1px solid var(--line); border-radius: var(--radius-img); overflow: hidden; background: var(--paper); }
.mus-frame > img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }
.mus-frame figcaption { display: flex; align-items: center; gap: .4rem; padding: .625rem 1rem; font-size: .8125rem; color: var(--muted); border-top: 1px solid var(--line); background: var(--tint); }
.mus-phone { position: absolute; right: .75rem; bottom: 3.25rem; width: 20%; max-width: 6.5rem; border: 4px solid var(--primary-deep); border-radius: 12px; overflow: hidden; background: var(--primary-deep); }
.mus-phone img { display: block; width: 100%; height: auto; }

.mus-exhibit { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; }
@media (min-width: 60rem) {
  .mus-exhibit { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
  .mus-exhibit--flip .mus-exhibit__media { order: -1; }
}

/* --- the headline metric -------------------------------------------------- */
.mus-metric { font-size: clamp(2rem, 4vw, 3rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); }
.mus-metric .arw { color: var(--accent); margin: 0 .35rem; }
.mus-metric-l { margin: .5rem 0 0; font-size: .9375rem; color: var(--muted); }

/* --- challenge / delivered / value ---------------------------------------- */
.mus-dl { margin: 1.5rem 0 0; display: grid; gap: 1rem; }
.mus-dl > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; align-items: start; }
.mus-dl dt { font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); padding-top: .15rem; }
.mus-dl dd { margin: 0; color: var(--muted); }
@media (max-width: 30rem) { .mus-dl > div { grid-template-columns: 1fr; gap: .25rem; } }

.mus-figline { display: flex; align-items: center; gap: .45rem; margin: 0 0 .5rem; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
.mus-tags { display: flex; flex-wrap: wrap; gap: .4375rem; margin: 1rem 0 1.125rem; }
.mus-tag { font-size: .8125rem; font-weight: 600; color: var(--muted); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: .25rem .6875rem; }

/* --- catalog controls: one search, concept chips, industry select ---------- */
.mus-controls { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; margin: 0 0 2rem; }
.mus-search { position: relative; flex: 1 1 17rem; }
.mus-search svg { position: absolute; left: .875rem; top: 50%; translate: 0 -50%; width: 1.125rem; height: 1.125rem; color: var(--muted); pointer-events: none; }
.mus-search input { width: 100%; min-height: 2.75rem; padding: .625rem 1rem .625rem 2.75rem; font: inherit; font-size: 1rem; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; }
.mus-search input::placeholder { color: var(--muted); }

.mus-facets { display: flex; flex-wrap: wrap; gap: .4375rem; }
.mus-chip { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: .375rem .875rem; font: inherit; font-size: .9375rem; font-weight: 600; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }
.mus-chip:hover { border-color: var(--accent); color: var(--accent-text); }
.mus-chip.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.mus-chip.is-active .n, .mus-chip.is-active .cdot { color: var(--accent-ink); }
.mus-chip .n { font-weight: 400; color: var(--muted); }
.cdot, .work-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 999px; flex: none; }
.dot-found { background: var(--accent-bright); }
.dot-trusted { background: var(--accent); }
.dot-human { background: var(--primary); }

.mus-select { min-height: 2.75rem; padding: .5rem 2rem .5rem .875rem; font: inherit; font-size: .9375rem; font-weight: 600; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235F7288' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .75rem center; }
.mus-count { margin: 0; font-size: .9375rem; color: var(--muted); }
.mus-count b { color: var(--ink); }

/* --- the catalog grid ----------------------------------------------------- */
.catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.5rem; }
.work { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-img); overflow: hidden; }
.work:hover { border-color: var(--accent); }
.work.is-hidden { display: none; }
.work-fig { position: relative; overflow: hidden; aspect-ratio: 3 / 2; border-bottom: 1px solid var(--line); background: var(--tint); }
.work-fig img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.work-fig.is-mobile img { object-fit: contain; background: var(--tint); }
.work-mono { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--tint); font-size: 2rem; font-weight: 600; color: var(--primary); }
.work-visit { position: absolute; right: .625rem; bottom: .625rem; display: inline-flex; align-items: center; gap: .3rem; padding: .375rem .75rem; font-size: .8125rem; font-weight: 600; color: var(--accent-ink); background: color-mix(in srgb, var(--primary) 88%, transparent); border-radius: 999px; text-decoration: none; opacity: 0; transition: opacity var(--dur, 180ms) ease; }
.work:hover .work-visit, .work-visit:focus-visible { opacity: 1; }
@media (hover: none) { .work-visit { opacity: 1; } }
.work-body { display: flex; flex-direction: column; gap: .5625rem; flex: 1; padding: .875rem 1rem 1rem; }
.work-name { margin: 0; font-size: 1.0625rem; font-weight: 600; line-height: 1.25; color: var(--ink); }
.work-meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: auto; font-size: .8125rem; }
.work-concept { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; color: var(--muted); }
.work-chip { padding: .1875rem .5625rem; color: var(--accent-text); background: color-mix(in srgb, var(--accent-bright) 12%, transparent); border-radius: 999px; font-weight: 600; }
.work-proof { color: var(--muted); }
.work-proof.metric { font-weight: 600; color: var(--accent-text); }

/* Motion-safe pan of the full-page capture: the tile scrolls the site top to
   bottom while pointed at or keyboard-focused, so the whole page is visible. */
@media (prefers-reduced-motion: no-preference) {
  .work-fig img { transition: object-position 3.6s ease; }
  .work:hover .work-fig img,
  .work:focus-within .work-fig img { object-position: bottom center; }
  .work-fig.is-mobile img, .work:hover .work-fig.is-mobile img { object-position: center top; }
}

.mus-empty { display: none; margin: 2rem 0 0; color: var(--muted); }
.mus-more { display: inline-flex; align-items: center; justify-content: center; min-height: 2.875rem; margin: 2.5rem auto 0; padding: .75rem 1.75rem; font: inherit; font-size: 1rem; font-weight: 600; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }
.mus-more:hover { border-color: var(--accent); color: var(--accent-text); }
.mus-more-wrap { display: flex; justify-content: center; }

/* --- client roster -------------------------------------------------------- */
.mus-logos { display: flex; flex-wrap: wrap; gap: .5rem; }
.mus-logo { padding: .4375rem .875rem; font-size: .9375rem; font-weight: 600; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; }
.mus-logo.is-hidden { display: none; }