:root {
  --page: #faf9f7;
  --ink: #161616;
  --line: #c8c7c3;
  --accent: #ef5a49;
  --content-width: 1322px;
}

* { box-sizing: border-box; }
html { background: var(--page); }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--page); font-family: "Microsoft YaHei UI", "PingFang SC", Arial, sans-serif; }
button, a { font: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.page-shell { width: 1440px; min-height: 100dvh; margin: 0 auto; padding: 52px 59px 90px; }
.filters { padding: 0 0 37px; border-bottom: 1px solid var(--line); }
.filter-row { display: flex; align-items: center; min-height: 40px; gap: 29px; }
.filter-row + .filter-row { margin-top: 23px; }
.filter-row h1, .filter-row h2 { width: 40px; margin: 0; font-size: 19px; font-weight: 800; line-height: 1; letter-spacing: 0; white-space: nowrap; }
.filter-options, .color-options { display: flex; align-items: center; gap: 16px; min-width: 0; }
.filter-chip { min-width: 82px; height: 40px; padding: 0 16px; border: 1px solid #c9c8c5; border-radius: 7px; color: #202020; background: rgba(255,255,255,.28); font-size: 16px; white-space: nowrap; transition: border-color .18s ease, color .18s ease, background .18s ease, transform .18s ease; }
.filter-chip:hover { border-color: #a2a09b; }
.filter-chip:active { transform: translateY(1px); }
.filter-chip.is-active { border-color: var(--accent); color: #fff; background: var(--accent); box-shadow: inset 0 0 0 1px rgba(117,27,19,.15); }
.color-options { gap: 26px; }
.color-dot { width: 33px; height: 33px; padding: 0; border: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); transition: transform .18s ease, box-shadow .18s ease; }
.color-dot:hover { transform: scale(1.08); }
.color-dot.is-active { box-shadow: 0 0 0 3px var(--page), 0 0 0 4px var(--ink); }
.coral { background: #e96854; }.black { background: #161616; }.gray { background: #dbdcdf; }.cream { background: #ede3d5; }.green { background: #8da282; }.blue { background: #75a0c2; }

.case-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 18px; padding-top: 39px; }
.case-card { overflow: hidden; border-radius: 8px; background: #fff; box-shadow: 0 2px 9px rgba(21,21,20,.11); animation: reveal .38s ease both; }
.case-card[hidden] { display: none; }
.case-cover { aspect-ratio: 4 / 3; overflow: hidden; background: #e4e2de; }
.case-cover img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.cover-lightfield { background-position: -29px -206px; }
.cover-aura { background-position: -368px -206px; }
.cover-motion { background-position: -29px -584px; }
.cover-hotel { background-position: -368px -584px; }
.cover-studio { background-position: -29px -929px; }
.cover-food { background-position: -368px -929px; }
.case-details { height: 101px; padding: 18px 19px; background: #fff; }
.case-details h2 { margin: 0 0 11px; font-size: 18px; font-weight: 800; line-height: 1; letter-spacing: 0; }
.case-details a { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-size: 14px; text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.case-details a span { font-size: 15px; line-height: 1; text-decoration: none; }
.case-details a:hover { color: var(--accent); }

.generated-cover { position: relative; height: 247px; overflow: hidden; background: #e8e5df; }
.generated-cover::before, .generated-cover::after { content: ""; position: absolute; }
.generated-cover--market { background: #d8e6da; }.generated-cover--market::before { width: 330px; height: 330px; right: -20px; bottom: -55px; border-radius: 50%; background: #ea6c45; }.generated-cover--market::after { width: 360px; height: 240px; bottom: -20px; left: 35px; background: repeating-linear-gradient(110deg, #f4d363 0 28px, #5c963d 28px 48px, #f6f1e6 48px 66px); border-radius: 50% 50% 10px 10px; transform: rotate(-14deg); }
.generated-cover--space { background: #262a2f; }.generated-cover--space::before { width: 490px; height: 250px; right: -80px; top: 102px; border: 1px solid rgba(255,255,255,.85); border-radius: 50%; box-shadow: 0 0 0 70px rgba(255,255,255,.06), 0 0 0 145px rgba(255,255,255,.03); }.generated-cover--space::after { width: 240px; height: 100%; left: 0; background: linear-gradient(90deg, rgba(20,20,20,.96), transparent); }
.generated-cover--studio { background: #dfd9d3; }.generated-cover--studio::before { width: 310px; height: 160px; right: 35px; bottom: 30px; border-radius: 50% 50% 8px 8px; background: #202020; box-shadow: -115px 98px 0 -33px #f2f1ed; }.generated-cover--studio::after { width: 220px; height: 90px; right: 80px; bottom: 173px; border-radius: 50%; background: #adaca6; filter: blur(24px); }
.generated-cover__label { position: relative; z-index: 1; margin: 0; padding: 25px 22px; color: #fff; font-size: 24px; font-weight: 800; line-height: 1.12; }.generated-cover--market .generated-cover__label { color: #173c2b; }.generated-cover--studio .generated-cover__label { color: #181818; }

.load-trigger { display: grid; height: 72px; margin-top: 24px; place-items: center; color: #7b7a76; font-size: 14px; opacity: 0; transition: opacity .2s ease; }.load-trigger.is-loading, .load-trigger.is-finished { opacity: 1; }.load-trigger.is-finished span { display: inline-flex; align-items: center; gap: 12px; }.load-trigger.is-finished span::before, .load-trigger.is-finished span::after { width: 36px; height: 1px; background: #d3d1cc; content: ""; }
@keyframes reveal { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }
@media (max-width: 1150px) { .page-shell { width: 100%; max-width: 1440px; padding-left: clamp(24px,4.1vw,59px); padding-right: clamp(24px,4.1vw,59px); }.filter-row { align-items: flex-start; }.filter-row h1, .filter-row h2 { flex: 0 0 40px; margin-top: 11px; }.filter-row-colors h2 { margin-top: 7px; }.filter-options { flex: 1 1 0; flex-wrap: wrap; }.color-options { flex: 1 1 0; flex-wrap: wrap; }.case-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.filters { padding-left: 0; } }
@media (max-width: 760px) { .page-shell { padding-top: 38px; }.filters { padding-bottom: 28px; }.filter-row { align-items: flex-start; flex-direction: column; gap: 14px; }.filter-row + .filter-row { margin-top: 21px; }.filter-options { flex-wrap: wrap; gap: 9px; }.filter-chip { min-width: 72px; height: 35px; padding: 0 12px; font-size: 14px; }.color-options { gap: 20px; }.color-dot { width: 30px; height: 30px; }.case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-top: 28px; }.case-cover, .generated-cover { height: 31vw; min-height: 150px; max-height: 247px; }.case-details { height: 88px; padding: 15px; }.case-details h2 { margin-bottom: 9px; font-size: 16px; }.case-details a { font-size: 13px; } }
@media (max-width: 480px) { .case-grid { grid-template-columns: 1fr; }.case-cover, .generated-cover { height: 247px; } }