/* Shared catalogue shell; practice uses three category pages with a quieter image grid. */
.motion-prototype .project-catalog {
  --catalog-ink:#484848; --catalog-muted:#707070; --catalog-line:#e5e5e5;
  --catalog-surface:#f7f7f7; --catalog-section-gap:64px; --catalog-card-gap:24px;
  --catalog-selected:#f4f4f4; --catalog-selected-ink:#484848; --catalog-search-surface:#fafafa;
  --catalog-search-line:#dedede; --catalog-media-line:#ededed; --catalog-media-paper:#fff;
  --catalog-focus:#707070; --catalog-mobile-selected:#484848; --catalog-mobile-selected-ink:#fafafa;
  --catalog-columns:3; --catalog-title-size:16px; --catalog-title-weight:400; --catalog-title-leading:24px; --catalog-row-gap:36px;
  display:grid; grid-template-columns:168px minmax(0,1fr); align-items:start; gap:32px;
  width:min(1592px,calc(100% - 96px)); margin:0 auto; padding:38px 0 64px;
  color:var(--catalog-ink); font-family:Arial,"Noto Sans SC","Microsoft YaHei",sans-serif;
  font-size:16px; line-height:25px; font-weight:400; letter-spacing:0; word-spacing:normal;
}
.motion-prototype .project-catalog[data-project-catalog="work"] {
  --catalog-columns:4; --catalog-title-size:18px; --catalog-title-weight:500; --catalog-title-leading:26px;
  --catalog-card-gap:32px; --catalog-row-gap:48px;
  column-gap:clamp(32px,5.41667vw,104px);
  font-family:'Paramotif Geist',"Noto Sans SC","Microsoft YaHei",sans-serif;
}
:root[data-reading-mode="study"] .motion-prototype .project-catalog {
  --catalog-ink:#e0e0e0; --catalog-muted:#b8b8b8; --catalog-line:#3b3b3b;
  --catalog-surface:#252525; --catalog-selected:#353535; --catalog-selected-ink:#efefef;
  --catalog-search-surface:#222; --catalog-search-line:#484848; --catalog-media-line:#484848;
  --catalog-focus:#c4c4c4; --catalog-mobile-selected:#d8d8d8; --catalog-mobile-selected-ink:#242424;
}
:root[data-reading-mode="study"] .motion-prototype .project-catalog :is(.project-catalog-index,.project-catalog-search) img { filter:invert(1); }
.motion-prototype .project-catalog [hidden] { display:none !important; }
.motion-prototype .project-catalog-rail { position:sticky; top:112px; min-width:0; padding-top:2px; }
.motion-prototype .project-catalog-index { display:flex; flex-direction:column; gap:4px; padding-right:16px; border-right:1px solid var(--catalog-line); }
.motion-prototype .project-catalog-index :is(button,a) {
  display:flex; align-items:center; gap:10px; min-height:44px; padding:10px 12px;
  border:0; border-radius:999px; background:transparent; color:var(--catalog-muted);
  font:inherit; font-size:14px; line-height:20px; text-align:left; text-decoration:none; cursor:pointer;
  transition:background-color var(--motion-duration-state,180ms) var(--motion-ease-standard,cubic-bezier(.2,.7,.2,1)),color var(--motion-duration-state,180ms) var(--motion-ease-standard,cubic-bezier(.2,.7,.2,1));
}
.motion-prototype .project-catalog-index :is(button,a):hover { background:var(--catalog-surface); color:var(--catalog-ink); }
.motion-prototype .project-catalog-index [aria-current] { background:var(--catalog-selected); color:var(--catalog-selected-ink); }
.motion-prototype .project-catalog-index img { display:block; flex:none; width:16px; height:16px; opacity:.72; }
.motion-prototype .project-catalog-index span { white-space:nowrap; }
.motion-prototype .project-catalog[data-project-catalog="work"] .project-catalog-rail { top:104px; padding-top:0; }
.motion-prototype .project-catalog[data-project-catalog="work"] .project-catalog-index { gap:0; padding-right:0; border-right:0; }
.motion-prototype .project-catalog[data-project-catalog="work"] .project-catalog-index a { justify-content:center; padding:8px 14px; border-left:1px solid var(--catalog-line); border-radius:0; text-align:center; }
.motion-prototype .project-catalog[data-project-catalog="work"] .project-catalog-index a[aria-current="page"] { border-left-color:var(--catalog-ink); }
.motion-prototype .project-catalog[data-project-catalog="work"] .project-catalog-index a span { display:inline-block; transition:transform var(--motion-duration-state,180ms) var(--motion-ease-standard,ease),letter-spacing var(--motion-duration-state,180ms) var(--motion-ease-standard,ease); }
.motion-prototype .project-catalog[data-project-catalog="work"] .project-catalog-index a:is(:hover,:focus-visible) span { transform:translateY(-1px); letter-spacing:.025em; }
.motion-prototype .project-catalog-body { min-width:0; }
.motion-prototype .project-catalog-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px 32px; margin-bottom:40px; }
.motion-prototype .project-catalog-toolbar h1 { margin:0; font-size:28px; line-height:36px; font-weight:400; letter-spacing:0; }
.motion-prototype .project-catalog-search { display:flex; align-items:center; gap:10px; width:260px; max-width:100%; min-height:40px; padding:8px 14px; border:1px solid var(--catalog-search-line); border-radius:999px; background:var(--catalog-search-surface); }
.motion-prototype .project-catalog-search img { display:block; width:16px; height:16px; flex:none; opacity:.65; }
.motion-prototype .project-catalog-search input { min-width:0; width:100%; padding:0; border:0; outline:0; background:transparent; color:var(--catalog-ink); font:inherit; font-size:14px; line-height:22px; }
.motion-prototype .project-catalog-search input::placeholder { color:var(--catalog-muted); opacity:1; }
.motion-prototype .project-catalog-search:focus-within { outline:1px solid var(--catalog-focus); outline-offset:3px; }
.motion-prototype .project-catalog-section { min-width:0; scroll-margin-top:112px; }
.motion-prototype .project-catalog-section:focus { outline:0; }
.motion-prototype .project-catalog-section + .project-catalog-section { margin-top:var(--catalog-section-gap); padding-top:var(--catalog-section-gap); border-top:1px solid var(--catalog-line); }
.motion-prototype .project-catalog[data-project-catalog="work"] .project-catalog-section + .project-catalog-section { margin-top:0; padding-top:0; border-top:0; }
.motion-prototype .project-catalog-section h2 { margin:0 0 24px; font-size:18px; line-height:26px; font-weight:400; letter-spacing:0; }
.motion-prototype .project-catalog-grid { display:grid; grid-template-columns:repeat(var(--catalog-columns),minmax(0,1fr)); align-items:start; gap:var(--catalog-row-gap) var(--catalog-card-gap); }
.motion-prototype .project-catalog-card { display:block; min-width:0; color:inherit; text-decoration:none; }
.motion-prototype .project-catalog-media { position:relative; display:grid; place-items:center; width:100%; min-width:0; aspect-ratio:4/3; overflow:hidden; border:1px solid var(--catalog-media-line); border-radius:12px; background:var(--catalog-surface); }
.motion-prototype .project-catalog-media > img { display:block; width:100%; height:100%; min-width:0; min-height:0; object-fit:cover; }
.motion-prototype .project-catalog-media > video { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; opacity:0; pointer-events:none; transition:opacity 140ms ease; }
.motion-prototype .project-catalog-media > video[data-playing="true"] { opacity:1; }
.motion-prototype .project-catalog-media--graphic { padding:16px; background:var(--catalog-media-paper); }
.motion-prototype .project-catalog-media--graphic > img { object-fit:contain; }
.motion-prototype .project-catalog-card-copy { padding:14px 2px 0; }
.motion-prototype .project-catalog-card-copy h3 { margin:0; font-size:var(--catalog-title-size); line-height:var(--catalog-title-leading); font-weight:var(--catalog-title-weight); letter-spacing:0; text-underline-offset:4px; }
.motion-prototype .project-catalog-card-copy p { margin:6px 0 0; color:var(--catalog-muted); font-size:14px; line-height:22px; font-weight:400; letter-spacing:0; }
.motion-prototype .project-catalog-card:hover h3 { text-decoration:underline; }
.motion-prototype .project-catalog[data-project-catalog="work"] .project-catalog-card-copy { text-align:center; }
.motion-prototype .project-catalog[data-project-catalog="work"] .project-catalog-card-copy h3 { transition:color var(--motion-duration-state,180ms) var(--motion-ease-standard,ease); }
.motion-prototype .project-catalog[data-project-catalog="work"] .project-catalog-card-copy h3 span { display:inline-block; transition:transform var(--motion-duration-state,180ms) var(--motion-ease-standard,ease),letter-spacing var(--motion-duration-state,180ms) var(--motion-ease-standard,ease); }
.motion-prototype .project-catalog[data-project-catalog="work"] .project-catalog-card:is(:hover,:focus-visible) h3 { text-decoration:none; color:var(--ink); }
.motion-prototype .project-catalog[data-project-catalog="work"] .project-catalog-card:is(:hover,:focus-visible) h3 span { transform:translateY(-2px); letter-spacing:.025em; }
.motion-prototype .project-catalog-status { display:block; margin-top:8px; color:var(--catalog-muted); font-size:13px; line-height:20px; font-weight:400; }
.motion-prototype .project-catalog-media--pending { align-content:center; gap:12px; padding:24px; color:var(--catalog-muted); font-size:13px; line-height:20px; }
.motion-prototype .project-catalog-symbol { width:100px; height:100px; }
.motion-prototype .project-catalog-symbol svg { display:block; width:100%; height:100%; }
.motion-prototype .project-catalog-symbol .lab-star-form { opacity:0; }
.motion-prototype .project-catalog-empty { margin:0; padding:24px 0; color:var(--catalog-muted); font-size:14px; line-height:22px; }
.motion-prototype .project-catalog :is(button,a):focus-visible { outline:2px solid var(--catalog-focus); outline-offset:4px; }
@media(max-width:1100px) {
  .motion-prototype .project-catalog { width:calc(100% - 64px); grid-template-columns:152px minmax(0,1fr); gap:24px; --catalog-card-gap:20px; }
  .motion-prototype .project-catalog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .motion-prototype .project-catalog-index { padding-right:12px; }
  .motion-prototype .project-catalog-index :is(button,a) { padding-inline:8px; gap:8px; }
  .motion-prototype .project-catalog[data-project-catalog="work"] { column-gap:24px; --catalog-card-gap:24px; }
}
@media(max-width:767px) {
  .motion-prototype .project-catalog { display:block; width:calc(100% - 40px); padding-top:24px; --catalog-section-gap:48px; }
  .motion-prototype .project-catalog-rail { position:static; padding:0; margin-bottom:32px; }
  .motion-prototype .project-catalog-index { flex-direction:row; flex-wrap:wrap; gap:8px; border-right:0; padding:0; }
  .motion-prototype .project-catalog-index :is(button,a) { padding:10px 12px; background:var(--catalog-surface); }
  .motion-prototype .project-catalog-index [aria-current] { background:var(--catalog-mobile-selected); color:var(--catalog-mobile-selected-ink); }
  .motion-prototype .project-catalog-index button[aria-current="location"] img { filter:invert(1); opacity:1; }
  .motion-prototype .project-catalog[data-project-catalog="work"] .project-catalog-index a { flex:1; border-left:0; border-bottom:1px solid var(--catalog-line); }
  .motion-prototype .project-catalog[data-project-catalog="work"] .project-catalog-index a[aria-current="page"] { border-bottom-color:var(--catalog-ink); }
  :root[data-reading-mode="study"] .motion-prototype .project-catalog-index button[aria-current="location"] img { filter:none; }
  .motion-prototype .project-catalog-toolbar { gap:24px; margin-bottom:32px; }
  .motion-prototype .project-catalog-toolbar h1 { font-size:26px; line-height:34px; }
  .motion-prototype .project-catalog-search { width:100%; }
  .motion-prototype .project-catalog-grid { grid-template-columns:minmax(0,1fr); gap:32px; }
  .motion-prototype .project-catalog-section h2 { margin-bottom:20px; }
  .motion-prototype .project-catalog-media--pending { min-height:240px; }
}
@media(prefers-reduced-motion:reduce) {
  .motion-prototype .project-catalog-index :is(button,a) { transition:none; }
  .motion-prototype .project-catalog[data-project-catalog="work"] :is(.project-catalog-index a span,.project-catalog-card-copy h3,.project-catalog-card-copy h3 span) { transition:none; transform:none; }
  .motion-prototype .project-catalog-media > video { transition:none; }
}