/* LDT INC | shared styles for all pages */

@font-face{font-family:"Mona Sans";font-style:normal;font-weight:200 900;font-stretch:75% 125%;font-display:swap;src:url(../fonts/mona-sans-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Mona Sans";font-style:normal;font-weight:200 900;font-stretch:75% 125%;font-display:swap;src:url(../fonts/mona-sans-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Libre Baskerville";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/LibreBaskerville-Regular.woff2) format("woff2"),url(../fonts/LibreBaskerville-Regular.ttf) format("truetype")}
@font-face{font-family:"Libre Baskerville";font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/LibreBaskerville-Italic.woff2) format("woff2"),url(../fonts/LibreBaskerville-Italic.ttf) format("truetype")}
@font-face{font-family:"Libre Baskerville";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/LibreBaskerville-Medium.woff2) format("woff2"),url(../fonts/LibreBaskerville-Medium.ttf) format("truetype")}
@font-face{font-family:"Libre Baskerville";font-style:italic;font-weight:500;font-display:swap;src:url(../fonts/LibreBaskerville-MediumItalic.woff2) format("woff2"),url(../fonts/LibreBaskerville-MediumItalic.ttf) format("truetype")}
@font-face{font-family:"Libre Baskerville";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/LibreBaskerville-SemiBold.woff2) format("woff2"),url(../fonts/LibreBaskerville-SemiBold.ttf) format("truetype")}
@font-face{font-family:"Libre Baskerville";font-style:italic;font-weight:600;font-display:swap;src:url(../fonts/LibreBaskerville-SemiBoldItalic.woff2) format("woff2"),url(../fonts/LibreBaskerville-SemiBoldItalic.ttf) format("truetype")}
@font-face{font-family:"Libre Baskerville";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/LibreBaskerville-Bold.woff2) format("woff2"),url(../fonts/LibreBaskerville-Bold.ttf) format("truetype")}
@font-face{font-family:"Libre Baskerville";font-style:italic;font-weight:700;font-display:swap;src:url(../fonts/LibreBaskerville-BoldItalic.woff2) format("woff2"),url(../fonts/LibreBaskerville-BoldItalic.ttf) format("truetype")}

