/* DECOR (design pass 2026-11-08): decals, framing traces, outline echo. Classes come from decor.js:
   html.dc-on (decals), html.tr-on (traces), html[data-echo=a|b|c] (echo variant). */

/* ---------- decals: small, at corners and edges, accent or low-contrast grey; never over the renders or the copy */
.dc{position:absolute;z-index:6;pointer-events:none;display:flex;flex-direction:column;align-items:flex-start;gap:7px;
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;line-height:1.2;
  opacity:0;transform:translateY(6px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.dc.in{opacity:1;transform:none}
.dc svg{display:block;overflow:visible;fill:currentColor}
.dc.tone-acc{color:var(--acc)}
.dc.tone-acc span{color:var(--dim)}
.dc.tone-grey{color:rgba(233,230,223,.34)}
.dc.tone-ink{color:rgba(10,10,11,.34)}
/* chevron sweep: the chevrons light one after another when the decal enters (reverses with the site's entrances) */
.dc .sweep .cv{opacity:.18}
.dc.in .sweep .cv{animation:dcSweep .9s cubic-bezier(.22,1,.36,1) calc(var(--i,0) * 70ms) both}
@keyframes dcSweep{0%{opacity:.18}45%{opacity:1}100%{opacity:.85}}
/* model tag */
.dc-hero b,.dc-pghero b{font-family:var(--mono);font-weight:600;font-size:22px;letter-spacing:.06em;color:var(--cream);line-height:1;
  padding:6px 12px 5px;border:1px solid rgba(233,230,223,.22);clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px))}
/* RX-1 tag faces (html[data-tag]); the frame follows each face's proportions */
html[data-tag="bevon"] .dc-hero b,html[data-tag="bevon"] .dc-pghero b{font-family:"ZB Line",var(--mono);font-weight:400;font-size:21px;letter-spacing:.03em;padding:7px 12px 3px}   /* smaller (Aaron 2026-11-08) */
html[data-tag="chakra"] .dc-hero b,html[data-tag="chakra"] .dc-pghero b{font-weight:700;font-size:24px;letter-spacing:.05em}
html[data-tag="tektur"] .dc-hero b,html[data-tag="tektur"] .dc-pghero b{font-family:"Tektur",var(--mono);font-weight:700;font-size:23px;letter-spacing:.04em;padding:7px 13px 5px}
html[data-tag="michroma"] .dc-hero b,html[data-tag="michroma"] .dc-pghero b{font-family:"Michroma",var(--mono);font-weight:400;font-size:18px;letter-spacing:.1em;padding:9px 14px 8px}
html[data-tag="lettering"] .dc-hero b,html[data-tag="lettering"] .dc-pghero b{padding:9px 14px;line-height:0}
.dc b .lkr{display:block;height:19px;width:auto;aspect-ratio:4.2905;fill:var(--cream)}
@media (max-width:820px){html[data-tag="bevon"] .dc-hero b{font-size:16px;padding:6px 10px 2px}html[data-tag="chakra"] .dc-hero b{font-size:19px}html[data-tag="tektur"] .dc-hero b{font-size:18px}html[data-tag="michroma"] .dc-hero b{font-size:14px}.dc-hero b .lkr{height:15px}}
/* tag block: the chevron row is exactly as wide as the box below it */
.dc .tagw{display:grid;gap:7px}
.dc .chv{display:flex;justify-content:space-between;gap:10px}
.dc-pghero .tagw{justify-items:end}
/* module label */
.dc .mn{display:flex;align-items:center;gap:8px;color:rgba(233,230,223,.62);font-weight:600}
.dc .mn svg{color:var(--acc)}
/* chevron strip / boxed arrow: drawing and label side by side */
.dc-closing,.dc-specs{flex-direction:row;align-items:center;gap:12px}
/* positions (desktop) */
/* RX-1 tag: bottom-left corner, where the old 'Three details' label sat, clear of the ZEPHYR RX-1 title and its echo
   (Aaron 2026-11-08). Phones: left-aligned just above the full-width detail crops. */
