/* components.css · 页头、首屏、案例胶片、关于、动态、到访、页脚、快捷条 · WO-F2 */

/* 页头 */
.site-header{position:absolute;inset:0 0 auto 0;z-index:30;padding-top:20px}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.brand{display:inline-flex;align-items:center;min-height:44px;font-size:var(--step-m);font-weight:800;letter-spacing:.01em;line-height:1;padding:10px 0}
.nav{display:flex;align-items:center;gap:2px}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:12px 10px;font-size:var(--step-s);color:var(--ink)}
.nav a:hover{color:var(--accent)}
.nav a:not(.book)[aria-current="page"]{color:var(--accent)}
.nav .book{background:var(--accent);color:var(--accent-ink);font-weight:700;padding:12px 18px;margin-left:6px}
.nav .book:hover{background:var(--ink);color:var(--accent-ink)}

/* 首屏 */
.hero{position:relative;height:100svh;min-height:620px;overflow:clip;background:var(--bg)}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.hero-media img.is-on{opacity:1}
.hero:before{content:"";position:absolute;inset:0 0 auto 0;height:260px;background:linear-gradient(to bottom,rgba(20,15,8,.8),rgba(20,15,8,.38) 48%,rgba(20,15,8,0));z-index:1;pointer-events:none}/* taste-skill-ignore: neutral scrim under the top nav over a photograph */
.hero:after{content:"";position:absolute;inset:auto 0 0 0;height:66%;background:linear-gradient(to top,rgba(20,15,8,.92),rgba(20,15,8,.55) 44%,rgba(20,15,8,0));z-index:1;pointer-events:none}/* taste-skill-ignore: neutral text scrim over a photograph */
.hero-copy{position:absolute;left:0;right:0;bottom:calc(var(--pad)*1.6);z-index:2;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.hero-copy-inner{max-width:1150px}
.hero h1{font-size:var(--step-d);line-height:.98;font-weight:900;letter-spacing:-.01em;color:var(--ink)}
.hero-sub{font-size:var(--step-l);line-height:1.45;font-weight:500;margin-top:26px;max-width:44ch;color:var(--ink)}
.hero .btn{margin-top:28px}
.hero-pause{position:absolute;right:var(--pad);bottom:var(--pad);z-index:3;display:inline-flex;align-items:center;justify-content:center;min-width:52px;height:44px;padding:0 12px;background:var(--accent);color:var(--accent-ink);font-size:var(--step-s);font-weight:700}
.hero-pause:hover{background:var(--ink)}

/* 案例胶片 */
.work{padding-top:var(--pad-y)}
.work-head{display:flex;align-items:flex-end;justify-content:space-between;gap:48px}
.work h2{font-size:var(--step-h);line-height:1.05;font-weight:800;letter-spacing:-.01em}
.work-intro{font-size:var(--step-l);line-height:1.5;max-width:32ch;margin-top:24px;color:var(--muted)}
.filters{display:none;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.filter-live .filters{display:flex}
.filter{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;background:transparent;color:var(--muted);font-size:var(--step-b)}
.filter:hover{color:var(--ink)}
.filter[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);font-weight:700}
.filter-status{display:none;margin-top:12px;font-size:var(--step-s);color:var(--muted);text-align:right}
.filter-live .filter-status{display:block}
.strip{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;max-width:var(--max);margin:56px auto 0;padding-inline:var(--pad);scrollbar-width:none;overscroll-behavior-x:contain}
.strip::-webkit-scrollbar{display:none}
.case{flex:0 0 73vw;scroll-snap-align:center}
.case img{width:100%;height:auto;aspect-ratio:1046/600;object-fit:cover}
.case figcaption{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding-top:16px}
.strip-live .case figcaption{opacity:0}
.strip-live .case.is-current figcaption{opacity:1}
.case-name{font-size:var(--step-m);font-weight:700;line-height:1.2}
.case-meta{font-size:var(--step-s);color:var(--muted);text-align:right;line-height:1.5}
.case-meta .t{color:var(--accent)}
.work-all{margin-top:16px}

/* 关于 */
.about{padding-top:var(--pad-y)}
.about-head{max-width:820px}
.about h2{font-size:var(--step-h);line-height:1.06;font-weight:800;letter-spacing:-.01em}
.about-lead{margin-top:28px;font-size:var(--step-l);line-height:1.55;max-width:46ch}
.about-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;margin-top:64px}
.about-photo{grid-column:1/9;position:relative}
.about-photo img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.about-note{position:absolute;top:0;right:0;width:320px;max-width:80%;background:var(--ink);color:var(--bg);padding:20px;font-size:var(--step-b);line-height:1.5}
.about-side{grid-column:9/13;display:flex;flex-direction:column}
.about-tile{background:var(--accent);aspect-ratio:4/3;position:relative}
.about-tile svg{position:absolute;inset:0;width:100%;height:100%}
.tile-cap{margin-top:12px;font-size:var(--step-s);line-height:1.4;color:var(--muted)}
.about-facts{display:grid;grid-template-columns:1fr 1fr;gap:22px 20px;margin-top:28px}
.fact dt{font-size:var(--step-s);color:var(--muted);line-height:1.4}
.fact dd{font-size:var(--step-m);font-weight:700;line-height:1.2;margin-top:4px}