:root{--m:48px;--ease:cubic-bezier(.2,.7,.1,1);--sans:"Mona Sans",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;--serif:"Libre Baskerville","Times New Roman",serif;--graph:#7c7c7c}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#fff;color:#000}
body{font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
html{overflow-x:clip}
@media (hover:hover) and (pointer:fine){body,a,button,[data-act]{cursor:none}}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;text-align:left;letter-spacing:inherit}
ol,ul{list-style:none}
h1,h2,h3{font-weight:inherit;font-size:inherit}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus{outline:none}
:focus-visible{outline:1px solid currentColor;outline-offset:4px}

.wd{font-stretch:125%;font-variation-settings:"wdth" 125}
.it{font-family:var(--serif);font-style:italic;font-weight:400}
.caps{font-stretch:125%;font-variation-settings:"wdth" 125;text-transform:uppercase;letter-spacing:.14em;font-weight:500}
.pill{display:inline-block;border:1px solid currentColor;border-radius:20px;padding:2px 8px;font-size:11px;letter-spacing:.06em;font-variant-numeric:tabular-nums;font-weight:400;line-height:1.3}
.dx{color:#fff;mix-blend-mode:difference}

/* chrome: header, rail, cursor, opener */
.chrome{position:fixed;z-index:60;color:#fff;mix-blend-mode:difference}
#hdr{top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:28px var(--m);pointer-events:none;font-size:13px;letter-spacing:.02em}
#hdr a,#hdr button{pointer-events:auto}
#hdr .brand{font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:700;letter-spacing:.03em}
body.hero #railM{opacity:0;visibility:hidden}
/* landing header (prototype/landing-monolith-v3.html): identity top left, LDT INC takes its place once the landing is left */
html[data-page=home] #hdr{align-items:flex-start;padding-top:30px}
html[data-page=home] #hdr nav button{line-height:1}
#hdr .hdrL{position:relative;height:52px;min-width:320px}
#hdr .who,#hdr .hdrL .brand{position:absolute;left:0;top:1px;white-space:nowrap}
/* name and role in the voice of the chapter titles (Lena, 27.09.2026): the name like "System" (wide, strong, tight),
   the role like "One operating system." (Boska italic), close beneath it */
#hdr .hdrL:has(.who){height:64px}
#hdr .who .nm{display:block;font-stretch:125%;font-variation-settings:"wdth" 125;font-size:28px;font-weight:600;letter-spacing:-.035em;line-height:1}
#hdr .who .rl{display:block;font-family:var(--serif);font-style:italic;font-weight:400;font-size:26px;letter-spacing:-.005em;line-height:1;margin-top:3px}
#railM{transition:opacity .45s var(--ease),visibility .45s}
#hdr .brand span{font-weight:300;font-stretch:100%;font-variation-settings:"wdth" 100;margin-left:4px}
#hdr nav{display:flex;gap:30px}
#rail{right:var(--m);top:36%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-end;gap:10px}
#rail{transition:opacity .6s var(--ease),visibility .6s}
body.hero #rail{opacity:0;visibility:hidden}
#rail button{display:flex;align-items:center;gap:10px;font-stretch:125%;font-variation-settings:"wdth" 125;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;opacity:.42;transition:opacity .4s var(--ease)}
#rail button i{display:block;width:10px;height:1px;background:currentColor;transition:width .5s var(--ease),height .3s}
#rail button.on,#rail button:hover,#rail button:focus-visible{opacity:1}#rail button.on i{width:26px;height:1.5px}
#railM{display:none}
/* rail at rest (desktop): the whole rail fades to about 45 percent, so the other chapters sit near 19 and the current one near 45 percent; on contact the resting rail keeps a little more */
@media (hover:hover) and (min-width:761px){
  body.rail-idle:not(.hero) #rail{opacity:.45;transition:opacity 1.1s var(--ease),visibility .6s}
  body.rail-idle.at-end:not(.hero) #rail{opacity:.5}
  body:not(.rail-idle):not(.hero) #rail{transition:opacity .35s var(--ease),visibility .6s}
}
@media (prefers-reduced-motion:reduce){body.rail-idle #rail,body:not(.rail-idle) #rail{transition:none!important}}

/* back to top: a fine line with a tip, centred in the right margin so it never touches content; only on long pages and layers */
#totop{position:fixed;z-index:90;right:calc(var(--m) / 2 - 22px);bottom:26px;width:44px;height:58px;display:flex;align-items:flex-end;justify-content:center;opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s,transform .25s var(--ease)}
#totop.on{opacity:1;visibility:visible}
#totop i{position:relative;display:block;width:1px;height:44px;background:currentColor}
#totop i::before,#totop i::after{content:"";position:absolute;left:0;top:0;width:1px;height:11px;background:currentColor;transform-origin:50% 0}
#totop i::before{transform:rotate(38deg)}#totop i::after{transform:rotate(-38deg)}
#totop:focus-visible{outline:1px solid currentColor;outline-offset:4px}
html:not(.kbd) .ov [data-close]:focus-visible{outline:none}
#cur,#ring{position:fixed;left:0;top:0;pointer-events:none;z-index:100;will-change:transform}
#cur{width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#fff;mix-blend-mode:difference}
#ring{width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;border:1px solid #b9bec3;display:flex;align-items:center;justify-content:center;mix-blend-mode:difference;transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),background .3s}
#ring b{color:#000;font-weight:300;font-size:20px;opacity:0;transition:opacity .2s}
#ring.on2{width:58px;height:58px;margin:-29px 0 0 -29px;background:#fff;border-color:#fff}
#ring.on2 b{opacity:1}
@media (hover:none),(pointer:coarse){#cur,#ring{display:none}}
body.ptr-rest #cur,body.ptr-rest #ring{opacity:0;transition:opacity .6s var(--ease)}
#totop:focus-visible{opacity:1;visibility:visible}

.opener{position:fixed;top:0;bottom:0;z-index:95;background:#000;pointer-events:none;width:0}
#band{position:fixed;left:0;right:0;top:0;height:84px;z-index:59;pointer-events:none;opacity:0;transition:opacity .25s}
#band.white{background:#fff;opacity:1}#band.black{background:#000;opacity:1}
/* the band ends in a short soft fade instead of a hard edge, so black shapes passing under it are not cut off by a strip */
#band::after{content:"";position:absolute;left:0;right:0;top:100%;height:22px}
#band.white::after{background:linear-gradient(#fff,rgba(255,255,255,0))}#band.black::after{background:linear-gradient(#000,rgba(0,0,0,0))}
html.cut-in body::after{content:"";position:fixed;inset:0;z-index:96;background:#000}

/* shared editorial parts */
.shine{position:absolute;top:-20%;height:140%;width:70px;transform:skewX(-14deg);background:linear-gradient(90deg,transparent 0 40%,rgba(255,255,255,.96) 40% 43%,transparent 43% 64%,rgba(255,255,255,.5) 64% 65.4%,transparent 65.4%)}
section.flow{position:relative;padding:18vh var(--m) 16vh;isolation:isolate;background:#fff}
.kick{display:flex;flex-direction:column;align-items:flex-start;margin-bottom:9vh}
.kick .pill{margin-bottom:10px}
.kick .t{display:inline-block;font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:600;font-size:clamp(40px,4.2vw,60px);letter-spacing:-.045em;line-height:.9;transform-origin:0 0}
.act{position:relative;display:inline-flex;align-items:center;justify-content:space-between;gap:14px;min-width:280px;font-stretch:125%;font-variation-settings:"wdth" 125;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;border-top:1px solid currentColor;padding-top:14px;cursor:pointer}
.act .plus{font-size:20px;font-weight:300;line-height:1}
.sweep{position:absolute;inset:0;background:#fff;mix-blend-mode:difference;transform:scaleX(0);transform-origin:0 50%;transition:transform .55s var(--ease);pointer-events:none}
.row:hover .sweep,.row:focus-visible .sweep,.ix:hover .sweep,.ix:focus-visible .sweep,.fwr:hover .sweep{transform:scaleX(1)}
.tags{margin-top:6vh;max-width:620px}
.tags li{border-top:1px solid #000;padding:13px 0;font-stretch:125%;font-variation-settings:"wdth" 125;font-size:11px;letter-spacing:.13em;text-transform:uppercase}
.tags li:last-child{border-bottom:1px solid #000}
.ctx{display:grid;grid-template-columns:1fr 1fr;margin-top:8vh;border-top:1px solid #000}
.ctx li{border-bottom:1px solid #000;padding:3vh 0;display:grid;grid-template-columns:70px 1fr;align-items:baseline;font-size:clamp(20px,2vw,32px);letter-spacing:-.02em}
.ctx li:nth-child(odd){padding-right:3vw;border-right:1px solid #000}.ctx li:nth-child(even){padding-left:3vw}
.ctx li:nth-child(odd):last-child{border-right:0}
.ctx span{font-size:12px;font-variant-numeric:tabular-nums}

/* dark closing: contact rows, horizon, footer */
.dark,section.flow.dark{background:#000;color:#fff}
.crow{display:grid;grid-template-columns:140px 1fr 90px;align-items:center;border-top:1px solid #fff;padding:18px 0;font-size:clamp(17px,1.5vw,22px)}
.crow:last-child{border-bottom:1px solid #fff}
.crow .k{font-stretch:125%;font-variation-settings:"wdth" 125;font-size:11px;letter-spacing:.13em;text-transform:uppercase}
/* the plus turns on its own centre: its box is only as wide as the sign (before, the whole wide cell turned and the sign travelled on an arc) */
.crow .plus{justify-self:end;line-height:1;font-size:22px;font-weight:300;transition:transform .45s var(--ease)}
.crow:hover .plus,.crow:focus-visible .plus{transform:rotate(90deg)}
.crow .plus.sm{font-size:11px;letter-spacing:.1em}
a.crow:hover .v,a.crow:focus-visible .v{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
#horizon,.horizon{height:1px;background:linear-gradient(90deg,#747a80,#fff 50%,#8b9197);margin:10vh 0 3vh}
.foot{display:flex;justify-content:space-between;font-size:12px;letter-spacing:.03em}.foot nav{display:flex;gap:24px}
.foot a:hover,.foot a:focus-visible{text-decoration:underline;text-underline-offset:4px}
/* page end, shared on every page (Lena, 27.09.2026): generous room above the legal line, which sits close to the bottom edge */
:root{--endgap:18vh;--endpad:4.5vh}
.dark footer .horizon{background:none;height:0;margin:var(--endgap) 0 0}
.dark:has(> footer){padding-bottom:0!important}
.release-footer{width:100vw;margin-left:calc(-1 * var(--m));background:#000;color:#fff;padding:clamp(48px,6.5vh,72px) var(--m) max(2rem,calc(3vh + env(safe-area-inset-bottom)));font-family:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace}
.release-footer .foot{display:flex;justify-content:space-between;align-items:center;gap:2rem;font-size:12px;line-height:1.5}
.release-footer nav{display:flex;align-items:center;gap:0}
.release-footer nav>*{display:inline-flex;align-items:center;min-height:44px}
.release-footer nav>*+*::before{content:"·";padding:0 .7rem;color:#fff;text-decoration:none}
.release-footer a{color:inherit;text-decoration:none}
.release-footer a:focus-visible{outline:2px solid currentColor;outline-offset:2px}
@media(max-width:760px){.release-footer{padding-inline:var(--m)}.release-footer .foot{align-items:flex-start;flex-direction:column;gap:.25rem}.release-footer nav{width:100%;flex-wrap:wrap}.release-footer .footer-secondary{justify-content:flex-start}}

/* Release information pages */
.legal .lbody,.sitemap-body{max-width:920px;margin:0 auto;padding:2rem 3.35vw 8rem}
.legal .lbody h2,.sitemap-body h2{margin:3rem 0 1rem;font-size:clamp(1.25rem,2vw,1.75rem)}
.legal .lbody p,.legal .lbody li{max-width:72ch;line-height:1.65}.sitemap-body li{max-width:none;line-height:1.65}
.legal .lbody a,.sitemap-body a{text-underline-offset:3px}
.sitemap-body ul{list-style:none;padding:0;margin:0}.sitemap-body li{border-top:1px solid #bbb}.sitemap-body a{display:flex;justify-content:space-between;gap:1rem;padding:1rem 0;min-height:44px}
.sitemap-body .site-group{margin-top:4rem}.sitemap-body .archive-link{width:100%;margin-top:5rem;padding-top:2rem;border-top:2px solid #111}.sitemap-body .archive-link strong{font:inherit;font-weight:700}

/* layers (dialogs) */
.ov{position:fixed;inset:0;z-index:80;background:#fff;color:#000;visibility:hidden;overflow-y:auto;overscroll-behavior:contain;isolation:isolate}
.ov .bar{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:28px var(--m);background:#fff;font-size:13px}
/* layer header like the page header: LDT INC and Index stay on top, Back with the location sits beneath and scrolls with the content (as on /workshops) */
.ov .bar .ovtop{display:flex;flex:1;justify-content:space-between;align-items:center;letter-spacing:.02em}
.ovtop .brand{font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:700;letter-spacing:.03em}
.ovtop .brand span{font-weight:300;font-stretch:100%;font-variation-settings:"wdth" 100;margin-left:4px}
.ovtop .ovr .back{flex-direction:row}
.ov .ovsub{display:flex;justify-content:space-between;align-items:center;padding:23px var(--m) 0;font-size:13px}
.back{display:flex;gap:12px;align-items:center;cursor:pointer}.back i{display:block;width:26px;height:1px;background:currentColor;transition:width .4s var(--ease)}
.back:hover i,.back:focus-visible i{width:40px}
.lbl{font-stretch:125%;font-variation-settings:"wdth" 125;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.ov .bar .lbl,.ov .ovsub .lbl,.subbar .lbl{max-width:62%;text-align:right;line-height:1.5}
.ov .inner{padding:7vh var(--m) 14vh}
.ov h2,.h2{font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:600;font-size:clamp(40px,4.2vw,60px);letter-spacing:-.045em;line-height:.9}
.ov .k{font-size:clamp(24px,2.6vw,44px);line-height:1.12;letter-spacing:-.02em;max-width:26ch;margin-top:5vh}

#index .inner{min-height:calc(100vh - 80px);display:grid;grid-template-columns:1fr 30vw;gap:5vw;align-items:center;padding-top:2vh}
#index li{border-top:1px solid #000}
#index li:last-child{border-bottom:1px solid #000}
.ix{position:relative;display:grid;grid-template-columns:80px 140px 1fr;align-items:baseline;width:100%;cursor:pointer}
.ix .n{font-size:12px;font-variant-numeric:tabular-nums;padding-left:4px}
.ix .lg{font-stretch:125%;font-variation-settings:"wdth" 125;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--graph)}
.ix .en{font-stretch:125%;font-variation-settings:"wdth" 125;font-weight:700;font-size:clamp(40px,6.2vw,112px);letter-spacing:-.05em;line-height:1;padding:1vh 0}
.ix:focus-visible{outline-offset:-2px}
#index .ixm{position:relative;height:max(74vh,560px);justify-self:end;width:100%}#index .ixm svg{display:block;width:100%;height:100%;overflow:visible}
#index .ixm .ax{fill:none;stroke:#000;stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s cubic-bezier(.2,.7,.1,1) .1s}#index.play .ixm .ax{stroke-dashoffset:0}
#index .ixm .br{fill:none;stroke:#000;stroke-width:1.4;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s cubic-bezier(.2,.7,.1,1) var(--d,1s),opacity .45s}#index.play .ixm .br{stroke-dashoffset:0}
#index .ixm .rg{fill:none;stroke:#000;stroke-width:1.5;transform-box:fill-box;transform-origin:center;transform:scale(.2);opacity:0;transition:transform 1s cubic-bezier(.2,.7,.1,1) var(--d,1s),opacity .9s var(--d,1s)}#index.play .ixm .rg{transform:none;opacity:1}#index .ixm .rg.ds{stroke-dasharray:3 7}
#index .ixm .dt{fill:#000;transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .8s cubic-bezier(.2,.7,.1,1) var(--d,.3s),opacity .45s}#index.play .ixm .dt{transform:none}
#index .ixm .nm{font:600 20px var(--sans);letter-spacing:.06em;fill:#000;opacity:0;transition:opacity .8s var(--d,.3s)}#index.play .ixm .nm{opacity:1}
#index .ixm[data-f] *{transition-delay:0s!important}
#index .ixm[data-f] .ax{opacity:.5}
#index .ixm[data-f="explore"] :is(.k-j,.k-experience,.k-workshops,.k-contact),#index .ixm[data-f="experience"] :is(.k-j,.k-explore,.k-workshops,.k-contact),#index .ixm[data-f="workshops"] :is(.k-j,.k-explore,.k-experience,.k-contact),#index .ixm[data-f="contact"] :is(.k-j,.k-explore,.k-experience,.k-workshops){opacity:.18}
#index .ixm[data-f] .dt.k-contact{transform:scale(1.5)}

/* legal pages */
.legal{min-height:100vh;display:flex;flex-direction:column;justify-content:space-between;padding:0 var(--m)}
.subbar{position:sticky;top:60px;z-index:50;display:flex;justify-content:space-between;align-items:center;min-height:48px;margin-top:60px;padding:2px 0;background:#fff;font-size:13px}
.legal .kick{margin:12vh 0 8vh}
.legal .kick .t{font-size:clamp(40px,5vw,76px)}
.lbody{max-width:780px}
.lbody h2{font-stretch:125%;font-variation-settings:"wdth" 125;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;border-top:1px solid #000;padding-top:14px;margin-top:6vh}
.lbody h2:first-child{margin-top:0}
.lbody p{font-size:clamp(17px,1.35vw,20px);line-height:1.5;margin-top:14px;max-width:60ch}
.lbody a{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.legal .lfoot{margin-top:var(--endgap);padding:0 0 var(--endpad)}

@media (max-width:760px){
  :root{--m:22px;--endgap:12vh}
  #rail{display:none}
  #railM{display:none;align-items:center;gap:8px;top:58px;left:var(--m);font-stretch:125%;font-variation-settings:"wdth" 125;font-size:11px;letter-spacing:.13em;text-transform:uppercase}
  #railM .pill{font-stretch:100%;font-variation-settings:normal;letter-spacing:.06em}
  #railM .dcur{font-weight:600}
  #hdr{padding:22px var(--m)}
  html[data-page=home] #hdr{padding-top:22px}
  #hdr .hdrL{min-width:0}#hdr .hdrL:has(.who){height:52px}#hdr .who .nm{font-size:22px}#hdr .who .rl{font-size:20px;margin-top:2px}
  .crow{grid-template-columns:90px 1fr 60px}
  .ctx{grid-template-columns:1fr}.ctx li:nth-child(odd){border-right:0;padding-right:0}.ctx li:nth-child(even){padding-left:0}
  #index .inner{grid-template-columns:1fr}#index .ixm{height:auto;aspect-ratio:500/720;max-width:340px;justify-self:start;margin-top:4vh}.ix{grid-template-columns:52px 1fr}.ix .lg{display:none}
  .ov .bar{padding:22px var(--m)}
  .ov .ovsub{padding-top:17px}
  .subbar{top:58px;min-height:54px;margin-top:58px;padding:5px 0}
  #band{height:82px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* where you are, one rule on every page and layer (Lena, 28.09.2026): the address in the bubble, what it belongs to in Boska italic, the place itself in wide bold capitals */
.loc{display:inline-flex;align-items:baseline;justify-content:flex-end;flex-wrap:wrap;gap:4px 10px}
.loc .pill{align-self:center;flex:none}
.loc .dctx{font-family:var(--serif);font-style:italic;font-weight:400;font-stretch:100%;font-variation-settings:normal;text-transform:none;letter-spacing:0;font-size:15px;color:rgba(0,0,0,.62)}
.dark .loc .dctx,.ov.dark .loc .dctx{color:rgba(255,255,255,.7)}
.loc .dcur{font-weight:600}
@media (max-width:760px){.loc{column-gap:8px}.loc .dctx{font-size:14px}}

/* v3 M06: touch targets of at least 44px for the shell controls on phones and touch screens */
@media (max-width:760px),(pointer:coarse){
  .ovtop :is(a,button),.ovsub :is(a,button),.ov .bar .back,.subbar .back,.subbar a,.ov .back{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
}

/* v3 M06: one visible keyboard focus on every control, black or white background (two tone ring, beats the resets of the single pages) */
:is(a,button,[role=button],[role=tab],input,summary,[tabindex="0"]):focus-visible{outline:2px solid #fff!important;outline-offset:0!important;box-shadow:0 0 0 4px #000!important}
html:not(.kbd) .ov [data-close]:focus-visible{outline:none!important;box-shadow:none!important}

/* v3 M01: codes read clearly. Page pill in the layer header is a black pill with white type; chapter rail and pills are larger and heavier */
.pill{font-size:13px;font-weight:600}
:is(.ov .bar,.ovsub,.subbar) .lbl .pill{background:#000;color:#fff;border-color:#000;padding:3px 10px}
#rail button{font-size:11px;font-weight:600;opacity:.82}

/* Every overlay uses the same frozen shell: global row, then local Back/location. */
.ov{--layer-bar:60px;scroll-padding-top:calc(var(--layer-bar) + 56px)}
.ov>.bar{height:var(--layer-bar);min-height:var(--layer-bar);padding-block:0}
.ov>.ovsub{position:sticky;top:var(--layer-bar);z-index:4;min-height:48px;padding:2px var(--m);background:#fff;color:#000;border-bottom:1px solid rgba(0,0,0,.18)}
.ov>.bar .ovr{display:flex;align-items:center;justify-content:flex-end;gap:clamp(18px,2.2vw,32px)}
.ov>.bar .ovr button{min-height:44px;text-align:center}
#approach>.ovsub{background:#000;color:#fff;border-bottom-color:rgba(255,255,255,.28)}
@media(max-width:760px){.ov{--layer-bar:58px}.ov>.ovsub{align-items:center;min-height:54px;padding-block:5px}.ov>.bar .ovr{gap:18px;font-size:12px;line-height:1.2}}
.ov>.bar,.ov>.ovsub,.subbar{transition:transform .26s var(--ease),opacity .2s var(--ease)}
.ov.shell-folded>.bar{transform:translateY(-100%);opacity:0;pointer-events:none}
.ov.shell-folded>.ovsub{transform:translateY(calc(-100% - var(--layer-bar)));opacity:0;pointer-events:none}
.page-shell-folded .subbar{transform:translateY(-100%);opacity:0;pointer-events:none}
.ov.shell-folded::before{content:"";position:fixed;z-index:6;left:0;right:0;top:0;height:24px;pointer-events:auto}
@media(prefers-reduced-motion:reduce){.ov>.bar,.ov>.ovsub,.subbar{transition:none}}

/* Compact chapter rail: stable number measure and tightly grouped rows. */
#rail{gap:0}
#rail button{justify-content:flex-end;width:100%;height:27px;min-height:27px;gap:8px;color:#777;opacity:1;font:400 9px/1.1 var(--sans);letter-spacing:.09em}
#rail button span{display:grid;grid-template-columns:34px auto;align-items:center;column-gap:8px;white-space:nowrap}
#rail button span b{display:inline-flex;align-items:center;justify-content:center;width:34px;height:22px;border-radius:999px;font:500 11px/1 "IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-variant-numeric:tabular-nums;letter-spacing:.02em}
#rail button i{width:8px;opacity:.55}
#rail button.on{color:#fff}#rail button.on span b{background:#fff;color:#000}#rail button.on i{width:18px;height:1px}
#rail button:hover,#rail button:focus-visible{color:#fff}
/* v3 M06: location label and codes never below 12px */
.lbl,.dcur,.loc .dcur{font-size:max(12px,11px)}
.dcur,.lbl{font-size:12.5px}
.sitemap-body .archive-link strong{font-size:clamp(1.25rem,2vw,1.75rem);line-height:1.15}

/* phones: the top row (logo, Index) folds with the context bar (Lena 09.10.2026) */
@media (max-width:760px),(max-height:620px){#hdr{transition:transform .26s var(--ease),opacity .2s var(--ease)}body.hdr-folded #hdr,body.page-shell-folded #hdr{transform:translateY(-100%);opacity:0;pointer-events:none}}
@media (prefers-reduced-motion:reduce){#hdr{transition:none}}

/* phones: footer, navigation row right aligned on top, legal row left aligned below, dots centred between the words (Lena 09.10.2026) */
@media (max-width:760px){
  html .release-footer .foot{display:flex;flex-direction:column-reverse;align-items:stretch;gap:0}
  html .release-footer .foot nav{display:flex;width:100%;flex-wrap:nowrap;gap:0}
  html .release-footer .footer-primary{justify-content:flex-start}
  html .legal .lfoot{padding-inline:var(--m)}
  html .release-footer .footer-secondary{justify-content:flex-end;color:inherit;font-size:15px;letter-spacing:.02em}
  html .release-footer .footer-primary{margin-top:-5px;opacity:.62;font-size:12px;letter-spacing:0}
  html .release-footer .foot nav>*+*::before{padding:0 .75rem}
}
@media (max-width:350px){
  html .release-footer .footer-secondary{font-size:13.5px}html .release-footer .footer-primary{font-size:11px}
  html .release-footer .foot nav>*+*::before{padding:0 .5rem}
}
/* desktop footer: the secondary navigation (Workshops, Sitemap, Contact) is functional, so it reads at 13px; the legal row stays at 12px (17.10.2026) */
@media (min-width:761px){html .release-footer .footer-secondary{font-size:13px}}