:root { --ink: #201820; --paper: #efe6da; --jade: #a9c5b8; --rose: #d28ca0; --gold: #c99a59; --line: rgba(239, 230, 218, 0.22); font-family: "Noto Serif SC", "Songti SC", STSong, "SimSun", serif; color: var(--ink); background: var(--paper); font-synthesis: none; text-rendering: optimizeLegibility; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; overflow-x: hidden; background: var(--paper); }
a, button, input { color: inherit; font: inherit; }
a { text-decoration: none; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--rose); outline-offset: 4px; }
body.cursor-ready { cursor: none; }
body.cursor-ready a, body.cursor-ready button, body.cursor-ready input { cursor: none; }
#zongmen-particles { position: fixed; z-index: 20; inset: 0; pointer-events: none; }
.zongmen-pointer { position: fixed; z-index: 21; top: 0; left: 0; width: 54px; height: 54px; opacity: 0; pointer-events: none; transform: translate3d(-100px, -100px, 0) translate(-50%, -50%); transform-origin: center center; filter: drop-shadow(0 0 12px rgba(210, 140, 160, 0.78)); will-change: transform; }
.zongmen-pointer img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: screen; }
.zongmen-pointer span { position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; border: 1px solid var(--paper); border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(201, 154, 89, 0.2), 0 0 11px rgba(201, 154, 89, 0.96); transform: translate(-50%, -50%); }
body.cursor-ready .zongmen-pointer { opacity: 1; }
.zongmen-header { position: absolute; z-index: 8; top: 0; right: 0; left: 0; display: flex; align-items: center; width: min(1320px, calc(100% - 64px)); min-height: 92px; margin: auto; gap: 28px; color: var(--paper); font-family: ui-sans-serif, system-ui, sans-serif; }
.zongmen-brand { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.zongmen-brand strong, .zongmen-brand small { display: block; }
.zongmen-brand strong { font-family: "Noto Serif SC", serif; font-size: 1rem; font-weight: 500; }
.zongmen-brand small { margin-top: 3px; color: rgba(239, 230, 218, 0.62); font-size: 0.55rem; letter-spacing: 0.13em; }
.zongmen-seal { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(239, 230, 218, 0.62); border-radius: 50%; transform: rotate(-8deg); }
.zongmen-header nav { display: flex; gap: 24px; margin-left: auto; }
.zongmen-header nav a, .zongmen-back { color: rgba(239, 230, 218, 0.8); font-size: 0.67rem; }
.zongmen-header nav a:hover, .zongmen-back:hover { color: var(--rose); }
.zongmen-hero { position: relative; min-height: 760px; overflow: hidden; color: var(--paper); background: var(--ink); }
.zongmen-hero-image, .zongmen-hero-image::after, .zongmen-hero-image img, .zongmen-hero-image span { position: absolute; inset: 0; }
.zongmen-hero-image { overflow: hidden; }
.zongmen-hero-image::after { z-index: 1; background: linear-gradient(90deg, rgba(32, 24, 32, 0.9), rgba(32, 24, 32, 0.48) 56%, rgba(32, 24, 32, 0.28)); content: ""; }
.zongmen-hero-image img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; opacity: 0.62; mix-blend-mode: screen; filter: saturate(0.26) contrast(1.1); animation: zongmen-drift 13s ease-in-out infinite alternate; }
.zongmen-hero-image span { z-index: 2; background: radial-gradient(circle at 72% 44%, rgba(169, 197, 184, 0.34), transparent 27%), repeating-linear-gradient(0deg, transparent 0 35px, rgba(239, 230, 218, 0.1) 36px 37px); opacity: 0.62; mix-blend-mode: screen; }
@keyframes zongmen-drift { from { transform: scale(1.04) translate3d(-1%, 0, 0); } to { transform: scale(1.13) translate3d(2%, -1%, 0); } }
.zongmen-hero-copy { position: relative; z-index: 4; width: min(1280px, calc(100% - 64px)); margin: auto; padding-top: 230px; }
.zongmen-kicker { margin: 0 0 21px; color: var(--rose); font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.63rem; letter-spacing: 0.16em; }
.zongmen-hero h1, .zongmen-intro h2, .zongmen-services h2, .zongmen-values h2, .zongmen-contact h2 { margin: 0; font-weight: 400; line-height: 1.17; }
.zongmen-hero h1 { max-width: 760px; font-size: clamp(48px, 7vw, 94px); }
.zongmen-hero h1 em, .zongmen-intro h2 em, .zongmen-services h2 em, .zongmen-values h2 em, .zongmen-contact h2 em { color: var(--rose); font-style: normal; }
.zongmen-hero-copy > p:not(.zongmen-kicker) { max-width: 440px; margin: 32px 0 38px 9vw; color: rgba(239, 230, 218, 0.7); font-size: 0.86rem; line-height: 2; }
.zongmen-action { display: inline-flex; margin-left: 9vw; border-bottom: 1px solid var(--rose); padding-bottom: 9px; color: var(--paper); font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.69rem; }
.zongmen-coordinate { position: absolute; z-index: 4; right: 7vw; bottom: 80px; color: rgba(239, 230, 218, 0.58); font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.6rem; letter-spacing: 0.12em; line-height: 1.8; text-align: right; }
.zongmen-intro { display: grid; grid-template-columns: 72px minmax(0, 1fr); width: min(1280px, calc(100% - 64px)); margin: auto; padding: 150px 0; }
.zongmen-rail { display: flex; align-items: center; align-self: start; gap: 18px; color: rgba(32, 24, 32, 0.55); font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.62rem; writing-mode: vertical-rl; }
.zongmen-rail i { display: block; width: 1px; height: 72px; background: rgba(32, 24, 32, 0.18); }
.zongmen-heading { display: flex; align-items: end; justify-content: space-between; gap: 48px; margin-bottom: 70px; }
.zongmen-intro h2, .zongmen-services h2, .zongmen-values h2, .zongmen-contact h2 { font-size: clamp(40px, 5vw, 70px); }
.zongmen-heading > p { max-width: 380px; margin: 0 0 4px; color: #716873; font-size: 0.82rem; line-height: 1.95; }
.craft-marks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; }
.craft-marks article { min-height: 230px; border-top: 1px solid rgba(32, 24, 32, 0.58); padding-top: 18px; }
.craft-marks span { color: #9a6680; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.63rem; }
.craft-marks h3 { margin: 56px 0 15px; font-size: 1.3rem; font-weight: 400; }
.craft-marks p { max-width: 240px; margin: 0; color: #716873; font-size: 0.78rem; line-height: 1.9; }
.zongmen-services { padding: 150px max(32px, calc((100% - 1280px) / 2)); color: var(--paper); background: var(--ink); }
.zongmen-services-head { display: grid; grid-template-columns: 1fr 1.2fr 0.8fr; align-items: end; gap: 45px; margin-bottom: 70px; }
.zongmen-services-head .zongmen-kicker { margin: 0 0 8px; }
.zongmen-services-head > p:last-child { margin: 0 0 4px; color: rgba(239, 230, 218, 0.62); font-size: 0.78rem; line-height: 1.9; }
.service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.service-grid article { position: relative; min-height: 360px; overflow: hidden; border-top: 1px solid rgba(239, 230, 218, 0.33); background: rgba(239, 230, 218, 0.05); }
.service-grid img { width: 100%; height: 215px; object-fit: cover; mix-blend-mode: screen; opacity: 0.78; filter: saturate(0.45); transition: transform 700ms ease, opacity 400ms ease; }
.service-grid article:hover img { opacity: 1; transform: scale(1.08); }
.service-grid span, .service-grid strong, .service-grid small { display: block; margin-left: 16px; }
.service-grid span { margin-top: 20px; color: var(--rose); font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.62rem; }
.service-grid strong { margin-top: 9px; font-size: 1.1rem; font-weight: 400; }
.service-grid small { margin-top: 7px; color: rgba(239, 230, 218, 0.48); font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.58rem; letter-spacing: 0.12em; }
.service-source { margin: 28px 0 0; color: rgba(239, 230, 218, 0.48); font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.63rem; }
.service-source a { color: var(--rose); border-bottom: 1px solid rgba(210, 140, 160, 0.45); }
.zongmen-catalog { padding: 150px max(32px, calc((100% - 1280px) / 2)); background: #e3d9ce; }
.zongmen-catalog-head { display: grid; grid-template-columns: 1fr 1.2fr 0.8fr; align-items: end; gap: 45px; margin-bottom: 72px; }
.zongmen-catalog-head .zongmen-kicker { margin: 0 0 8px; }
.zongmen-catalog-head h2 { margin: 0; font-size: clamp(40px, 5vw, 70px); font-weight: 400; line-height: 1.17; }
.zongmen-catalog-head h2 em, .zongmen-process h3 em { color: var(--rose); font-style: normal; }
.zongmen-catalog-head > p:last-child { margin: 0 0 4px; color: #716873; font-size: 0.78rem; line-height: 1.9; }
.catalog-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; border-top: 1px solid rgba(32, 24, 32, 0.55); }
.catalog-grid article { min-height: 320px; border-bottom: 1px solid rgba(32, 24, 32, 0.2); padding: 17px 0 18px; }
.catalog-grid figure { height: 154px; margin: 0 0 17px; overflow: hidden; background: #eeeae3; }
.catalog-grid figure img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; transition: transform 650ms ease, filter 350ms ease; }
.catalog-grid article:hover figure img { filter: saturate(1.08); transform: scale(1.06); }
.catalog-grid article span { color: #9a6680; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.62rem; }
.catalog-grid strong { display: block; margin-top: 16px; font-size: 1rem; font-weight: 400; }
.catalog-grid p { max-width: 190px; margin: 10px 0 0; color: #716873; font-size: 0.72rem; line-height: 1.8; }
.zongmen-process { display: grid; grid-template-columns: 0.8fr 1.2fr; align-items: end; gap: 64px; margin-top: 92px; border-top: 1px solid rgba(32, 24, 32, 0.55); padding-top: 28px; }
.zongmen-process h3 { margin: 0; font-size: clamp(30px, 3.5vw, 48px); font-weight: 400; line-height: 1.25; }
.zongmen-process ol { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
.zongmen-process li { display: grid; gap: 28px; min-height: 94px; border-left: 1px solid rgba(32, 24, 32, 0.3); padding-left: 12px; }
.zongmen-process li span { color: #9a6680; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.62rem; }
.zongmen-process li strong { font-size: 0.82rem; font-weight: 400; }
.zongmen-values { display: grid; grid-template-columns: 0.8fr 1.4fr; gap: 80px; width: min(1280px, calc(100% - 64px)); margin: auto; padding: 150px 0; }
.value-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 36px; }
.value-list article { min-height: 150px; border-top: 1px solid rgba(32, 24, 32, 0.45); padding-top: 17px; }
.value-list span { color: #9a6680; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.63rem; }
.value-list p { max-width: 240px; margin-top: 42px; color: #716873; font-size: 0.78rem; line-height: 1.9; }
.zongmen-contact { display: grid; grid-template-columns: 1fr 0.8fr; gap: 90px; padding: 145px max(32px, calc((100% - 1280px) / 2)); color: var(--paper); background: #3b2738; }
.zongmen-contact > div > p:not(.zongmen-kicker) { max-width: 390px; margin-top: 28px; color: rgba(239, 230, 218, 0.68); font-size: 0.82rem; line-height: 1.9; }
.zongmen-contact > div > .zongmen-address { margin-top: 18px; color: rgba(239, 230, 218, 0.5); font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.68rem; }
.zongmen-contact-lines { align-self: end; }
.zongmen-contact-lines a { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; border-bottom: 1px solid rgba(239, 230, 218, 0.24); padding: 14px 0; }
.zongmen-contact-lines span { color: rgba(239, 230, 218, 0.58); font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.62rem; }
.zongmen-contact-lines strong { font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.75rem; font-weight: 400; }
.zongmen-footer { display: flex; justify-content: space-between; width: min(1280px, calc(100% - 64px)); min-height: 110px; margin: auto; padding-top: 17px; color: #746c76; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.62rem; gap: 18px; }
.zongmen-footer a:hover { color: #9a6680; }
@media (max-width: 960px) { .zongmen-header nav { gap: 13px; } .zongmen-intro { grid-template-columns: 1fr; } .zongmen-rail { display: none; } .zongmen-services-head, .zongmen-catalog-head { grid-template-columns: 1fr 1fr; } .zongmen-services-head > p:last-child, .zongmen-catalog-head > p:last-child { grid-column: span 2; max-width: 360px; } .service-grid { grid-template-columns: repeat(2, 1fr); } .catalog-grid { grid-template-columns: repeat(3, 1fr); } .zongmen-process { grid-template-columns: 1fr; gap: 35px; } .zongmen-values { grid-template-columns: 1fr; gap: 55px; } }
@media (max-width: 680px) { .zongmen-header { width: calc(100% - 32px); min-height: 76px; } .zongmen-header nav { display: none; } .zongmen-back { font-size: 0.6rem; } .zongmen-hero { min-height: 720px; } .zongmen-hero-copy { width: calc(100% - 32px); padding-top: 180px; } .zongmen-hero h1 { font-size: 48px; } .zongmen-hero-copy > p:not(.zongmen-kicker), .zongmen-action { margin-left: 0; } .zongmen-coordinate { right: 20px; bottom: 44px; } .zongmen-intro { width: calc(100% - 32px); padding: 92px 0 110px; } .zongmen-heading { display: block; margin-bottom: 44px; } .zongmen-heading > p { margin-top: 20px; } .craft-marks { grid-template-columns: 1fr; gap: 18px; } .craft-marks article { min-height: 160px; } .craft-marks h3 { margin-top: 35px; } .zongmen-services { padding: 92px 16px 112px; } .zongmen-services-head { display: block; margin-bottom: 44px; } .zongmen-services-head > p:last-child { margin-top: 20px; } .service-grid { grid-template-columns: 1fr 1fr; gap: 8px; } .service-grid article { min-height: 270px; } .service-grid img { height: 155px; } .service-grid span, .service-grid strong, .service-grid small { margin-left: 10px; } .service-grid strong { font-size: 0.86rem; } .zongmen-catalog { padding: 92px 16px 112px; } .zongmen-catalog-head { display: block; margin-bottom: 44px; } .zongmen-catalog-head > p:last-child { margin-top: 20px; } .catalog-grid { grid-template-columns: repeat(2, 1fr); gap: 0 14px; } .catalog-grid article { min-height: 180px; } .catalog-grid strong { margin-top: 26px; font-size: 0.88rem; } .catalog-grid p { font-size: 0.68rem; } .zongmen-process { gap: 30px; margin-top: 64px; } .zongmen-process ol { grid-template-columns: repeat(2, 1fr); gap: 18px 12px; } .zongmen-process li { min-height: 70px; } .zongmen-values { width: calc(100% - 32px); padding: 92px 0 110px; } .value-list { grid-template-columns: 1fr; } .zongmen-contact { grid-template-columns: 1fr; gap: 44px; padding: 92px 16px 110px; } .zongmen-footer { align-items: flex-start; flex-direction: column; width: calc(100% - 32px); min-height: 150px; padding: 22px 0; } }
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) { #zongmen-particles, .zongmen-pointer { display: none; } }
@media (max-width: 680px) { .catalog-grid figure { height: 118px; } .catalog-grid article { min-height: 276px; } }