/* Article top (2026-10-26, inner_news.twig): breadcrumbs in place of the old "Back" link and the contents above the text.
   The site's own quiet greys, uppercase small caps like the old link, the chapter marker is the site's 17px list line. */
.new-article-page{--dzt-dim:#939393;--dzt-low:#646464;--dzt-ink:rgba(255,255,255,.8);--dzt-sep:#3a3a3a}
.light .new-article-page{--dzt-dim:#646464;--dzt-low:#939393;--dzt-ink:#151515;--dzt-sep:#c8c8c8}

.dz-crumbs{display:flex;align-items:baseline;gap:0 10px;min-width:0;margin-bottom:37px;font-size:11px;line-height:1.6;font-weight:500;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.dz-crumbs a{flex:none;color:var(--dzt-dim);text-decoration:none;transition:color .4s}
.dz-crumbs a:hover{color:var(--dzt-ink)}
.dz-crumbs-sep{flex:none;color:var(--dzt-sep)}
.dz-crumbs-cur{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--dzt-ink)}
@media screen and (min-width:768px){.dz-crumbs{margin-bottom:48px;font-size:12px;gap:0 12px}}
@media screen and (min-width:1200px){.new-article-page .dz-crumbs{grid-column:1/3}}

.dz-toc{margin:0 0 44px}
.dz-toc-t{margin:0 0 12px!important;font-size:11px!important;line-height:1.6;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--dzt-low)}
.dz-toc ol{list-style:none;margin:0;padding:0}
.dz-toc li{margin:0;padding:0}
.dz-toc li:before{display:none}
.dz-toc a{position:relative;display:block;padding:7px 0 7px 32px;font-size:15px;line-height:1.4;font-weight:400;color:var(--dzt-dim);text-decoration:none;transition:color .4s}
.dz-toc a:before{content:"";position:absolute;left:0;top:17px;width:17px;border-top:1px solid var(--dzt-low);transition:width .45s cubic-bezier(.2,.7,.2,1),border-color .4s}
.dz-toc a:hover{color:var(--dzt-ink)}
.dz-toc a:hover:before{width:24px;border-color:var(--dzt-ink)}
.dz-toc a:focus{outline:none}
.dz-toc a:focus-visible{color:var(--dzt-ink);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
/* long lists: six chapters, then "Show all N" */
.dz-toc.is-long:not(.is-open) li:nth-child(n+7){display:none}
.dz-toc-more{display:inline-flex;align-items:baseline;gap:8px;margin:10px 0 0 32px;padding:4px 0;background:none;border:0;border-bottom:1px solid var(--dzt-low);border-radius:0;font:inherit;font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--dzt-ink);cursor:pointer;-webkit-appearance:none;appearance:none;transition:border-color .4s}
.dz-toc-more:hover{border-color:var(--dzt-ink)}
.dz-toc-more span{color:var(--dzt-low)}
@media screen and (min-width:1200px){.dz-toc a{font-size:16px}.dz-toc a:before{top:18px}}
/* a chapter opened from the contents lands below the fixed header */
.new-article-page :is(h2,h3)[id]{scroll-margin-top:96px}
@media (prefers-reduced-motion:reduce){.dz-toc a,.dz-toc a:before{transition:none}}

/* the same line over the hero picture of projects and services: white like the title in both themes (the hero is a dark photo) */
.dz-crumbs--hero{position:relative;z-index:2;max-width:100%;margin-bottom:22px;--dzt-dim:rgba(255,255,255,.72);--dzt-ink:rgba(255,255,255,.95);--dzt-sep:rgba(255,255,255,.4);text-shadow:0 1px 12px rgba(0,0,0,.35)}
.light .dz-crumbs--hero{--dzt-dim:rgba(255,255,255,.72);--dzt-ink:rgba(255,255,255,.95);--dzt-sep:rgba(255,255,255,.4)}
@media screen and (min-width:768px){.dz-crumbs--hero{margin-bottom:28px}}
/* the hero text rules of projects (bold, underlined, dark ink in the light theme) must not reach the crumbs */
.dz-crumbs a,.light .dz-crumbs a,.project-page .text-holder .dz-crumbs a,.light .project-page .text-holder .dz-crumbs a{font-weight:500!important;text-decoration:none!important;color:var(--dzt-dim)!important}
.dz-crumbs a:hover,.light .dz-crumbs a:hover,.project-page .text-holder .dz-crumbs a:hover,.light .project-page .text-holder .dz-crumbs a:hover{color:var(--dzt-ink)!important}
/* phones: over the hero the title follows right below, so the line ends with the section */
@media screen and (max-width:767px){
  .dz-crumbs--hero .dz-crumbs-cur,.dz-crumbs--hero .dz-crumbs-sep:has(+ .dz-crumbs-cur){display:none}
  .dz-crumbs--hero{margin-bottom:16px}
}

/* Contents as its own block (preview v2, Dzlive::TOC_BAR; owner 2026-10-26: open, never hidden, in columns): a hairline frame drawn like
   the site's buttons, the chapters numbered in grey, two columns from 768px when there are six or more */
.new-article-page{--dzt-line:#2a2a2a;--dzt-fill:rgba(255,255,255,.025)}
.light .new-article-page{--dzt-line:#d6d6d6;--dzt-fill:rgba(0,0,0,.02)}
.dz-toc2{margin:0 0 56px;padding:22px 18px 16px;border:1px solid var(--dzt-line);background:var(--dzt-fill)}
.dz-toc2-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 10px!important;font-size:11px!important;line-height:1.6!important;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--dzt-low)!important}
.dz-toc2-c{font-variant-numeric:tabular-nums}
.dz-toc2 ol{list-style:none;margin:0;padding:0}
.dz-toc2 li{margin:0;padding:0;break-inside:avoid}
.dz-toc2 li:before{display:none}
.dz-toc2 a{display:flex;align-items:baseline;gap:14px;padding:8px 0;font-size:14px;line-height:1.45;font-weight:400;color:var(--dzt-dim);text-decoration:none;transition:color .4s}
.dz-toc2-n{flex:none;min-width:18px;font-size:11px;font-weight:500;letter-spacing:.04em;color:var(--dzt-low);font-variant-numeric:tabular-nums;transition:color .4s}
.dz-toc2 a:hover,.dz-toc2 a:hover .dz-toc2-n{color:var(--dzt-ink)}
.dz-toc2 a:focus{outline:none}
.dz-toc2 a:focus-visible .dz-toc2-l{color:var(--dzt-ink);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
@media screen and (min-width:768px){
  .dz-toc2{padding:28px 32px 22px}
  .dz-toc2-h{margin-bottom:14px!important}
  .dz-toc2.is-cols ol{columns:2;column-gap:40px}
}
@media screen and (min-width:1200px){.dz-toc2 a{font-size:15px}}
@media (prefers-reduced-motion:reduce){.dz-toc2 a,.dz-toc2-n{transition:none}}

/* reading line on the very top edge, above the header (js/article-toc.js) */
.dz-read{position:fixed;left:0;right:0;top:0;z-index:101;height:2px;background:rgba(255,255,255,.8);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
.light .dz-read,body.light .dz-read{background:#151515}
html.dzb-lock .dz-read{visibility:hidden}

/* below 1200px (owner, as on peretz.agency): the chapter being read held under the header, all chapters in a sheet from the bottom
   (js/article-toc.js). The header's tint and blur, number in grey, title in ink, a hairline chevron; square, no shadows. */
.dz-tb,.dz-tsheet{--dzt-dim:#939393;--dzt-low:#646464;--dzt-ink:rgba(255,255,255,.8);--dzt-line:#2a2a2a}
.light .dz-tb,body.light .dz-tb,.light .dz-tsheet,body.light .dz-tsheet{--dzt-dim:#646464;--dzt-low:#939393;--dzt-ink:#151515;--dzt-line:#d6d6d6}
.dz-tb{position:fixed;right:0;z-index:90;display:flex;align-items:center;gap:14px;height:44px;margin:0;padding:0 6vw 0 calc(6vw - 4px);border:0;border-radius:0;background:none;font:inherit;color:var(--dzt-ink);text-align:left;cursor:pointer;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .35s cubic-bezier(.2,.7,.2,1),transform .35s cubic-bezier(.2,.7,.2,1),visibility 0s .35s}
.dz-tb:before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(0,0,0,.8);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.light .dz-tb:before,body.light .dz-tb:before{background:rgba(255,255,255,.8)}
.dz-tb.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .35s cubic-bezier(.2,.7,.2,1),transform .35s cubic-bezier(.2,.7,.2,1)}
.dz-tb:focus{outline:none}
.dz-tb:focus-visible span{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.dz-tb b{flex:none;font-size:11px;font-weight:500;letter-spacing:.06em;color:var(--dzt-low);font-variant-numeric:tabular-nums}
.dz-tb span{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:14px;line-height:1.3}
.dz-tb i{flex:none;width:8px;height:8px;margin:-4px 2px 0 0;border-right:1px solid var(--dzt-dim);border-bottom:1px solid var(--dzt-dim);transform:rotate(45deg);transition:transform .45s cubic-bezier(.2,.7,.2,1),margin .45s}
html.dz-tsheet-open .dz-tb i{transform:rotate(225deg);margin-top:4px}
.dz-tb em{position:absolute;left:0;right:0;bottom:0;border-top:1px solid var(--dzt-ink);transform:scaleX(0);transform-origin:0 50%}
.dz-tveil{position:fixed;inset:0;z-index:95;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .35s}
.dz-tsheet{position:fixed;right:0;bottom:0;z-index:96;display:flex;flex-direction:column;max-height:76vh;padding:22px 6vw calc(14px + env(safe-area-inset-bottom)) calc(6vw - 4px);border-top:1px solid var(--dzt-line);background:#0d0d0d;color:var(--dzt-ink);
  transform:translateY(102%);visibility:hidden;transition:transform .5s cubic-bezier(.2,.7,.2,1),visibility 0s .5s}
.light .dz-tsheet,body.light .dz-tsheet{background:#f0f0f0}
html.dz-tsheet-open .dz-tveil{opacity:1;pointer-events:auto}
html.dz-tsheet-open .dz-tsheet{transform:none;visibility:visible;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.dz-tsheet-h{display:flex;justify-content:space-between;gap:16px;margin:0 0 8px;font-size:11px;line-height:1.6;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--dzt-low)}
.dz-tsheet-c{font-variant-numeric:tabular-nums}
.dz-tsheet ol{list-style:none;margin:0;padding:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.dz-tsheet li{margin:0;padding:0}
.dz-tsheet a{display:flex;align-items:baseline;gap:14px;padding:11px 0;font-size:15px;line-height:1.4;color:var(--dzt-dim);text-decoration:none;transition:color .4s}
.dz-tsheet a .dz-toc2-n{flex:none;min-width:18px;font-size:11px;font-weight:500;letter-spacing:.04em;color:var(--dzt-low);font-variant-numeric:tabular-nums}
.dz-tsheet a.is-on,.dz-tsheet a.is-on .dz-toc2-n,.dz-tsheet a:active{color:var(--dzt-ink)}
/* the bar carries its own reading line; the burger menu hides the bar and the sheet */
@media screen and (max-width:1199px){html.dz-tb-on .dz-read{opacity:0}}
@media screen and (min-width:1200px){.dz-tb,.dz-tveil,.dz-tsheet{display:none!important}}
html.dzb-lock .dz-tb,html.dzb-lock .dz-tveil,html.dzb-lock .dz-tsheet{visibility:hidden}
@media (prefers-reduced-motion:reduce){.dz-tb,.dz-tb.is-on,.dz-tb i,.dz-tveil,.dz-tsheet,html.dz-tsheet-open .dz-tsheet{transition:none}}