/* LucidCairn v2 — editorial detailing and product-specific visual identities */
:root{--copper:#cfaa7e;--sage:#b9c6bd}
body{background:radial-gradient(ellipse at 74% 10%,#33483d56,transparent 49%),radial-gradient(ellipse at 8% 67%,#23393831,transparent 47%),var(--ink)}
.brand{letter-spacing:-.04em}.desktop-nav a{position:relative;transition:color .24s}
.desktop-nav a:after{content:"";position:absolute;left:0;right:100%;bottom:-9px;height:1px;background:var(--copper);transition:right .3s}
.desktop-nav a:hover:after,.desktop-nav a[aria-current]:after{right:0}
.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:110;transform:scaleX(0);transform-origin:left;background:var(--copper);pointer-events:none}
.hero{grid-template-columns:minmax(0,51%) minmax(0,49%);min-height:calc(100svh - 108px)}
.hero .eyebrow{font-size:10px;letter-spacing:.13em;margin-bottom:38px;color:#acc1b4}
.hero h1{font-size:clamp(58px,5.7vw,94px);line-height:1.09;letter-spacing:-.035em;margin-bottom:24px;white-space:normal}
.hero h1 em,.section h2 em,.contact h2 em{color:var(--copper)}
.hero-lead{font:clamp(26px,2.8vw,42px)/1.15 var(--serif);color:var(--paper);margin-bottom:19px}
.hero-support{font-size:18px;line-height:1.8;max-width:460px;color:#b9c8bc}
.hero .cta-row{margin-top:38px}.btn{border-radius:3px;transition:transform .25s,background-color .25s,border-color .25s}.btn:hover{transform:translateY(-2px)}
.link-arrow{font-size:20px;line-height:1;transition:transform .25s}.btn:hover .link-arrow{transform:translate(3px,-3px)}
.hero-footer{margin-top:65px;display:grid;gap:16px}.hero-index{margin-top:0;gap:18px}.hero-index i{width:75px;transition:width .3s}.hero-index:hover i{width:105px}
.hero-signature{font:italic 19px var(--serif);color:#9fb0a6}
.hero-art{width:100%;margin:0;isolation:isolate}
.hero-art .cairn{position:relative;z-index:2;transform:translate3d(var(--px,0px),var(--py,0px),0);transition:transform .5s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 19px 32px #030a0a77)}
.topography-ring{position:absolute;inset:10%;border-radius:50%;transform:rotate(-22deg);background:repeating-radial-gradient(ellipse at 52% 50%,transparent 0 30px,#99b5a51c 31px 32px,transparent 33px 47px)}
.hero-route{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.route-guide{stroke:#b7c5aa45;stroke-width:1.2;stroke-dasharray:3 8}
.route-draw{stroke:var(--copper);stroke-width:1.7;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .13s linear}
.route-dot{fill:var(--copper)}
.art-caption{position:absolute;top:16%;left:5%;z-index:4;display:grid;gap:5px;max-width:170px;color:#afc1b4;font:10px/1.5 var(--mono)}.art-caption span:first-child{color:var(--copper)}
.motion-switch{position:absolute;z-index:6;bottom:22px;right:0;border:1px solid #71867887;border-radius:999px;background:#132021d9;color:#c3d0c3;padding:8px 12px;font:10px var(--mono);display:flex;align-items:center;gap:8px}
.motion-switch:hover{color:var(--copper);border-color:var(--copper)}
#work{padding-top:120px}#work>h2{max-width:900px}#work>.section-intro{max-width:680px;color:#bbcabd;line-height:1.8}
.project-filters{display:flex;flex-wrap:wrap;gap:10px;margin:38px 0 -12px}
.project-filters button{border:1px solid #6d857988;border-radius:999px;background:transparent;color:#c1cdc2;padding:9px 16px;font:11px var(--mono);transition:background .2s,border-color .2s,color .2s}
.project-filters button:hover{border-color:var(--copper);color:var(--paper)}.project-filters button[aria-pressed=true]{background:var(--copper);color:#142021;border-color:var(--copper)}
.projects{gap:19px;margin-top:40px}
.project,.project.featured{padding:0;border-radius:3px;background:#172427;overflow:hidden;min-height:288px;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s,box-shadow .35s}
.project{grid-template-columns:minmax(0,43%) minmax(0,57%)}
.project.featured{grid-template-columns:50% 50%;min-height:386px}
.project:hover,.project:focus-within{transform:translateY(-5px);border-color:var(--copper);box-shadow:0 24px 45px #030a0a55}
.project[hidden]{display:none!important}
.project-copy,.featured .project-copy{padding:28px 29px;justify-content:center}
.featured .project-copy{padding:40px 56px}
.project h3{font:clamp(35px,3vw,53px)/1.05 var(--serif);letter-spacing:-.02em;margin:0 0 10px}.featured h3{font-size:clamp(67px,7vw,108px);letter-spacing:-.05em}
.project .label{font-size:10px;letter-spacing:.11em;margin-bottom:16px}
.project-copy>p:not(.label){color:#b4c4ba;font-size:14px;line-height:1.72}
.project-copy>p.project-byline{font:23px/1.2 var(--serif);color:var(--paper);margin:0 0 18px}
.project-action{gap:12px;font:12px var(--mono);min-height:38px;transition:gap .24s}.project-action:hover{gap:20px}
.project-origin{color:#8ca396;font:10px var(--mono);margin-top:18px}
.project-copy .status{font-size:11px;color:#91a79a}
.schematic.brand-scene{position:relative;min-height:100%;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;overflow:hidden;isolation:isolate}
.brand-scene:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:4;background:linear-gradient(135deg,#ffffff11,transparent 40%,#00000033)}
.scene-stamp{position:absolute;bottom:16px;left:18px;z-index:5;color:#d8e5d3c7;font:9px var(--mono);letter-spacing:.06em}
.folio-scene{background:radial-gradient(ellipse at 50% 38%,#647367,#2a3d36 55%,#17282a)}
.folio-sheet{position:absolute;top:15%;left:20%;width:61%;height:69%;background:#e7decb;color:#29372e;border:1px solid #f3eee3;box-shadow:16px 23px 24px #07110f88;padding:23px;transform:rotate(-6deg);transition:transform .55s}
.folio-sheet.back{background:#8d9d91;transform:rotate(9deg) translate(15px,0)}
.project:hover .folio-sheet.front{transform:rotate(-2deg) translateY(-8px)}
.folio-sheet.front{display:flex;flex-direction:column;align-items:stretch;gap:10px}
.folio-kicker{font:10px var(--mono);letter-spacing:.04em}.folio-sheet i{height:2px;background:#768b7b70}.folio-sheet i:nth-of-type(2){width:70%}
.folio-sheet.front>span:not(.folio-kicker){font:10px/1.75 var(--mono);color:#4f5d54}
.folio-sheet b{font:italic 50px var(--serif);align-self:end;margin-top:auto;color:#617767}
.linga-scene{background:radial-gradient(ellipse at 50% 48%,#2e7c70,#12433f 58%,#102e31)}
.linga-orbit{position:absolute;inset:12%;border:1px solid #b1eed275;box-shadow:0 0 0 29px #b1eed20e;border-radius:50%;transform:rotate(-24deg) scaleY(.76);transition:transform .65s}
.project:hover .linga-orbit{transform:rotate(4deg) scaleY(.82)}
.linga-lockup{position:relative;z-index:1;font:600 clamp(47px,5vw,76px)/1 var(--sans);letter-spacing:-.105em;color:#e5ffee}
.linga-lockup span{color:#9defd1}.soundbars{position:relative;z-index:1;display:flex;align-items:center;gap:4px;height:27px}
.soundbars i{display:block;width:4px;height:12px;border-radius:3px;background:#b2eed7}
.soundbars i:nth-child(2n){height:19px}.soundbars i:nth-child(3n){height:24px}
.project:hover .soundbars i{animation:linga-pulse .82s ease-in-out infinite alternate;animation-delay:calc(var(--n)*-70ms)}
@keyframes linga-pulse{to{transform:scaleY(.48)}}
.quant-scene{background:radial-gradient(ellipse at 52% 29%,#355563,#223643 62%,#172830)}
.quant-key{position:absolute;top:18px;left:18px;color:#b2ccd3;font:9px var(--mono)}
.quant-scene svg{width:92%;height:85%;position:absolute;top:12%;transform:perspective(350px) rotateX(13deg)}
.quant-grid path{stroke:#a7bdc02c;stroke-width:1;fill:none}.quant-area{fill:#a7b5b723}.quant-line{stroke:#ead0a8;stroke-width:3;fill:none;filter:drop-shadow(0 0 4px #cba67888)}
.query-scene{background:radial-gradient(ellipse at 50% 6%,#6d5651,#382c2d 58%,#212728)}
.query-question{z-index:2;max-width:88%;border:1px solid #e9cba7;background:#ecdbc0;color:#322b27;padding:15px 11px;border-radius:7px 7px 7px 1px;font:clamp(17px,2vw,27px)/1.2 var(--serif);transform:rotate(-5deg);box-shadow:7px 10px 11px #07121266;transition:transform .4s}
.project:hover .query-question{transform:rotate(0) translateY(-6px)}
.query-process{display:flex;align-items:center;gap:5px;color:#ecd1be;font:8px var(--mono)}
.query-process span{padding:8px 5px;border:1px solid #bda3948a}.query-process b{font-size:15px}
.forge-scene{background:radial-gradient(ellipse at 50% 40%,#71543e,#37352e 60%,#202a26)}
.forge-ring{position:absolute;width:146px;height:146px;border:1px solid #ebc5918a;border-radius:34%;transform:rotate(45deg);transition:transform .7s}.project:hover .forge-ring{transform:rotate(60deg)}
.forge-mark{position:relative;z-index:1;color:#f1d5b0;font:59px var(--serif)}
.forge-lockup{position:relative;z-index:1;font:600 clamp(23px,2.3vw,35px) var(--sans);letter-spacing:-.07em;color:#f6e8d7}.forge-lockup span{color:#dfb779}
.forge-steps{position:relative;z-index:1;font:9px var(--mono);color:#ecd8ba}
#systems,#about{padding-top:130px}#systems .section-intro,#about .section-intro{line-height:1.87;color:#b5c9bc}
.contact{padding-block:130px 105px}
.reveal-pending{opacity:0;transform:translateY(24px)}.reveal-pending.in-view{opacity:1;transform:translateY(0);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
:lang(zh-CN) .hero h1{font-size:clamp(42px,4.6vw,73px);line-height:1.38}
:lang(zh-CN) .hero-lead{font-size:clamp(25px,2.8vw,36px)}
@media(max-width:1100px){
 .hero{grid-template-columns:50% 50%}.hero h1{font-size:clamp(52px,6vw,75px)}
 .project{grid-template-columns:1fr;min-height:0}.schematic.brand-scene{min-height:220px}
 .project.featured{grid-template-columns:46% 54%}.featured .project-copy{padding:25px}
}
@media(max-width:900px){
 .hero{display:grid;grid-template-columns:1fr;min-height:auto;padding-top:70px}
 .hero h1{font-size:clamp(52px,8vw,79px)}.hero-art{width:min(100%,630px);margin:auto}
 .hero-footer{margin-top:44px}
 .projects{grid-template-columns:1fr 1fr}.project.featured{grid-template-columns:1fr;grid-column:1/-1}
 .project.featured .brand-scene{height:285px}.project.featured .folio-sheet{width:55%;left:22%;height:75%;top:12%}
}
@media(max-width:600px){
 .hero{padding-top:34px}.hero h1{font-size:clamp(43px,10vw,65px)}
 .hero .eyebrow{font-size:9px;letter-spacing:.08em;margin-bottom:27px}
 .hero-lead{font-size:28px}.hero-support{font-size:16px}.hero .cta-row{margin-top:30px}.hero-footer{margin-top:32px}
 .art-caption{top:10%;left:4%;font-size:8px}.motion-switch{right:4px;bottom:2px}
 .section{padding-top:80px}.projects{grid-template-columns:1fr}
 .project,.project.featured{grid-column:auto;grid-template-columns:1fr}
 .project .brand-scene,.project.featured .brand-scene{min-height:230px;height:230px}
 .project-copy,.featured .project-copy{padding:25px}
 .project h3{font-size:44px}.featured h3{font-size:64px}
 .project-copy>p.project-byline{font-size:23px}
 .project-filters{gap:7px;margin-top:26px}.project-filters button{font-size:10px;padding:9px 12px}
 #systems,#about{padding-top:93px}
 :lang(zh-CN) .hero h1{font-size:clamp(35px,7.8vw,52px)}
 :lang(zh-CN) .hero-lead{font-size:25px}
}
@media(max-width:360px){
 .hero h1{font-size:41px}.hero .secondary{display:inline-flex}
 .hero .cta-row{gap:10px}.hero .btn{padding:12px 14px;font-size:13px}
 :lang(zh-CN) .hero h1{font-size:30px}.project h3{font-size:40px}
 .folio-sheet{padding:13px}
}
.motion-off .route-draw{stroke-dashoffset:0!important}
.motion-off .hero-art .cairn{transform:none!important;transition:none}
.motion-off .soundbars i{animation:none!important}
.motion-off .reveal-pending{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
 .route-draw{stroke-dashoffset:0!important}.hero-art .cairn{transform:none!important}
 .reveal-pending{opacity:1;transform:none}.soundbars i{animation:none!important}
 .project:hover,.project:focus-within{transform:none}
}