/* 动态 */
.news{padding-top:var(--pad-y)}
.news-head{max-width:820px}
.news h2{font-size:var(--step-h);line-height:1.06;font-weight:800;letter-spacing:-.01em}
.news-lead{margin-top:24px;font-size:var(--step-l);line-height:1.5;max-width:34ch;color:var(--muted)}
.news-grid{display:grid;grid-template-columns:minmax(280px,34vw) 1fr;gap:20px;margin-top:56px}
.news-media{position:sticky;top:12vh;align-self:start;aspect-ratio:4/5;overflow:clip;background:var(--surface)}
.news-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.news-media img.is-on{opacity:1}
.news-list{grid-column:2}
.news-row{display:grid;grid-template-columns:10px 1fr auto;gap:16px;align-items:baseline;width:100%;padding:18px 0;background:none;text-align:left;color:var(--muted);font-size:var(--step-l);line-height:1.4;cursor:pointer}
.news-row .mark{width:8px;height:8px;background:transparent;align-self:center}
.news-item.is-active .news-row{color:var(--ink)}
.news-item.is-active .mark{background:var(--accent)}
.news-row time{font-size:var(--step-s);color:var(--muted);font-variant-numeric:tabular-nums}
.news-desc{font-size:var(--step-b);line-height:1.6;max-width:34ch;margin:2px 0 12px 26px;color:var(--ink)}
.news-live .news-desc{display:none}
.news-live .news-item.is-active .news-desc{display:block}

/* 到访 */
.contact{padding-top:var(--pad-y)}
.contact-box{position:relative;height:100svh;min-height:560px;overflow:clip}
.contact-box img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.visit{position:absolute;top:60px;right:var(--pad);width:380px;background:var(--ink);color:var(--bg);padding:32px}
.visit h2{font-size:var(--step-m);line-height:1.2;font-weight:800;margin-bottom:18px}
.visit address{font-style:normal;font-size:var(--step-b);line-height:1.5}
.hours{margin:20px 0;font-size:var(--step-s);line-height:1.5}
.hours li{display:flex;justify-content:space-between;gap:12px;padding:3px 0}
.hours .t{font-variant-numeric:tabular-nums}
.visit .tel{display:block;font-size:var(--step-b);font-weight:500;margin-top:4px}
.visit .btn{width:100%;margin-top:24px}
.visit .btn:hover{background:var(--bg);color:var(--ink)}

/* 页脚 */
.footer{padding:var(--pad-y) 0 40px}
.footer-mark{font-size:var(--step-d);line-height:1;font-weight:900;letter-spacing:-.01em}
.footer-sub{font-size:var(--step-l);margin-top:20px}
.footer-grid{display:grid;grid-template-columns:1.6fr 1.1fr .8fr 1fr;gap:40px;margin-top:72px;font-size:var(--step-s);line-height:1.7;color:var(--muted)}
.footer-col h3{font-size:var(--step-s);font-weight:700;color:var(--ink);margin-bottom:12px}
.footer-logo{width:160px;height:52px;margin-bottom:18px}
.footer-col p{max-width:34ch}
.footer-col ul{display:grid;gap:2px}
.footer-col li{color:var(--ink)}
.footer-col a{color:var(--ink)}
.footer-col a:hover{color:var(--accent)}
.footer-note{font-size:var(--step-s);color:var(--muted);margin-top:14px;max-width:30ch}
.footer-qr img{width:120px;height:120px;margin-top:2px}
.footer-legal{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:64px;font-size:var(--step-s);color:var(--muted)}

/* 移动快捷条 */
.quickbar{display:none}