/* ASTACKRA Cutaway — production layer.
   The shell (header, Cutaway sections, footer, overlays) uses the Cutaway tokens. The page's real WordPress
   content keeps the existing brand tokens and sits on a porcelain sheet, the way the Cutaway concept
   places content in front of the drawing. */

/* 1. Shell tokens, scoped so they never leak into the real content */
.cx-live :is(.hdr,.sec:not(.real),.band-sec,.foot,.overlay,.mega,.marker,.rail,.toast,.bgwrap,.lx-free-tools,.lx-tools-launch){
  --ink:#0b111b; --ink-2:#111a27; --ink-3:#18222f; --line:#263243; --line-2:#334257;
  --porcelain:#e9eeef; --porcelain-2:#d5dde0; --p-ink:#141d29; --p-muted:#4c5966;
  --copper:#c4804f; --copper-hi:#e8ae84; --copper-deep:#8a4a24; --verdigris:#86b8aa;
  --text:#e8edef; --muted:#a3b0ba; --muted-2:#7f8d99;
  font-family:var(--f-body); color:var(--text);
}
html body.cx-live.ar-site.lx-site{background:#0b111b!important;color:#e8edef!important;padding-bottom:0;margin:0}
.cx-live .site{background:#0b111b;color:#e8edef}
.cx-live :is(.hdr,.sec:not(.real),.band-sec,.foot,.overlay,.mega) :is(h1,h2,h3){font-family:var(--f-display);font-weight:400;color:var(--text);letter-spacing:-.015em}
.cx-live :is(.hdr,.sec:not(.real),.band-sec,.foot,.overlay,.mega) :is(h1,h2,h3) em{color:var(--copper-hi)}
.cx-live :is(.hdr,.sec:not(.real),.foot,.overlay,.mega) :is(button,input,select,textarea){font-family:inherit}
.cx-live .lx-free-tools :is(h1,h2,h3){font-family:var(--f-display);font-weight:400}

.cx-live #wpadminbar ~ * .hdr{top:32px}
.cx-live .ar-skip{position:absolute;left:-9999px;top:8px;z-index:100;background:#e9eeef;color:#141d29;padding:.6rem 1rem;border-radius:999px}
.cx-live .ar-skip:focus{left:16px}
/* The old full-page assembly drawing is replaced by the Cutaway engine */
.cx-live .axm-stage,.cx-live .axs-assembly,.cx-live [data-assembly-stage]{display:none!important}

/* Over the light content sheet the header needs a solid ground to stay legible */
.cx-live .hdr .capsule{transition:background .3s,box-shadow .3s}
.cx-live .hdr.is-condensed .capsule{background:rgba(11,17,27,.94);box-shadow:0 18px 40px -18px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.06)}

/* The header already carries "Free tools"; the floating launcher only returns on phones */
html body.cx-live .lx-tools-launcher{display:none!important}
@media (max-width:760px){html body.cx-live .lx-tools-launcher{display:inline-flex!important}}

/* 2. Real page content on a porcelain sheet */
.cx-live .real{padding-block:clamp(24px,4cqi,64px);min-height:0}
.cx-live .real-in{position:relative;z-index:1;width:calc(100% - 2*clamp(12px,3cqi,40px));max-width:1320px;margin-inline:auto;background:var(--paper,#f1ece4);color:var(--text,#2d2722);font-family:var(--f-body);border-radius:4px;box-shadow:0 40px 90px -40px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.06);padding-block:clamp(28px,4.5cqi,72px);overflow:hidden}
.cx-live .real-in::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,#8a4a24,#e8ae84,#8a4a24)}
.cx-live .real-in :is(h1,h2,h3){font-family:var(--f-display);font-weight:400;letter-spacing:-.015em;text-wrap:balance}
.cx-live .real-in :is(h1,h2,h3) em{color:#8a4a24}
.cx-live .real-in .lx-shell,.cx-live .real-in .ar-wrap{max-width:1180px}
.cx-live .real-in .at-page-hero{padding-block:clamp(16px,3cqi,40px)}
.cx-live .real-in .at-page-hero h1{font-size:clamp(2.4rem,5.6cqi,5rem);line-height:1}
.cx-live .real-in .lx-reading-content a{color:#8a4a24}
.cx-live .real-in .lx-reading-content a:hover{color:var(--text,#2d2722)}
.cx-live .real-in img{max-width:100%;height:auto}
.cx-live .real-in table{max-width:100%}

/* 3. Rhythm between the Cutaway hero, the photo plate and the sheet */
.cx-live #tplRoot .hero{min-height:calc(var(--vh) * .7)}
.cx-live #tplRoot .band-sec + .real,.cx-live #tplRoot .hero + .real{padding-top:clamp(8px,2cqi,32px)}