/* ============================================================
   WERKSTATT — M_E_K CI since 10/2026 (documented in 50_marke/ci.md).
   Override layer on top of the v4 page styles: remaps the old tokens,
   removes mono labels, serif punchlines, gimmicks and round shapes.
   Loaded last in every page head, scoped to html[data-ci] so a page
   only switches when it carries data-ci="werkstatt".
   Tokens: werkstatt-tokens.css
   ============================================================ */

/* ---------- 1. Remap the v4 tokens onto the Werkstatt tokens ---------- */
html[data-ci]{
  --bg:var(--paper);
  --bg-2:var(--paper-2);
  --panel:var(--sheet);
  --line:var(--rule-soft);
  --line-2:var(--rule-medium);
  --lime:var(--signal);
  --lime-text:var(--signal-text);
  --orange:var(--signal);
  --nav-bg:color-mix(in srgb,var(--paper) 92%,transparent);
  --stamp-bg:var(--sheet);
  --card-shadow:var(--shadow);
  --sans:var(--font-body);
  --mono:var(--font-body);
  --serif:var(--font-head);
  --accent:var(--signal);
  --accent-2:var(--signal);
}
html[data-ci] .guarantee{--ink:inherit;--ink-2:inherit;--lime-text:inherit}
/* Shared nav/footer chrome (css/site-chrome.css) has its own token set */
html[data-ci][data-theme]{
  --chrome-lime:var(--signal);
  --chrome-lime-text:var(--signal-text);
  --chrome-nav-bg:color-mix(in srgb,var(--paper) 92%,transparent);
  --chrome-ink:var(--ink);
  --chrome-ink-2:var(--ink-2);
  --chrome-ink-3:var(--ink-3);
  --chrome-line:var(--rule-soft);
  --chrome-line-2:var(--rule-medium);
  --chrome-bg:var(--paper);
  --chrome-bg-2:var(--paper-2);
  --chrome-panel:var(--sheet);
  --chrome-shadow:var(--shadow);
}

/* Drawing-paper grid behind the whole page */
html[data-ci]{
  background-image:
    linear-gradient(var(--grid-major) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-major) 1px,transparent 1px),
    linear-gradient(var(--grid-minor) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-minor) 1px,transparent 1px);
  background-size:80px 80px,80px 80px,16px 16px,16px 16px;
}

/* ---------- 2. Typography ---------- */
html[data-ci] body{font-family:var(--font-body)}
html[data-ci] :is(.hero-h1,.sec-title,.video-head h2,.manifesto p.big,.case-copy h3,.pstep h3,.reason h3,.stat .n,.price .amt,.guarantee h3,.foot-big,.wordmark,.mnav a,.stamp .s2){font-family:var(--font-head);font-stretch:var(--head-stretch);letter-spacing:var(--head-tracking)}

