/* Live HTML type, procedural metal and annotations share one editorial grid. */
.hero--artifact { min-height:800px;height:100svh;max-height:1220px;padding:66px var(--pad) 0;display:grid;grid-template-rows:68px 1fr 78px;isolation:isolate;overflow:hidden;border-bottom:1px solid var(--line);background:#050605 }
.hero--artifact::before { content:"";position:absolute;inset:66px 0 0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#d8d9d30b 1px,transparent 1px) var(--pad) 0 / 23% 100%,linear-gradient(#d8d9d309 1px,transparent 1px) 0 0 / 100% 25% }
.hero--artifact::after { content:"";position:absolute;z-index:2;inset:0;pointer-events:none;background:url("assets/print-grain.svg");opacity:.045 }
.artifact-edition { grid-row:1;display:flex;align-items:center;justify-content:space-between;gap:18px;font-size:9px;color:#a0a697;z-index:4 }
.artifact-edition i { color:#58604f;font-style:normal;padding:0 12px }
.artifact-edition__note { margin-left:10%;font-size:8px }
.hero--artifact .hero__copy { grid-row:2;align-self:center;width:66%;padding:7px 0;position:relative;z-index:3;pointer-events:none }
.hero--artifact .hero__eyebrow { font-size:clamp(9px,.8vw,13px);color:#b5b9ae;margin:0 0 20px;letter-spacing:.07em }
.hero--artifact .hero__eyebrow>span { color:var(--green);margin-right:15px }
.hero--artifact .hero__title { font:900 clamp(160px,min(20.8vw,31vh),380px)/.68 var(--display);letter-spacing:-.035em;margin:0 0 24px;position:relative }
.hero--artifact .hero__title>span { display:block;position:relative;width:max-content;padding-bottom:.035em;color:#dcddd5;background:url("assets/print-grain.svg"),linear-gradient(165deg,#e1e2da,#c9ccbf);background-blend-mode:multiply;background-clip:text;-webkit-text-fill-color:transparent }
.hero--artifact .hero__title>span::after { content:"";position:absolute;inset:0;opacity:.09;pointer-events:none;background:repeating-linear-gradient(172deg,transparent 0 69px,#050605 70px,transparent 71px 183px) }
.hero--artifact .artifact-title-mark { color:#8a9677;-webkit-text-fill-color:#8a9677;font-size:.71em;margin-left:.09em;vertical-align:7%;font-weight:900;opacity:.7 }
.hero--artifact .hero__statement { max-width:420px;width:53%;margin:0;font-size:clamp(19px,1.55vw,27px);line-height:1.25;letter-spacing:-.01em;color:#bfc5b7;text-wrap:pretty }
.hero--artifact .hero__actions { display:flex;gap:12px;margin-top:25px;flex-wrap:wrap;pointer-events:auto;width:fit-content;max-width:100% }
.hero--artifact .action { width:195px;min-height:49px;padding:14px 17px;font-size:10px }
.hero-art { position:absolute;z-index:1;left:36%;top:12%;width:62%;height:82%;pointer-events:none;contain:layout paint }
.hero-art canvas,.artifact-fallback { position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain }
.hero-art canvas { opacity:0;transition:opacity 650ms ease }
.artifact-fallback { opacity:.95;transition:opacity 650ms ease }
.hero-art[data-renderer="webgl"] canvas { opacity:1 }
.hero-art[data-renderer="webgl"] .artifact-fallback { opacity:0 }
.artifact-diagram { position:absolute;z-index:0;left:28%;top:10%;width:71%;height:86%;color:#869477;opacity:.36;pointer-events:none }
.artifact-scan { position:absolute;z-index:2;left:18%;right:12%;top:15%;height:1px;background:linear-gradient(90deg,transparent,#b9c5a8,transparent);opacity:0;pointer-events:none }
.hero-art.is-scanning .artifact-scan { animation:artifact-scan 1.4s ease-in-out both }
@keyframes artifact-scan { 0%{transform:translateY(0);opacity:0}18%,75%{opacity:.25}100%{transform:translateY(460px);opacity:0} }
.artifact-label { position:absolute;z-index:4;color:#98a38a;font-size:9px;line-height:1.55;pointer-events:none }
.artifact-label--top { right:11%;top:21%;display:grid;gap:7px;font-size:8px;transform:translate(var(--label-x,0px),var(--label-y,0px)) }
.artifact-label--top i { display:block;width:39px;border-top:1px solid #748465 }
.artifact-label--top span:last-child { color:#79836f;font-size:7px }
.artifact-label--side { top:46%;right:var(--pad);font-size:9px }
.artifact-label--side span { display:block;padding:9px 0;color:#58654b }
.artifact-readout { position:absolute;right:9%;bottom:16%;z-index:4;display:grid;gap:5px;font-size:8px;color:#818b74;padding-left:15px;border-left:1px solid #6d795e }
.artifact-readout b { color:#b0bd9a;font-weight:400;font-size:12px;letter-spacing:.13em }
.artifact-readout small { font-size:7px;margin-top:11px;color:#7c8473 }
.artifact-bottom { grid-row:3;display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #d8d9d321;position:relative;z-index:4;font-size:9px;color:#a2ad93 }
.artifact-bottom::before { content:"";position:absolute;left:64%;bottom:-79px;height:119px;border-left:1px solid #9baa7c3b;pointer-events:none }
.artifact-scroll { display:flex;align-items:center;gap:35px;min-height:48px }
.artifact-scroll b { font-size:24px;font-weight:400;transition:transform .2s }
.artifact-scroll:hover b { transform:translateY(4px) }
.artifact-bottom__note { font-size:8px;color:#7f8a70 }
.artifact-location { display:flex;gap:9px;align-items:center }
.artifact-location i { width:5px;height:5px;background:var(--green) }
@media(min-width:1001px) and (max-height:800px) {
 .hero--artifact{min-height:710px;grid-template-rows:50px 1fr 68px}
 .hero--artifact .hero__title{font-size:min(19vw,29vh);margin-bottom:23px}
 .hero--artifact .hero__copy{padding:15px 0 22px}
 .hero--artifact .hero__eyebrow{margin-bottom:22px}
 .hero--artifact .hero__statement{font-size:20px}
}
@media(min-width:1001px) and (max-width:1200px) {
 .hero--artifact .hero__statement{width:65%;font-size:20px}
 .hero--artifact .action{width:175px;font-size:9px}
 .artifact-edition__note{font-size:7px;margin-left:0}
}
@media(max-width:1000px) {
 .hero--artifact{height:auto;min-height:900px;max-height:none;grid-template-rows:60px 1fr 72px;padding-top:66px}
 .artifact-edition{font-size:8px}.artifact-edition__note{display:none}
 .hero--artifact .hero__copy{width:100%;padding:45px 0 80px}
 .hero--artifact .hero__title{font-size:27vw;margin-bottom:42px}
 .hero--artifact .hero__statement{width:48%;font-size:23px}
 .hero--artifact .hero__actions{max-width:48%;gap:10px}
 .hero--artifact .action{width:100%;font-size:11px;min-height:49px}
 .hero-art{left:31%;width:83%;top:30%;height:63%}
 .artifact-diagram{top:29%;left:15%;width:94%;height:62%}
 .artifact-label--top{display:none}.artifact-label--side{display:none}
 .artifact-readout{bottom:13%;right:5%}.artifact-bottom__note{display:none}
}
@media(max-width:620px) {
 .hero--artifact{min-height:0;padding:58px 20px 0;grid-template-rows:49px auto 66px}
 .hero--artifact::before{inset:58px 0 0;background-size:31% 100%,100% 20%}
 .artifact-edition{font-size:7px}.artifact-edition i{padding:0 5px}
 .hero--artifact .hero__copy{padding:26px 0 27px;display:flex;flex-direction:column}
 .hero--artifact .hero__eyebrow{font-size:7.5px;letter-spacing:.01em;margin-bottom:23px;white-space:nowrap}
 .hero--artifact .hero__eyebrow>span{margin-right:6px}
 .hero--artifact .hero__title{font-size:29.4vw;line-height:.76;margin:0 0 24px}
 .hero--artifact .hero__statement{width:100%;max-width:365px;font-size:19px;line-height:1.3}
 .hero--artifact .hero__actions{margin-top:342px;max-width:none;width:100%;flex-wrap:nowrap;gap:9px}
 .hero--artifact .action{width:auto;flex:1;min-width:0;font-size:8px;padding:12px 11px;gap:8px}
 .hero-art{top:auto;bottom:147px;left:-9%;width:118%;height:365px}
 .artifact-diagram{top:auto;bottom:135px;left:-24%;width:135%;height:420px}
 .artifact-label--top{display:grid;top:auto;bottom:410px;right:20px;font-size:6px}
 .artifact-label--top span:last-child{font-size:6px}
 .artifact-readout{bottom:175px;right:22px;font-size:6px;padding-left:9px}
 .artifact-readout b{font-size:9px}.artifact-readout small{font-size:6px;margin-top:5px}
 .artifact-bottom{font-size:7px;gap:15px}.artifact-scroll{gap:12px}.artifact-scroll b{font-size:19px}
 .artifact-location{gap:6px}.artifact-bottom::before{left:55%}
}
@media(prefers-reduced-motion:reduce) {
 .hero-art canvas,.artifact-fallback{transition:none}
 .hero-art.is-scanning .artifact-scan{animation:none;opacity:0}
 .artifact-label--top{transform:none}
}