/* 大洋艺术 · 2026-10 改版
   夜里看灯，白天进厂：首屏和彩灯段落用夜色深底，其余用纸色亮底。
   灯橙取自科威特灯会实拍；机模段落用苔绿做次色。系统中文字体，国内访问不依赖外部字体。 */
:root{
  --paper:#f2efe7; --paper2:#e9e5da; --white:#fff;
  --ink:#16171a; --ink2:#3a3c40; --dim:#6b6a66; --line:#d6d1c4; --line2:#e3dfd4;
  --night:#0d0e12; --night2:#17181e; --night-line:#2a2b33; --night-text:#ecebe6; --night-dim:#a09f9a;
  --lamp:#e4571f; --lamp-d:#c2440f; --lamp-soft:#f6c9a6; --gold:#f2b544;
  --moss:#3f6b3a; --moss-d:#2d4f29;
  --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Source Han Sans SC",sans-serif;
  --num:"DIN Alternate","Bahnschrift","Segoe UI","Helvetica Neue",Arial,sans-serif;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  --gut:clamp(16px,3.2vw,48px); --max:1360px;
  /* 兼容旧类名 */
  --green:var(--lamp); --green-d:var(--lamp-d); --yellow:var(--gold); --panel:var(--white); --floor:var(--paper);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.8 var(--sans);font-feature-settings:"palt"}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--lamp);outline-offset:2px}
h1,h2,h3{line-height:1.22;margin:0;text-wrap:balance;letter-spacing:-.01em}
p{margin:0}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.mono{font-family:var(--mono);font-size:.78em;letter-spacing:.02em}
.code{font-family:var(--mono);font-size:12px;color:var(--lamp-d);letter-spacing:.04em}
/* 只给读屏和防垃圾用的隐藏元素：表单里的 input{width:100%} 会把它撑宽、撑出横向滚动（联系页 1440 宽，10-25 修），所以尺寸和边距都锁死 */
.sr{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;border:0!important;min-width:0!important;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--lamp);color:var(--night);padding:8px 12px;z-index:99}
.skip:focus{left:8px}
.dim{color:var(--dim)}