/* Serif punchline words become ordinary words; optional signal underline */
html[data-ci] .serif,
html[data-ci] :is(.hero-h1,.sec-title,.video-head h2,.manifesto p.big,.case-copy h3,.guarantee h3) .serif{font-family:inherit;font-style:normal;font-weight:inherit;font-size:1em;letter-spacing:inherit;color:inherit}
/* Only the hero carries the accent underline; repeated in every headline it reads like a template */
html[data-ci] .hero-h1 .serif{background-image:linear-gradient(var(--signal),var(--signal));background-repeat:no-repeat;background-size:100% .12em;background-position:0 94%;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ---------- 3. Mono labels out: body font, sentence case, no tracking ---------- */
html[data-ci] :is(.pill,.chip,.sec-tag,.btn,.nav-links a,.nav-cta,.dd-menu a,.logo-sub,.mcol .k,.case-copy .idx,.case-stack,.cases-count,.fact,.stat .l,.reason .rn,.pstep .num,.pstep .no,.steps-more,.sec-note,.scroll-hint,.quote-meta .r,.mini-review .who,.mini-review .stars,.rev-nav button,.price .badge,.price .per,.price .more,.price ul,.crow,.crow .k,.form label,.form-head .t,.form-status,.form input,.form textarea,.foot-cols h4,.foot-cols a,.foot-bottom,.marquee-track span,.side-check,.stamp .s1,.stamp .s3,.promo-sound,.mnav a .idx,.quote-avatar,.mono){font-family:var(--font-body);text-transform:none;letter-spacing:0}
html[data-ci] :is(.pill,.chip,.sec-tag,.nav-links a,.nav-cta,.dd-menu a,.mcol .k,.case-copy .idx,.case-stack,.cases-count,.fact,.stat .l,.reason .rn,.pstep .no,.quote-meta .r,.mini-review .who,.price .badge,.price .per,.form label,.form-head .t,.foot-cols h4,.stamp .s1,.stamp .s3,.promo-sound,.side-check,.logo-sub){font-weight:600}
html[data-ci] .btn{font-weight:600}
html[data-ci] .stamp .s2{text-transform:none}

/* Labels in ink, the signal stays for actions and markers */
html[data-ci] :is(.sec-tag,.mcol .k,.case-copy .idx,.foot-cols h4,.crow .k){color:var(--ink-2)}
html[data-ci] .sec-tag::before{background:var(--rule)}
html[data-ci] :is(.stat .n,.case-copy .sol b){color:var(--ink)}
html[data-ci] .reason .rn{color:var(--ink-3)}

/* Step numbers as position balloons */
html[data-ci] .pstep .num{display:inline-flex;align-items:center;justify-content:center;width:var(--balloon);height:var(--balloon);border:1.5px solid var(--ink);border-radius:50%;font-family:var(--font-head);font-weight:700;color:var(--ink);background:var(--sheet)}

/* ---------- 4. Gimmicks out ---------- */
/* Dark is the only mode, so the theme switches go too */
html[data-ci] :is(.grain,.cursor,.theme-prompt,.nav-clock,.theme-toggle,#mobileThemeToggle){display:none}
html[data-ci] .dot-live{animation:none;box-shadow:none}
html[data-ci] .video-play::before{display:none}
html[data-ci] .thread-svg path:nth-child(-n+2){display:none}
html[data-ci] .thread-svg path:last-child{stroke-width:var(--line-strong)}

/* ---------- 5. Square corners, hard lines ---------- */
html[data-ci] :is(.btn,.btn .btn-bg,.burger,.case-media,.chip,.dd-menu,.dd-menu a,.fact,.form,.form input,.form textarea,.form-status,.guarantee,.hero-media,.mini-review,.nav-cta,.nav-links a,.pill,.portrait,.price,.price .badge,.promo-frame,.promo-sound,.pstep,.quote-avatar,.quote-card,.reason,.rev-nav button,.side-check,.stamp,.stats,.theme-toggle,.video-frame,.video-play){border-radius:var(--radius-sm)}
html[data-ci] .stamp::before{border-radius:var(--radius-sm)}
html[data-ci] :is(.reason,.price,.quote-card,.mini-review,.form,.pstep){border-color:var(--rule)}

/* ---------- 6. Colour fix-ups for hard-coded dark values ---------- */
/* Wordmark as before: the E sits on a signal block, the dot carries the signal colour */
html[data-ci] :is(.wordmark .hl,.loader-mark .hl,.foot-big .hl,.nav .wordmark .hl,.site-footer .foot-big .hl){background:var(--signal);color:var(--signal-ink);padding:0 .12em}
html[data-ci] :is(.wordmark .dot,.nav .wordmark .dot,.foot-big .dot,.site-footer .foot-big .dot){color:var(--signal)}
html[data-ci] .chip{background:var(--sheet);color:var(--ink);border-color:var(--rule-soft);-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-ci] .chip em{color:var(--ink);font-weight:700}
/* Play button in ink so it stands out on the signal-coloured video thumbnail */
html[data-ci] .video-play{background:var(--ink);box-shadow:none}
html[data-ci] .video-play svg polygon{fill:var(--paper)}
html[data-ci] .price.featured{background:var(--sheet);color:var(--ink);border-color:var(--rule);border-top:6px solid var(--signal)}
html[data-ci] .price.featured :is(.per,ul,.desc){color:var(--ink-2)}
html[data-ci] .price.featured .badge{border-color:var(--rule);color:var(--ink)}
html[data-ci] .price.featured ul li::before{color:var(--signal-text)}
html[data-ci] .marquee{background:var(--paper-2);border-color:var(--rule)}


/* ---------- 9. Text on signal fills (white on magenta, ink on orange/lilac) ---------- */
html[data-ci] :is(.btn-primary,.btn-ghost:hover,.stamp:hover,.quote-avatar,.side-check,.nav-cta,.nav-cta:hover){color:var(--signal-ink)}
html[data-ci] ::selection{color:var(--signal-ink)}

/* ---------- 10. Reveal masks: room for descenders and the accent underline ---------- */
/* The reveal lines clip with overflow:hidden at line-height .9; grotesque descenders (g, p) and the underline sit below that box */
html[data-ci] :is(.hero-h1 .line,.wreveal .w){padding-bottom:.18em;margin-bottom:-.18em}

/* ---------- 11. Numbered kicker labels out ---------- */
/* Section kickers, case counter, reason numbers and menu indices were mono labels; step balloons stay */
html[data-ci] :is(.sec-tag,.cases-count,.reason .rn,.mnav a .idx){display:none}
html[data-ci] .sec-title{margin-top:0}

/* ---------- 12. Manifesto column labels ---------- */
html[data-ci] .sec-note{color:var(--ink-2)}

html[data-ci] .mcol .k{font-family:var(--font-head);font-stretch:var(--head-stretch);font-weight:700;letter-spacing:-.01em;line-height:1.2;color:var(--ink)}

/* ---------- 13. Calm hover: no lifting, scaling, tilting ---------- */
html[data-ci] :is(.nav-cta,.reason,.price,.theme-toggle,.btn):is(:hover,:focus-visible){transform:none}
/* The guarantee stamp keeps its tilt and simply stays put on hover */
html[data-ci] .stamp:hover{transform:rotate(6deg)}
@media (max-width:900px){html[data-ci] .stamp:hover{transform:rotate(-3deg)}}
html[data-ci] .video-frame:hover img{transform:none}

/* ---------- 14. Type scale: every text belongs to exactly one role ---------- */
html[data-ci] .hero-h1{font-size:var(--fs-display)}
html[data-ci] :is(.sec-title,.guarantee h3,.stat .n){font-size:var(--fs-headline)}
html[data-ci] :is(.video-head h2,.manifesto p.big,.case-copy h3,.price .amt,.mnav a){font-size:var(--fs-subhead)}
html[data-ci] :is(.reason h3,.mcol .k,.pstep h3,.quote-card .q,.stamp .s2){font-size:var(--fs-mini)}
html[data-ci] :is(body,.hero-sub,.team-prose,.mcol p,.case-copy .prob,.case-copy .sol,.pstep .yes,.reason p,.mini-review p,.guarantee p,.sec-note,.quote-meta .n,.crow){font-size:var(--fs-text)}
html[data-ci] :is(.mono,.logo-sub,.dd-menu a,.nav-links a,.mnav a .idx,.pill,.chip,.stamp .s1,.stamp .s3,.scroll-hint,.marquee-track span,.sec-tag,.cases-count,.case-copy .idx,.fact,.case-stack,.pstep .num,.pstep .no,.steps-more,.stat .l,.reason .rn,.quote-avatar,.quote-meta .r,.mini-review .stars,.mini-review .who,.price .badge,.price .per,.price ul,.price .desc,.price .more,.side-check,.crow .k,.form-head .t,.form label,.form-status,.foot-cols h4,.foot-cols a,.foot-cols p,.foot-bottom,.promo-sound){font-size:var(--fs-subtext)}
html[data-ci] :is(.btn,.nav-cta,.form input,.form textarea,.rev-nav button){font-size:var(--fs-control)}


/* ---------- 16. Hero: layout of the live page; a knot drawing marks where the thread starts ---------- */
/* Position matches the thread start in the page script (x 82 %, 52vh above the hero end), right of the headline */
html[data-ci] .hero-media,html[data-ci] .hero .scroll-hint{display:none}
html[data-ci] .hero-knot{position:absolute;left:82%;top:calc(100% - 52vh);width:clamp(220px,22vw,360px);transform:translate(-50%,-50%);color:var(--ink-3);z-index:0;pointer-events:none}
html[data-ci] .hero-knot .knot{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
html[data-ci] .hero-knot .knot-end{fill:var(--signal)}
/* Full wrap width (the flex column otherwise shrinks it to the headline), so hero, nav and sections share one grid */
html[data-ci] .hero>.wrap{width:100%}
/* The stamp moves below the knot, clear of the wider Archivo headline */
html[data-ci] .hero .stamp{top:auto;bottom:calc(var(--space-4xl) + var(--space-3xl) + var(--space-xl))}
/* Less air above the headline; buttons sit right after the intro text instead of at the far edge */
html[data-ci] .hero{justify-content:flex-start;min-height:0;padding-top:var(--space-xl);padding-bottom:var(--space-3xl)}
html[data-ci] .hero-top{padding-top:0}
html[data-ci] .hero-foot{grid-template-columns:minmax(0,46ch) auto;justify-content:start;column-gap:var(--space-3xl)}
@media (max-width:1100px){html[data-ci] .hero-knot{display:none}}
@media (max-width:900px){html[data-ci] .hero-foot{grid-template-columns:1fr}}

/* ---------- 17. Case illustrations: line drawings of each usability idea (inline SVG, themed via tokens) ---------- */
html[data-ci] .case-media{background:var(--sheet)}
html[data-ci] .case-illustration{display:block;width:100%;height:100%;color:var(--ink)}
html[data-ci] .case-illustration .sheet{fill:var(--sheet)}
html[data-ci] .case-illustration .grid{fill:none;stroke:var(--grid-minor);stroke-width:1}
html[data-ci] .case-illustration .ink{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html[data-ci] .case-illustration .ink.sheet{fill:var(--sheet)}
html[data-ci] .case-illustration .ink-thin{fill:none;stroke:var(--ink-3);stroke-width:1.5;stroke-linecap:round}
html[data-ci] .case-illustration .ink-dash{fill:none;stroke:currentColor;stroke-width:1.5;stroke-dasharray:6 6}
html[data-ci] .case-illustration .fill{fill:currentColor}
html[data-ci] .case-illustration .signal{fill:none;stroke:var(--signal);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
html[data-ci] .case-illustration .signal-fill{fill:var(--signal)}
html[data-ci] .case-illustration .on-signal{fill:none;stroke:var(--signal-ink);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
html[data-ci] .case-illustration .balloon{fill:var(--sheet);stroke:currentColor;stroke-width:2}
html[data-ci] .case-illustration text{fill:currentColor;font-family:var(--font-body)}
html[data-ci] .case-illustration .label{font-size:17px;font-weight:600}
html[data-ci] .case-illustration .label-small{font-size:14px;fill:var(--ink-2)}
html[data-ci] .case-illustration .num{font-size:15px;font-weight:700;text-anchor:middle;dominant-baseline:central}
html[data-ci] .case-illustration .end{text-anchor:end}
html[data-ci] .case-illustration .middle{text-anchor:middle}
/* The year chip becomes a caption below the drawing, so it never covers a part of it */
html[data-ci] .case-media{overflow:visible;margin-bottom:var(--space-2xl)}
html[data-ci] .case-media .year{top:100%;right:auto;bottom:auto;left:0;margin-top:var(--space-sm)}

/* ---------- 18. Cases start closer to their headline ---------- */
html[data-ci] .cases .sec-head{margin-bottom:var(--space-lg)}
/* The pinned case area is only as tall as its content, so the next section follows right after the last case */
html[data-ci] .cases-sticky{justify-content:flex-start;padding-top:calc(var(--nav-h) + var(--space-md));padding-bottom:var(--space-xl);gap:var(--space-lg);height:auto}

/* ---------- 19. Vector wordmark (assets/werkstatt/logo, built by scripts/build-logo.py) ---------- */
html[data-ci] .mek-logo{display:block;width:auto;height:1.25em}
html[data-ci] .nav .wordmark{font-size:var(--fs-mini);line-height:1}
html[data-ci] .foot-big .mek-logo{width:min(100%,1100px);height:auto}

/* ---------- 20. Sub pages: rules that hold for every page ---------- */
/* No caps, no tracking anywhere; only headlines keep their tight tracking */
html[data-ci] body *{text-transform:none!important;letter-spacing:normal!important}
html[data-ci] :is(h1,h2,h3,.hero-h1,.sec-title,.foot-big,.price .amt,.stat .n,.case-copy h3,.video-head h2,.manifesto p.big,.guarantee h3,.mnav a){letter-spacing:var(--head-tracking)!important}
html[data-ci] :is(button,input,textarea,select){font-family:inherit}

/* Font variables of older page styles (lexware-office-lager.css, styles.css) */
html[data-ci],html[data-ci] .lx-page{
  --lx-sans:var(--font-body);--lx-mono:var(--font-body);--lx-serif:var(--font-head);
  --font-sans:var(--font-body);--font-display:var(--font-head);--font-mono:var(--font-body);--font-serif:var(--font-head);
}
html[data-ci] .lx-serif{font-style:normal}

/* Highlight words: underline in the page headline, plain everywhere else */
html[data-ci] h1 .hl{background:linear-gradient(var(--signal),var(--signal)) no-repeat 0 94%/100% .12em;color:inherit;padding:0;-webkit-box-decoration-break:clone;box-decoration-break:clone}
html[data-ci] :is(h2,h3,h4,.sec-title) .hl{background:none;color:inherit;padding:0}

/* Intro and description text */
html[data-ci] :is(.sub,.hero .sub,.wrap .sub,.cf-hero .sub,.sec-head .sec-sub,.sec-head .sec-desc,.cf-section-head .sec-sub,.blog-header .blog-subtitle,.feature p,.domain p,.feat-item p,.comp-item p,.cta-panel p,.sub b){font-size:var(--fs-text);line-height:1.55}

/* Labels, panel rows, tags, list items */
html[data-ci] :is(li,.hs-row .k,.hs-row .v,.v em,.aside-row .k,.aside-row .v,.stack-tags .stack-tag,.ep-row .k,.ep-row .v,.case-stack span,.cs-tags span,.price-feat li,.ps-list li,.panel-card .panel-label,.stat-item .stat-l,.case-img .tag,.case-img .year,.case-body .cid,.sig-n,.aside-panel .aside-panel-head,.breadcrumb a,.breadcrumb span,.p-step .p-time,.p-desc b,.price-features li,.domain .d-tag,.feature .f-num,.card .card-num,.tech-card .tech-label,.uptime-row .service,.status .val,.pick span,.feat-item .fi-num,.label,.tag,.hs-header .hs-title,.project-hero .back-link,.project-meta span,.cta-panel .cta-label,.wrap .page-label,.solution .s-tag,.comp-item .ci-label,.use-case .uc-tag,.stat-item .l,.tl-duration,.hero .hero-badge,.example .example-tag,.before-after .from,.before-after .to,.inc-card .inc-label,.timeline-step .timeline-phase,.challenge .challenge-num,.case-study .cs-label,.cs-stat .l,.model .m-badge,.price-col .price-badge,.price-col .price-sub,.case .case-tag,.ps-col .ps-badge,.ps-col .ps-per,.dl span,.form .kit-fine,.legal-container .back-link,.legal-header .tag,.legal-header .sub,label,.ba-col .ba-label,.ep-header .ep-title,.who-card .k,.field .hint,.when-card .wc-label,.cf-hero .cf-hero-badge,.portrait-mek .cap,.form-head .title,.price-left .label,.price-left .per,.uptime-header .uptime-title,.uptime-box div,.band figcaption,.candidates .k,.definition .k,.wrap .heft-eyebrow,.gen-meta a,.gen-meta span,.blog-header .blog-header-label,.blog-list .blog-loading,.blog-post-detail .blog-back-link,.lx-wrap .lx-tag,.lx-wrap .lx-legal,.cookie-badge-required){font-size:var(--fs-subtext)}
/* Article text keeps body size; code keeps a monospace face */
html[data-ci] .blog-post-detail .blog-post-content :is(li,p){font-size:var(--fs-text)}
html[data-ci] :is(code,pre,kbd,samp){font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
/* Leftover small text that sits in plain divs or paragraphs */
html[data-ci] :is(.uptime-box div,.gen-meta .gen-reset){font-size:var(--fs-subtext)}
html[data-ci] .cf-form-wrap .form-submit{font-size:var(--fs-control)}

/* ---------- 21. Oldest page style (css/styles.css, briefing guide) ---------- */
html[data-ci]{
  --color-primary:var(--signal);--color-primary-dark:var(--signal);--color-primary-light:var(--signal-text);
  --color-secondary:var(--signal);--color-accent:var(--signal);
  --color-bg:var(--paper);--color-bg-alt:var(--paper-2);--color-bg-dark:var(--paper-2);
  --color-surface:var(--sheet);--color-surface-hover:var(--sheet);
  --color-text:var(--ink);--color-text-secondary:var(--ink-2);--color-text-light:var(--ink-3);
  --color-border:var(--rule-soft);
  --border-radius:var(--radius-sm);--border-radius-sm:var(--radius-sm);--border-radius-lg:var(--radius-sm);
  --shadow-sm:none;--shadow-md:none;--shadow-lg:none;--shadow-xl:none;
}
html[data-ci] :is(.briefing-content,.cookie-banner,.cookie-settings-content){background:var(--sheet);color:var(--ink);border:var(--line-hair) solid var(--rule-soft);border-radius:var(--radius-sm)}

/* ---------- 22. Printing (heft generator): the light print version of the CI on paper ---------- */
@media print{
  html[data-ci],html[data-ci] #printArea{
    --paper:#ffffff;--sheet:#ffffff;--ink:#141414;--ink-2:#55544e;--ink-3:#8b8a83;
    --rule:#141414;--rule-soft:rgba(20,20,20,.16);--signal-text:#8e1279;
    background:#ffffff;
  }
  html[data-ci] #printArea{color:var(--ink)}
}

/* ---------- 23. Loading screen: vector wordmark and a quiet percentage ---------- */
html[data-ci] .loader{background:var(--paper)}
html[data-ci] .loader-mark .mek-logo{height:clamp(44px,6vw,72px);width:auto;margin:0 auto}
html[data-ci] .loader-pct{font-size:var(--fs-subtext);font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums;margin-top:var(--space-md)}