.dc-hero{left:84px;bottom:56px}
.dc-ride{right:46px;top:84px}
.dc-carry{right:46px;bottom:56px}
.dc-why{right:46px;top:100px}
.dc-parts{left:84px;bottom:56px}
.dc-gallery{left:4px;top:calc(100% + 44px)}
.dc-specs{right:46px;bottom:44px}
.dc-closing{left:84px;bottom:58px}
.dc-pghero{right:38px;bottom:calc(4vh + 44px);align-items:flex-end}
.dc-batt{right:0;top:calc(9vh + 16px);align-items:flex-end}
@media (max-width:1100px){.dc-batt{display:none}}
@media (max-width:820px){
  .dc.nophone{display:none}
  .dc{font-size:9px;gap:6px}
  .dc-hero{left:22px;bottom:calc(34px + (100vw - 64px) / 3 * 10 / 16 + 50px)}.dc-hero b{font-size:17px}
  .dc-ride{right:22px;top:64px}
  .dc-why{right:22px;top:70px}
  .dc-gallery{top:calc(100% + 28px)}.dc-gallery svg{width:60px;height:60px}
  .dc-closing{left:22px;bottom:40px}
  .dc-batt{display:none}
}

/* ---------- framing traces: thin line, 45-degree elbow, ring at the start, dot at the end, one short thick accent segment.
   Desktop only (phones drop them). The line draws itself in when it enters. */
.ftr{position:absolute;height:24px;pointer-events:none;z-index:1}
.ftr svg{display:block;overflow:visible}
.ftr .tl{fill:none;stroke:rgba(233,230,223,.24);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.3s cubic-bezier(.65,0,.35,1)}
.ftr .tk{fill:none;stroke:var(--acc);stroke-width:3;opacity:0;transition:opacity .5s .9s}
.ftr .tr0{fill:none;stroke:rgba(233,230,223,.42);stroke-width:1.2;opacity:0;transition:opacity .4s}
.ftr .tr1{fill:rgba(233,230,223,.5);opacity:0;transition:opacity .4s 1.1s}
.ftr.in .tl{stroke-dashoffset:0}.ftr.in .tk,.ftr.in .tr0,.ftr.in .tr1{opacity:1}
#s9 .shead,#s10w .jintro{position:relative}
.ftr-specs{left:0;right:0;top:calc(100% + 12px)}
.ftr-closing{left:0;width:min(44vw,640px);bottom:calc(100% + 24px)}
.ftr-wait{left:0;right:0;top:calc(100% + 30px)}
.ftr-pghero{left:38px;right:38px;bottom:4vh}
@media (max-width:820px){.ftr{display:none}}

/* ---------- outline echo: an aria-hidden <svg> inside each title (decor.js), same box as the title, scaled about the title's ink
   centre. The host is isolated so the echo sits behind its own title and nothing else; each screen's overflow clips the spill. */
.echo{isolation:isolate}
.fhead .fno.echo,.ghead h2.echo,.askc h2.echo,.pghero h1.echo,.t-hero .ht.echo{position:relative}
.echo-svg{position:absolute;left:0;top:0;z-index:-1;overflow:visible;pointer-events:none;color:inherit;letter-spacing:0;text-transform:none}
.echo-svg tspan{transition:stroke .45s cubic-bezier(.22,1,.36,1)}
.echo-svg tspan.on{stroke:var(--big-ink)}
.echo-svg text{font:inherit;letter-spacing:0;fill:none;stroke:currentColor;stroke-width:2;vector-effect:non-scaling-stroke}   /* 2 px, half of it masked away inside the glyph */
.fhead .fno .echo-svg,.pghero h1 .echo-svg{color:var(--cream)}
.fhead .fno .echo-svg .el{opacity:.14}
.light .echo-svg{opacity:.8}
html[data-echo="b"] .echo-svg{will-change:transform}
/* the Tech-page header is not a pinned screen: clip the echo at its own edges (overflow:clip makes no scroll box) */
.pghero{overflow:clip}
/* phones: the multi-line headings are small and run near the screen edge there; no echo on them */
@media (max-width:820px){.askc .echo-svg,.pghero .echo-svg{display:none}}
@media (prefers-reduced-motion:reduce){.dc,.ftr .tl,.ftr .tk,.ftr .tr0,.ftr .tr1{transition:none}.dc.in .sweep .cv{animation:none;opacity:.85}}