/* ---------- header ---------- */
.top{background:rgba(242,239,231,.94);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.top .wrap{display:flex;align-items:center;gap:28px;min-height:68px}
.logo{display:flex;align-items:center;text-decoration:none;flex:none}
.logo img{height:32px;width:auto}
.nav{display:flex;gap:4px 26px;flex-wrap:wrap;font-size:15px}
.nav a{text-decoration:none;padding:6px 0;border-bottom:2px solid transparent;color:var(--ink2)}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{border-color:var(--lamp);color:var(--ink);font-weight:700}
.nav a.hot{color:var(--ink);font-weight:700}
.sp{flex:1}
.call{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-size:13px;white-space:nowrap;line-height:1.3}
.call span{color:var(--dim)}
.call b{font-family:var(--num);font-weight:700;font-size:18px;letter-spacing:.02em}
.call::before{content:"";width:34px;height:34px;border-radius:50%;background:var(--lamp) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E") center/16px no-repeat;flex:none}
.call em{display:grid;font-style:normal}
.menu{display:none}
@media (max-width:1100px){
  .top .nav{display:none}
  .menu{display:block;position:relative}
  .menu summary{list-style:none;cursor:pointer;padding:8px 14px;border:1px solid var(--ink);font-size:14px}
  .menu summary::-webkit-details-marker{display:none}
  .menu nav{position:absolute;right:0;top:calc(100% + 10px);background:var(--white);border:1px solid var(--line);display:grid;min-width:230px;padding:6px 0;box-shadow:0 16px 40px rgba(0,0,0,.14)}
  .menu nav a{padding:11px 20px;text-decoration:none;border-bottom:1px solid var(--line2)}
  .menu nav a:last-child{border-bottom:0}
}
@media (max-width:600px){ .call span{display:none} .call b{font-size:15px} .call::before{width:30px;height:30px} .logo img{height:26px} .top .wrap{gap:14px;min-height:60px} }

/* ---------- layout with index rail ---------- */
.shell{display:grid;grid-template-columns:232px minmax(0,1fr);max-width:var(--max);margin:0 auto}
.rail{border-right:1px solid var(--line);padding:30px 20px 40px var(--gut);font-size:14px}
.rail ol{list-style:none;margin:0;padding:0;display:grid;gap:1px;position:sticky;top:92px}
.rail li a{display:flex;gap:10px;padding:6px 0;text-decoration:none;color:var(--dim)}
.rail li a:hover{color:var(--ink)}
.rail li a span{font-family:var(--mono);font-size:11px;padding-top:4px;min-width:22px}
.rail li a[aria-current="page"]{color:var(--ink);font-weight:700}
.rail li a[aria-current="page"] span{color:var(--lamp)}
.rail .rh{font-size:12px;color:var(--dim);letter-spacing:.12em;margin:16px 0 6px}
.rail .rh:first-child{margin-top:0}
.main{min-width:0}
@media (max-width:900px){ .shell{grid-template-columns:1fr} .rail{display:none} }

/* ---------- breadcrumb / page head ---------- */
.crumb{font-size:13px;color:var(--dim);padding:20px var(--gut) 0}
.crumb a{text-decoration:none}
.crumb a:hover{text-decoration:underline}
.crumb i{font-style:normal;margin:0 7px;color:var(--line)}
.phead{padding:clamp(20px,3vw,40px) var(--gut) clamp(24px,3vw,40px)}
.phead h1{font-size:clamp(30px,4.4vw,58px);font-weight:800}
.phead p{max-width:42em;color:var(--ink2);margin-top:16px;font-size:16px}
.phead .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.phead .code{display:block;margin-bottom:10px}
.mark{color:var(--lamp)}

/* ---------- sections ---------- */
.sec{padding:clamp(48px,7vw,104px) var(--gut);border-top:1px solid var(--line)}
.sec.tight{padding-block:clamp(28px,4vw,52px)}
.sec.panel{background:var(--white)}
.sec.ink{background:var(--night);color:var(--night-text);border-top:0}
.sec.ink .h2sub,.sec.ink .dim{color:var(--night-dim)}
.sec.moss{background:#e7e9dc}
.in{max-width:var(--max);margin:0 auto}
.sh{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:10px 28px;margin-bottom:clamp(24px,3vw,40px)}
.sh h2{font-size:clamp(26px,3.2vw,44px);font-weight:800}
.h2sub{color:var(--dim);font-size:15px;margin-top:10px;max-width:40em}
.kicker{display:flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.14em;color:var(--lamp);font-weight:700;margin-bottom:14px}
.kicker::before{content:"";width:28px;height:2px;background:currentColor}
.kicker.moss{color:var(--moss)}
.sec.ink .kicker{color:var(--gold)}
.more{font-size:14px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--lamp);white-space:nowrap;padding-bottom:2px}
.more::after{content:" →"}
.more:hover{color:var(--lamp-d)}
.sec.ink .more{color:var(--night-text);border-color:var(--gold)}
.lead{font-size:17px;line-height:1.95;color:var(--ink2);max-width:38em}
.prose{max-width:42em}
.prose p+p,.prose p+h3,.prose ul+p{margin-top:14px}
.prose h3{font-size:18px;margin:28px 0 8px}
.prose h3:first-child{margin-top:0}
.prose ul{padding-left:1.2em;margin:10px 0 0}

/* ---------- buttons ---------- */
.btns{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;font-size:15px;text-decoration:none;border:1px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;font-family:inherit;line-height:1.3}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn.solid{background:var(--ink);color:var(--paper)}
.btn.solid:hover{background:var(--lamp-d);border-color:var(--lamp-d)}
.btn.yellow,.btn.lamp{background:var(--lamp);border-color:var(--lamp);color:#fff}
.btn.yellow:hover,.btn.lamp:hover{background:var(--lamp-d);border-color:var(--lamp-d);color:#fff}
.btn.ghost{border-color:rgba(255,255,255,.6);color:#fff}
.btn.ghost:hover{background:#fff;color:var(--ink)}

/* ---------- home hero ---------- */
.stage-hero{position:relative;background:var(--night);color:#fff;min-height:min(86vh,820px);display:grid;align-items:end;overflow:hidden}
.stage-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stage-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,14,18,.15) 0%,rgba(13,14,18,0) 35%,rgba(13,14,18,.55) 68%,rgba(13,14,18,.92) 100%),linear-gradient(90deg,rgba(13,14,18,.55) 0%,rgba(13,14,18,0) 60%)}
.stage-hero .wrap{position:relative;z-index:1;width:100%;padding-block:clamp(40px,6vw,80px)}
.stage-hero h1{font-size:clamp(36px,6.2vw,88px);font-weight:800;line-height:1.08;letter-spacing:-.02em;max-width:11em}
.stage-hero h1 small{display:block;font-size:clamp(15px,1.4vw,19px);font-weight:400;letter-spacing:.2em;color:var(--gold);margin-bottom:18px}
.stage-hero p{max-width:34em;margin-top:20px;font-size:clamp(15px,1.3vw,18px);color:rgba(255,255,255,.86)}
.stage-hero .btns{margin-top:28px}
.stage-hero>img.crop-tr{transform:scale(1.14);transform-origin:15% 100%} /* 裁掉旧站右上角角标 */
.stage-hero .credit{position:absolute;right:var(--gut);top:20px;z-index:1;font-size:12px;color:rgba(255,255,255,.75);background:rgba(0,0,0,.35);padding:4px 10px}
@media (max-width:700px){ .stage-hero{min-height:78vh} .stage-hero>img{object-position:30% center} }

/* ---------- 60/40 business split ---------- */
.split{display:grid;grid-template-columns:3fr 2fr;gap:2px;background:var(--night)}
.biz{position:relative;display:grid;align-items:end;min-height:clamp(320px,38vw,520px);color:#fff;text-decoration:none;overflow:hidden;isolation:isolate}
.biz img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.biz::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.82) 100%)}
.biz:hover img{transform:scale(1.035)}
.biz .tx{padding:clamp(20px,3vw,40px)}
.biz .no{font-family:var(--num);font-size:13px;letter-spacing:.14em;color:var(--gold)}
.biz h2{font-size:clamp(26px,3.2vw,44px);font-weight:800;margin:6px 0 10px}
.biz p{font-size:15px;color:rgba(255,255,255,.85);max-width:30em}
.biz ul{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:16px 0 0}
.biz li{font-size:13px;border:1px solid rgba(255,255,255,.4);padding:3px 10px}
.biz .go{display:inline-block;margin-top:18px;font-size:14px;border-bottom:1px solid var(--gold);padding-bottom:2px}
.biz.moss .no{color:#b9d79a}
.biz.moss .go{border-color:#b9d79a}
@media (max-width:800px){ .split{grid-template-columns:1fr} }

/* ---------- facts strip ---------- */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--ink)}
.facts div{padding:18px 18px 0 0}
.facts div+div{padding-left:18px;border-left:1px solid var(--line)}
.facts b{display:block;font-family:var(--num);font-size:clamp(30px,3.6vw,52px);font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1;letter-spacing:-.01em}
.facts b small{font-family:var(--sans);font-size:.42em;font-weight:700;margin-left:2px}
.facts span{display:block;font-size:13px;color:var(--dim);margin-top:6px}
.sec.ink .facts{border-color:var(--gold)}
.sec.ink .facts div+div{border-color:var(--night-line)}
.sec.ink .facts b{color:#fff}
.facts b{white-space:nowrap}
.feat .facts{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:18px;margin-bottom:28px}
.feat .facts div:nth-child(3){padding-left:0;border-left:0}
@media (max-width:700px){ .facts{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:18px} .facts div:nth-child(3){padding-left:0;border-left:0} }

/* honour band */
.honor{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;background:var(--white);border-top:1px solid var(--line);padding:18px var(--gut);font-size:14px;color:var(--ink2)}
.honor b{color:var(--ink)}
.honor .seal{font-size:12px;font-weight:700;color:#fff;background:#b3261e;padding:4px 10px;letter-spacing:.06em}

/* ---------- lantern projects (home + lantern page) ---------- */
.projects{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(10px,1.2vw,18px)}
.proj{position:relative;grid-column:span 2;text-decoration:none;color:inherit;display:grid;gap:12px;align-content:start;min-width:0}
.proj.big{grid-column:span 4;grid-row:span 2}
.proj .ph{overflow:hidden;aspect-ratio:3/2;background:var(--night2)}
.proj.big .ph{aspect-ratio:auto;height:100%;min-height:360px}
.proj.big{grid-template-rows:1fr auto}
.proj .ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.proj:hover .ph img{transform:scale(1.04)}
.proj .where{font-size:12px;letter-spacing:.12em;color:var(--gold)}
.proj h3{font-size:clamp(17px,1.4vw,21px);font-weight:700;margin-top:2px}
.proj p{font-size:13px;color:var(--night-dim);line-height:1.7;margin-top:4px}
.proj .award{position:absolute;left:12px;top:12px;background:#b3261e;color:#fff;font-size:12px;padding:4px 10px;font-weight:700}
@media (max-width:900px){ .projects{grid-template-columns:repeat(2,minmax(0,1fr))} .proj,.proj.big{grid-column:span 1;grid-row:auto} .proj.big{grid-column:1/-1} .proj.big .ph{min-height:0;aspect-ratio:16/9} }
@media (max-width:520px){ .projects{grid-template-columns:1fr} }

/* lantern family mosaic */
.fam{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;background:var(--night)}
.fam a,.fam div.f{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;color:#fff;text-decoration:none;isolation:isolate}
.fam img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .7s}
.fam a::after,.fam div.f::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.8))}
.fam a:hover img{transform:scale(1.05)}
.fam .tx{position:absolute;left:0;right:0;bottom:0;padding:16px 18px}
.fam h3{font-size:18px;font-weight:700}
.fam p{font-size:12px;color:rgba(255,255,255,.8);line-height:1.6;margin-top:4px}
@media (max-width:900px){ .fam{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* process strip with photo */
.proc{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;counter-reset:p}
.proc.five{grid-template-columns:repeat(5,minmax(0,1fr))}
.proc figure{margin:0;min-width:0}
.proc img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--line2)}
.proc figcaption{padding-top:12px;border-top:2px solid currentColor;margin-top:12px}
.proc figcaption b{font-family:var(--num);font-size:13px;color:var(--lamp)}
.proc figcaption h3{font-size:16px;font-weight:700;margin:2px 0 4px}
.proc figcaption p{font-size:13px;line-height:1.7;color:var(--dim)}
.sec.ink .proc figcaption p{color:var(--night-dim)}
.sec.ink .proc figcaption b{color:var(--gold)}
.proc.moss figcaption b{color:var(--moss)}
@media (max-width:1000px){ .proc,.proc.five{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:28px} }
@media (max-width:560px){ .proc,.proc.five{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* feature row: big photo + text */
.feat{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);align-items:center}
.feat.rev{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.feat.rev .feat-ph{order:2}
.feat-ph{position:relative}
.feat-ph img{width:100%;aspect-ratio:4/3;object-fit:cover}
.feat-ph figcaption{font-size:12px;color:var(--dim);margin-top:8px}
.feat h2{font-size:clamp(26px,3.2vw,44px);font-weight:800}
.feat .lead{margin-top:16px}
.feat .btns{margin-top:24px}
@media (max-width:860px){ .feat,.feat.rev{grid-template-columns:1fr} .feat.rev .feat-ph{order:0} }

/* ---------- catalog grid ---------- */
.cat{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.cat.lg{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.item{background:var(--white);display:grid;grid-template-rows:auto 1fr;text-decoration:none;color:inherit;min-width:0}
.item .ph{aspect-ratio:4/3;overflow:hidden;background:var(--line2)}
.item .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.item:hover .ph img{transform:scale(1.035)}
.item .tx{padding:12px 14px 16px;display:grid;gap:3px;align-content:start}
.item h3{font-size:16px;font-weight:700}
.item p{font-size:13px;color:var(--dim);line-height:1.7}
.item:hover h3{color:var(--lamp-d)}
.count{font-family:var(--mono);font-size:12px;color:var(--dim);font-weight:400}

/* line tiles */
.lines{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.2vw,18px)}
.lines.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.line{position:relative;display:grid;grid-template-columns:minmax(0,1fr);text-decoration:none;color:inherit;min-width:0;background:var(--white)}
.line .ph{aspect-ratio:4/3;overflow:hidden;background:var(--line2)}
.line .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.line:hover .ph img{transform:scale(1.04)}
.line .tx{padding:14px 16px 18px}
.line h3{font-size:18px;font-weight:700;display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.line p{font-size:13px;color:var(--dim);margin-top:4px;line-height:1.7}
.line:hover h3{color:var(--lamp-d)}
.sec.ink .line{background:var(--night2)}
.sec.ink .line p{color:var(--night-dim)}
@media (max-width:1000px){ .lines.four{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:900px){ .lines{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .lines,.lines.four{grid-template-columns:1fr} }

/* ---------- stages ---------- */
.stages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:18px}
.stage{padding:16px 0 24px;border-top:2px solid var(--ink)}
.stage b{font-family:var(--num);font-size:14px;color:var(--lamp)}
.stage h3{margin:4px 0 6px;font-size:17px}
.stage p{font-size:13px;color:var(--ink2);line-height:1.75}
.stage em{display:block;font-style:normal;font-size:12px;color:var(--dim);margin-top:6px}
.sec.ink .stage{border-color:var(--night-text)}
.sec.ink .stage p{color:#c9c8c2}
.sec.ink .stage b{color:var(--gold)}
@media (max-width:900px){ .stages{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ---------- photo rows ---------- */
.shots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.shots.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.shots figure{margin:0;min-width:0}
.shots img{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--line2)}
.shots figcaption{font-size:13px;padding-top:8px;color:var(--ink2);line-height:1.6}
.shots figcaption small{display:block;color:var(--dim);font-size:12px}
.sec.ink .shots figcaption{color:#dcdbd5}
@media (max-width:900px){ .shots,.shots.three{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* pano */
.pano{position:relative;background:var(--line2)}
.pano img{width:100%;aspect-ratio:21/9;object-fit:cover}
.capbar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;font-size:12px;color:var(--dim);padding:10px var(--gut)}
.pin{display:none}
@media (max-width:700px){ .pano img{aspect-ratio:4/3} }

/* ---------- case cards ---------- */
.cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 18px}
.case{text-decoration:none;color:inherit;display:grid;gap:10px;align-content:start;min-width:0}
.case .ph{aspect-ratio:3/2;overflow:hidden;background:var(--line2)}
.case .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.case:hover .ph img{transform:scale(1.035)}
.case h3{font-size:17px;font-weight:700}
.case:hover h3{color:var(--lamp-d)}
.case p{font-size:13px;color:var(--dim);line-height:1.7}
.cases.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){ .cases.four{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:540px){ .cases.four{grid-template-columns:1fr} }
.case .meta{display:flex;gap:10px;font-size:12px;color:var(--lamp-d);letter-spacing:.06em}
.sec.ink .case p{color:var(--night-dim)}
.sec.ink .case .meta{color:var(--gold)}
.sec.ink .case:hover h3{color:var(--gold)}
@media (max-width:900px){ .cases{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:540px){ .cases{grid-template-columns:1fr} }

/* filter chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.chip{border:1px solid var(--line);background:var(--white);padding:6px 14px;font-size:13px;text-decoration:none;cursor:pointer;font-family:inherit;color:var(--ink)}
.chip:hover,.chip[aria-pressed="true"],.chip[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.tag{display:inline-block;border:1px solid var(--line);padding:2px 10px;font-size:12px;color:var(--ink2);background:var(--white)}

/* ---------- product detail ---------- */
.pd{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(20px,3vw,48px);padding:0 var(--gut) clamp(32px,4vw,56px)}
.gal .main-img{background:var(--line2);aspect-ratio:4/3;overflow:hidden}
.gal .main-img img{width:100%;height:100%;object-fit:contain;background:#dedad0}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:6px;margin-top:8px}
.thumbs button{padding:0;border:2px solid transparent;background:none;cursor:pointer;aspect-ratio:1;overflow:hidden}
.thumbs button[aria-current="true"]{border-color:var(--lamp)}
.thumbs img{width:100%;height:100%;object-fit:cover}
.spec{width:100%;border-collapse:collapse;font-size:14px;margin:18px 0}
.spec th,.spec td{text-align:left;padding:10px 0;border-bottom:1px solid var(--line);vertical-align:top}
.spec th{width:7em;color:var(--dim);font-weight:400}
.spec td{padding-left:12px}
.pd h1{font-size:clamp(26px,3.2vw,40px);font-weight:800}
.pd .code{display:block;margin-bottom:6px}
.note{font-size:12px;color:var(--dim);margin-top:10px;line-height:1.7}
.ask{background:var(--night);color:var(--night-text);padding:20px 22px;margin-top:18px;display:grid;gap:8px}
.ask b{font-family:var(--num);color:#fff;font-size:26px;letter-spacing:.02em;user-select:all}
.ask .btns{margin-top:4px}
.ask .btn{border-color:rgba(255,255,255,.5);color:#fff}
.ask .btn:hover{background:#fff;color:var(--ink)}
.ask .btn.yellow{border-color:var(--lamp)}
@media (max-width:900px){ .pd{grid-template-columns:1fr} }

.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px)}
.two.r{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
@media (max-width:860px){ .two,.two.r{grid-template-columns:1fr} }
.list{list-style:none;margin:0;padding:0;display:grid}
.list li{padding:11px 0;border-bottom:1px solid var(--line);display:flex;gap:12px}
.list li::before{content:"";width:6px;height:6px;margin-top:11px;background:var(--lamp);flex:none}
.sec.ink .list li{border-color:var(--night-line)}
.sec.ink .list li::before{background:var(--gold)}

/* case gallery */
.gallery{columns:3 260px;column-gap:10px}
.gallery figure{margin:0 0 10px;break-inside:avoid}
.gallery img{width:100%;background:var(--line2)}
.video{aspect-ratio:16/9;width:100%;border:0;background:#000}

/* news */
.news{display:grid;border-top:1px solid var(--line)}
.news a{display:grid;grid-template-columns:7.5em minmax(0,1fr) auto;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);text-decoration:none;align-items:baseline}
.news a:hover h3{color:var(--lamp-d)}
.news time{font-family:var(--mono);font-size:13px;color:var(--dim)}
.news h3{font-size:16px;font-weight:700}
@media (max-width:600px){ .news a{grid-template-columns:1fr;gap:4px} }

/* faq */
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{cursor:pointer;list-style:none;padding:15px 36px 15px 0;font-weight:700;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:11px;font-size:22px;font-weight:400;color:var(--lamp)}
.faq details[open] summary::after{content:"−"}
.faq details p{padding:0 0 18px;color:var(--ink2);max-width:46em}
.sec.ink .faq details{border-color:var(--night-line)}
.sec.ink .faq details p{color:#c9c8c2}

/* form */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px}
.form .full{grid-column:1/-1}
.form label{display:grid;gap:6px;font-size:16px;color:var(--ink2)}
.form input,.form select,.form textarea{font:inherit;font-size:16px;padding:12px 13px;border:1px solid var(--line);background:var(--white);color:var(--ink);border-radius:0;width:100%}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--ink)}
.form textarea{min-height:130px;resize:vertical}
.form .req::after{content:" *";color:#b3261e}
.form .msg{font-size:16px;padding:12px 14px;border-left:4px solid var(--lamp);background:var(--white)}
.form .msg.err{border-color:#b3261e}
@media (max-width:640px){ .form{grid-template-columns:1fr} }

/* cta band */
.cta{position:relative;background:var(--night);color:var(--night-text);padding:clamp(40px,5vw,72px) var(--gut);display:flex;flex-wrap:wrap;gap:18px 40px;align-items:center;overflow:hidden}
.cta::before{content:"";position:absolute;right:-120px;top:-160px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(228,87,31,.35),rgba(228,87,31,0) 70%);pointer-events:none}
.cta h2{position:relative;flex:1 1 360px;font-size:clamp(22px,2.8vw,36px);font-weight:800}
.cta .tel{position:relative;font-family:var(--num);font-size:clamp(26px,3vw,40px);color:#fff;user-select:all;font-weight:700;letter-spacing:.02em}
.cta>span:not(.tel){position:relative;color:var(--night-dim);font-size:14px}
.cta .btn{position:relative}

/* footer */
.foot{background:#08090c;color:#a7a6a0;font-size:14px;padding:52px var(--gut) 28px}
.foot .cols{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.2fr;gap:28px}
.foot h3{color:#fff;font-size:15px;margin-bottom:12px}
.foot a{text-decoration:none}
.foot a:hover{color:#fff}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.foot .legal{max-width:var(--max);margin:36px auto 0;padding-top:18px;border-top:1px solid #23242a;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:12px;color:#77766f}
.foot .logo img{height:30px;filter:brightness(0) invert(1);opacity:.92}
@media (max-width:860px){ .foot .cols{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .foot .cols{grid-template-columns:1fr} }

/* mobile bottom bar */
.mbar{display:none}
@media (max-width:700px){
  .mbar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--night);padding-bottom:env(safe-area-inset-bottom,0px)}
  .mbar a{color:#fff;text-decoration:none;text-align:center;padding:14px 6px;font-size:15px}
  .mbar a+a{background:var(--lamp);font-weight:700}
  body{padding-bottom:52px}
}
.stage .stimg{width:100%;aspect-ratio:4/3;object-fit:cover;margin-bottom:12px}
.item .ph img.contain{object-fit:contain;padding:8px}
@media (prefers-reduced-motion:reduce){ *{transition:none!important;scroll-behavior:auto!important} }