/* =============================================================
   Violet Tek | Utilities
   Shell, type, rules, grids, surfaces, section head, QA touch targets.
   Ported verbatim from vt2.css - source is the visual authority.
   ============================================================= */

/* shell / type / rules (28-53) */
/* shell */
.shell{width:min(1560px,100% - 112px);margin:0 auto}
.shell-n{width:min(1180px,100% - 112px);margin:0 auto}
.act{position:relative;padding:var(--sec-y) 0}
.act-t{padding-top:var(--sec-y-sm)}
.light{background:var(--paper);color:var(--ink)}
.stone{background:var(--soft-stone);color:var(--ink)}
.panel{background:var(--near-black)}
/* type */
.d1{font-family:var(--font-display);font-weight:700;font-size:clamp(50px,10.8vw,176px);line-height:.88;letter-spacing:-.052em}
.d2{font-family:var(--font-display);font-weight:700;font-size:clamp(38px,6.1vw,102px);line-height:.95;letter-spacing:-.042em}
.d3{font-family:var(--font-display);font-weight:600;font-size:clamp(27px,3.1vw,50px);line-height:1.08;letter-spacing:-.028em}
.d4{font-family:var(--font-display);font-weight:600;font-size:clamp(19px,1.5vw,25px);line-height:1.25;letter-spacing:-.012em}
.mono{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-muted);margin:0}
.mono-s{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin:0}
.light .mono,.stone .mono{color:var(--muted-slate)}
.p-lg{font-size:clamp(17px,1.3vw,21px);line-height:1.5;color:var(--on-dark);text-wrap:pretty}
.p{font-size:16px;line-height:1.65;color:var(--on-dark);text-wrap:pretty}
.p-s{font-size:14px;line-height:1.6;color:var(--on-dark-muted);text-wrap:pretty}
.light .p-lg,.stone .p-lg{color:var(--slate)}.light .p,.stone .p{color:var(--slate)}.light .p-s,.stone .p-s{color:var(--muted-slate)}
.light a,.stone a{color:var(--ink)}.light a:hover,.stone a:hover{color:var(--slate)}
.measure{max-width:min(56ch,100%)}.measure-s{max-width:min(44ch,100%)}
/* rules */
.hr{height:1px;background:var(--dark-hairline);border:0;margin:0}
.light .hr,.stone .hr{background:var(--hairline)}
.motif{height:3px;border-radius:2px;background:var(--motif-gradient)}

/* footer base / utils / surfaces / section head (155-191) */
/* footer */
.ft{padding:var(--sec-y-sm) 0 var(--s-6);border-top:1px solid var(--dark-hairline)}
.ft a{color:var(--on-dark);font-size:14px}.ft a:hover{color:var(--text-inverse)}
/* utils */
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap-split)}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-grid)}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap-grid)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-split)}
.split>*,.split-a>*,.g2>*,.g3>*,.g4>*,.row-lg>*{min-width:0}
.split-a{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--gap-split)}
.row{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.col{display:flex;flex-direction:column}
@media (max-width:1100px){.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:1240px){.nav-links{display:none}.menu-btn{display:flex}.split,.split-a,.g2,.g3,.reel-fallback{grid-template-columns:1fr}.row-lg,.row-blog,.row-case,.row-step{grid-template-columns:1fr;gap:10px}.row-blog .tright{text-align:left!important}}
@media (max-width:640px){.shell,.shell-n{width:calc(100% - 44px)}.ov-close{right:22px}.g4{grid-template-columns:1fr}.reel-card{width:78vw}.reel-track{padding:0 22px}.reel-bar{left:22px;right:22px}}
.tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:11px 18px;border:1px solid var(--dark-hairline);border-radius:30px;color:var(--on-dark)}

/* --- section surfaces: one clear identity per act --- */
.s-ink{background:var(--ink)}
.s-panel{background:var(--near-black)}
.s-navy{background:var(--deep-navy)}
.s-green{background:var(--deep-green)}
.s-crimson{background:var(--deep-crimson)}
.s-paper{background:var(--paper);color:var(--ink)}
.s-stone{background:var(--soft-stone);color:var(--ink)}
.s-panel,.s-navy,.s-green,.s-crimson{border-top:1px solid var(--dark-hairline)}
.s-paper,.s-stone{border-top:1px solid var(--hairline)}
/* section head: mono index, rule, title */
.shead{display:flex;align-items:baseline;gap:var(--s-5);padding-bottom:var(--s-5);margin-bottom:var(--head-gap);border-bottom:1px solid var(--dark-hairline)}
.light .shead,.s-paper .shead,.s-stone .shead{border-color:var(--hairline)}
.shead .sh-i{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-muted)}
.s-paper .shead .sh-i,.s-stone .shead .sh-i{color:var(--muted-slate)}
.shead .sh-l{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.shead .sh-r{flex:1;height:1px;background:currentColor;opacity:.18}
.s-navy .p,.s-green .p,.s-crimson .p{color:var(--on-navy)}
.s-navy .mono,.s-green .mono,.s-crimson .mono{color:rgba(255,255,255,.5)}


/* QA pass: touch targets, focus, motion (370-395) */
/* ---- QA pass: touch targets, focus, motion ---- */
@media (pointer:coarse){
  .nav-links a,.ov-link,.link-u,.art-row,.svc-rel{min-height:44px;display:inline-flex;align-items:center}
  .art-row,.svc-rel{display:grid}
  .acc button{min-height:48px}
  .rail{display:none}
}
/* focus must be visible on dark and light surfaces alike */
.light :focus-visible,.s-paper :focus-visible,.s-stone :focus-visible{outline-color:var(--ink)}
/* the hero plate is decorative: never announce it, never let it shift layout */
.hero-bg img{display:block}
@media (prefers-reduced-motion:reduce){
  .mq-track{animation:none}
  .hero-bg img,.media image-slot{transform:none!important}
  *{scroll-behavior:auto!important}
}
/* print: the site is dark-on-dark, which wastes ink and reads badly */
@media print{
  .nav,.ov,.rail,.hero-bg,.slot-chrome,.slot-veil,.mq{display:none!important}
  body,.s-ink,.s-panel,.s-navy,.s-green,.s-crimson{background:#fff!important;color:#101012!important}
  .d1,.d2,.d3,.d4,h1,h2,h3{color:#101012!important}
  .p,.p-lg,.p-s,.mono{color:#3a3a42!important}
  a{color:#101012!important;text-decoration:underline}
  .act{padding:24px 0!important}
}


/* =============================================================
   ASTRA CONTAINER NEUTRALISATION

   Every view on this site is a full-bleed source layout whose
   internal width is controlled by .shell (min(1560px,100% - 112px)).
   Astra wraps content in .site-content > .ast-container, which it
   caps at 1240px with padding, and .ast-separate-container adds a
   boxed background. Only those specific conflicting declarations
   are overridden here - no other Astra styling is touched, and
   .shell is deliberately left exactly as the source defines it.
   ============================================================= */
#content.site-content > .ast-container{
  max-width:100%;
  width:100%;
  padding-left:0;
  padding-right:0;
  margin-left:auto;
  margin-right:auto;
}
#content.site-content{padding:0;background:none}

/* .ast-separate-container draws a boxed card around the content on
   CPT archives, singles and the 404. The source sections carry their
   own full-bleed surfaces, so the card must not render. */
.ast-separate-container #content.site-content > .ast-container{padding:0;background:none}
.ast-separate-container .ast-article-single,
.ast-separate-container .ast-article-post,
.ast-separate-container .ast-article-archive{
  background:none;padding:0;margin:0;border:0;box-shadow:none;
}
.ast-separate-container .site-main > .ast-row{margin:0}
.ast-plain-container #content.site-content > .ast-container{padding:0}

/* the XPro wrappers must not reintroduce a width limit */
.xpro-theme-builder-archive-wrapper,
.xpro-theme-builder-singular-wrapper,
.xpro-theme-builder-template{width:100%;max-width:100%;margin:0;padding:0}

/* guard against horizontal overflow from full-bleed backgrounds */
html,body{max-width:100%;overflow-x:hidden}