/* NAMCHE manuals - styles shared by manual-web.html, manual-basic.html and design-system.html.
   Loaded after site.css: the production bar, grid lines, nav, CTA, label and h2 come from there.
   Everything here is DS tokens (ds/tokens/) or derived from them, like site.css. Same voices:
   Namche Shadow Sans Medium and Shadow Mono Medium only, full-strength ink, hairlines, no shadow,
   no scale on hover, nothing fades in. The manuals are German (the Figma originals), the
   design system page is English (its own cards are). */

/* The Don't samples of the type chapter need the Regular cut the site never loads; a browser fetches
   a font file only when some text uses it, so only manual-web.html pays for it. */
@font-face{font-family:"Namche Shadow Sans Regular";src:url("../ds/assets/fonts/NamcheShadowSans-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

html{background:var(--ground-dark);scroll-padding-top:calc(var(--space-64) * 2)}
main{display:block}
a{color:inherit}
.scene.light{--surface-page:var(--gaia-selene);color:var(--ink-on-gaia-selene)}

/* ── Voices ────────────────────────────────────────────────────── */
.m-meta,.m-cap{font-family:var(--font-mono);font-weight:var(--weight-mono);text-transform:uppercase;margin:0}
.m-meta{font-size:var(--type-mono-meta);line-height:var(--leading-prose);line-height:round(nearest,calc(var(--type-mono-meta) * var(--leading-prose)),var(--baseline))}
.m-cap{font-size:var(--type-mono-caption);line-height:var(--leading-prose);line-height:round(nearest,calc(var(--type-mono-caption) * var(--leading-prose)),var(--baseline))}
.m-title{margin:0;font:var(--role-headline-title);line-height:var(--leading-hero);line-height:round(nearest,calc(var(--type-display) * var(--leading-hero)),var(--baseline));letter-spacing:var(--tracking-display);text-wrap:balance}
.m-lede{margin:0;font-size:var(--type-lede);line-height:var(--leading-prose);line-height:round(nearest,calc(var(--type-lede) * var(--leading-prose)),var(--baseline));text-wrap:pretty}
.m-text{margin:0;font-size:var(--type-body);line-height:var(--leading-prose);line-height:round(nearest,calc(var(--type-body) * var(--leading-prose)),var(--baseline));text-wrap:pretty}
.legal{list-style:none;margin:var(--space-32) 0 0;padding:0;display:grid;gap:var(--space-16)}
.legal li{display:grid;gap:var(--space-8)}
.legal .m-text{margin:0}
.m-small{margin:0;font-size:var(--type-ui-sm);line-height:var(--leading-prose);line-height:round(nearest,calc(var(--type-ui-sm) * var(--leading-prose)),var(--baseline));text-wrap:pretty}
.m-bullet{display:inline-block;flex:none;width:var(--bullet-square-sm);height:var(--bullet-square-sm);background:currentColor;vertical-align:middle}
.m-dot{display:inline-block;flex:none;width:var(--bullet-dot);height:var(--bullet-dot);border-radius:var(--radius-pill);background:currentColor;vertical-align:middle}
.m-hook{color:var(--hook)}

/* ── Nav on the manuals: logo, one link back, MENU (the chapters), CTA to the next document ── */
.nav__link .bullet,.nav__toggle .bullet{background:currentColor}
.nav__menu{max-height:calc(100svh - var(--space-64) * 3);overflow-y:auto;overscroll-behavior:contain}
/* The chapter list is long (22 rows): compact rows, one type step down, panel as wide as its longest row */
.nav__menu{min-width:0;padding:var(--space-4) 0}
.nav__item{min-height:calc(var(--space-8) * 4);padding:0 var(--space-16);font-size:var(--type-mono-meta);line-height:calc(var(--space-8) * 4);white-space:nowrap}
@media (max-width:899px){.nav__menu{left:auto;right:var(--edge)}}
.nav__item small{margin-left:auto;padding-left:var(--space-32);font:inherit}
@media (max-width:899px){.nav__link{display:none}.nav__group{gap:0}}
/* Nav CTA and MENU on the manuals: the notched pill at the control height (--cta-height-sm, 32 like every control since the design pass), one type step down */
.nav .cta{--cta-arrow:var(--cta-arrow-sm);--cta-label:var(--cta-label-sm);height:var(--cta-height-sm);padding-right:var(--space-16);font-size:var(--type-mono-meta);line-height:calc(var(--space-8) * 3)}
.nav .cta__arrow{font-size:var(--type-ui-sm)}
.nav .cta__shape::after{
  -webkit-mask:linear-gradient(var(--namche-black) 0 0) left/calc(100% - var(--cta-notch-sm)) 100% no-repeat,var(--shape-pill-notch) right center/auto 100% no-repeat;
  mask:linear-gradient(var(--namche-black) 0 0) left/calc(100% - var(--cta-notch-sm)) 100% no-repeat,var(--shape-pill-notch) right center/auto 100% no-repeat;
}
.nav__logo{width:var(--cta-height-sm);height:var(--cta-height-sm)} /* the mark as tall as the CTA and MENU beside it */
.nav__link,.nav__toggle{min-height:var(--cta-height-sm);gap:var(--space-16);font-size:var(--type-mono-meta)} /* Landing and the chapter menu are one size */
.cta__short{display:none}
@media (max-width:599px){.nav .cta__long{display:none}.nav .cta__short{display:inline}} /* the nav CTA names the next document in one word on a phone */

/* ── Overview (hero) ───────────────────────────────────────────── */
.mhero{
  min-height:var(--vh);display:flex;flex-direction:column;gap:var(--space-64);
  padding:calc(var(--grid-x) + var(--space-32)) var(--edge) var(--space-32);
}
.mhero__top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-32);flex-wrap:wrap}
.mhero__title{
  margin:0;
  font-family:var(--font-display);font-weight:var(--weight-display);
  --fs:clamp(var(--type-stat),7.6vw,var(--type-hero));font-size:var(--fs);
  line-height:var(--leading-hero);line-height:round(nearest,calc(var(--fs) * var(--leading-hero)),var(--baseline));letter-spacing:var(--tracking-display);
}
.mhero__note{display:flex;gap:var(--space-16);align-items:flex-start;max-width:var(--span-4);margin:0}
.mhero__note .label__bullet{margin-top:.62em}
.mhero__cta{margin:var(--space-32) 0 0 calc(var(--bullet-square-sm) + var(--space-16))}
@media (min-width:900px){
  .mhero__note{margin-left:var(--start-8)}
  .mhero__cta{margin-left:calc(var(--start-8) + var(--bullet-square-sm) + var(--space-16))}
  .mgrid>.push-8{grid-column:8 / -1}
}
.mhero__body{display:grid;gap:0}
.toc{margin-top:auto;padding-top:calc(var(--space-16) - var(--hairline));border-top:var(--hairline) solid var(--gaia-selene)}
.toc__head{margin:0 0 var(--space-16)}
.toc__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;column-gap:var(--gutter)}
@media (min-width:900px){
  .toc__list{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:column;grid-template-rows:repeat(var(--rows,8),auto)}
}
.toc__link{display:flex;align-items:baseline;gap:var(--space-16);min-height:calc(var(--space-8) * 6);padding:var(--space-8) 0;color:inherit;text-decoration:none}
.toc__n{flex:none;width:var(--space-32)}
.toc__t{font-size:var(--type-ui-lg);line-height:var(--leading-prose);line-height:round(nearest,calc(var(--type-ui-lg) * var(--leading-prose)),var(--baseline))}
.toc__link:hover .toc__t,.toc__link:focus-visible .toc__t{text-decoration:underline;text-decoration-thickness:var(--stroke-text);text-underline-offset:var(--underline-offset)}
.toc__link:hover .toc__n,.toc__link:focus-visible .toc__n{color:var(--hook)}
.mhero__foot{display:flex;align-items:center;gap:var(--space-16);margin:0;padding-top:calc(var(--space-16) - var(--hairline));border-top:var(--hairline) solid var(--gaia-selene)}
.facts{display:flex;flex-wrap:wrap;gap:var(--space-32) var(--space-64);margin:0;padding:0}
.facts div{display:flex;flex-direction:column-reverse;gap:var(--space-8)}
.facts dd{margin:0;font:var(--role-number-stat);line-height:var(--leading-hero);line-height:round(nearest,calc(var(--type-stat) * var(--leading-hero)),var(--baseline));letter-spacing:var(--tracking-display)}
.facts dt{margin:0}

/* ── Chapter ───────────────────────────────────────────────────── */
.chap{padding:var(--space-64) var(--edge) calc(var(--space-64) + var(--space-32));border-top:var(--rule)}
.chap.dark{border-top:0}
.chap__head{display:grid;gap:var(--space-16);margin-bottom:var(--space-64)}
.chap__head .label{margin:0}
.chap__title{max-width:var(--span-8)}
.chap__lede{max-width:var(--span-8);margin-top:var(--space-16)}

/* 12 / 4 column grid of the site; blocks span what they need */
.mgrid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--space-64)}
.mgrid>*{grid-column:1 / -1;min-width:0}
.mgrid>.s2,.mgrid>.t6{grid-column:span 2}
@media (min-width:900px){
  .mgrid>.s3{grid-column:span 3}
  .mgrid>.s4{grid-column:span 4}
  .mgrid>.s5{grid-column:span 5}
  .mgrid>.s6{grid-column:span 6}
  .mgrid>.s7{grid-column:span 7}
  .mgrid>.s8{grid-column:span 8}
  .mgrid>.s9{grid-column:span 9}
  .mgrid>.s12{grid-column:1 / -1}
  .mgrid>.t6{grid-column:span 4}
  .mgrid>.s5.st8{grid-column:8 / span 5} /* text beside the image, from column 8 */
}
@media (min-width:1280px){.mgrid>.t6{grid-column:span 2}}
.mgrid--tight{row-gap:var(--space-32)}
@media (min-width:600px) and (max-width:899px){.mgrid>.pat{grid-column:span 2}} /* 4 columns: two frames per row */
.stack{display:grid;gap:var(--space-16);align-content:start}
.stack--32{gap:var(--space-32)}
.stack--8{gap:var(--space-8)}

/* A rule with its number, title, text, and (mono) the example from the site */
.blk{display:flex;flex-direction:column;gap:var(--space-16);border-top:var(--rule);padding-top:var(--space-16)}
.blk__ex{margin-top:auto;padding-top:var(--space-16)}

/* Satzleiste: the closing line of a slide, hairline above, + at both ends (manual). Rows are label left, text right;
   a row without a label runs across both. Under 900px an open line keeps only the left + (a folded one keeps its toggle), under 600px the label sits over its text.
   More than three rows fold into a details (satz--drop) that shows its title; the right + is its toggle, and it prints open. */
.satz{
  margin:var(--space-64) 0 0;padding-top:var(--space-16);border-top:var(--rule);
  font:var(--role-label-meta);
}
.satz:not(.satz--drop),.satz__sum,.satz__body{display:grid;grid-template-columns:var(--space-32) minmax(0,1fr) var(--space-32);gap:var(--space-16);align-items:start}
.satz__mark{position:relative;height:round(nearest,calc(var(--type-mono-meta) * var(--leading-prose)),var(--baseline));font-size:0} /* the + glyph in the markup stays; the plus is drawn at --plus-stroke, centred on the first line */
.satz__mark::before,.satz__mark::after{content:"";position:absolute;top:50%;left:50%;width:var(--space-16);height:var(--plus-stroke);background:currentColor;transform:translate(-50%,-50%)}
.satz__mark::after{transform:translate(-50%,-50%) rotate(90deg)}
.satz__rows{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);column-gap:var(--gutter);row-gap:0}
.satz__rows>p{display:grid;grid-template-columns:subgrid;grid-column:1 / -1;margin:0}
.satz__row--text .satz__text{grid-column:1 / -1}
.satz__rows:has(.satz__label) .satz__row--text .satz__text{grid-column:2} /* in a bar with labels a row without one sits flush in the text column */
.satz--drop>.satz__sum{list-style:none;cursor:pointer;align-items:center}
.satz--drop>.satz__sum::-webkit-details-marker{display:none}
.satz--drop>.satz__sum:hover .satz__title{text-decoration:underline;text-decoration-thickness:var(--stroke-text);text-underline-offset:var(--underline-offset)}
.satz--drop .satz__mark--toggle{transition:transform var(--dur-base) var(--ease-standard)}
.satz--drop[open] .satz__mark--toggle{transform:rotate(45deg)}
.satz--drop>.satz__body{padding-top:var(--space-16)}
.satz--drop>.satz__body>.satz__rows{grid-column:2}
@media (max-width:899px){
  .satz:not(.satz--drop),.satz__body{grid-template-columns:var(--space-32) minmax(0,1fr)}
  .satz:not(.satz--drop)>.satz__mark:last-child{display:none}
}
@media (max-width:599px){
  .satz__rows{grid-template-columns:minmax(0,1fr);row-gap:var(--space-8)}
  .satz__rows>p{grid-template-columns:minmax(0,1fr)}
  .satz__rows:has(.satz__label) .satz__row--text .satz__text{grid-column:1}
}
@media print{
  .satz--drop::details-content{content-visibility:visible;display:block}
  .satz--drop .satz__mark--toggle{display:none}
}

/* Colour swatches */
.sw{display:flex;flex-direction:column;gap:var(--space-8);min-width:0}
.sw__field{display:block;height:calc(var(--space-64) * 2);background:var(--c);border:var(--rule)}
.sw__name{margin-top:var(--space-8)}
.sw__hex{margin:0;font-size:var(--type-lede);line-height:var(--leading-hero);line-height:round(nearest,calc(var(--type-lede) * var(--leading-hero)),var(--baseline));letter-spacing:var(--tracking-display)}
.sw__use{margin:0}

/* Sections as fields (chapter 04) */
.strip{--sc:3;display:grid;grid-template-columns:repeat(var(--sc),minmax(0,1fr));gap:var(--space-32) var(--space-8)}
@media (min-width:600px){.strip{--sc:4}}
@media (min-width:900px){.strip{--sc:7}}
@media (min-width:1600px){.strip{--sc:13}} /* thirteen fields in one row only where every caption has its room */
.strip__col{display:flex;flex-direction:column;gap:var(--space-8);min-width:0}
.strip__col .m-cap{min-height:var(--space-32);overflow-wrap:anywhere} /* two lines reserved: the fields start on one line */
.fld{position:relative;height:calc(var(--space-64) * 3);background:var(--g);border:var(--rule);overflow:hidden}
.fld i{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);background:var(--c)}
@media (min-width:1600px){.fld{height:calc(var(--space-64) * 6)}}
.fld--halves i:first-child{left:0;top:0;width:100%;height:50%}

/* Contrast tiles (chapter 05) */
.tile{display:flex;flex-direction:column;gap:var(--space-8);min-width:0}
.tile__field{display:flex;flex-direction:column;justify-content:center;gap:var(--space-8);min-height:calc(var(--space-64) * 3);padding:var(--space-16);background:var(--f);color:var(--k);border:var(--rule)}
.tile__field .m-title{font-size:var(--type-ui-lg)}
@media (max-width:479px){.mgrid>.tile{grid-column:1 / -1}} /* two tiles of 150px break the sample text into single words */
.tile__ratio{margin:var(--space-8) 0 0;font-size:var(--type-lede);line-height:var(--leading-hero);line-height:round(nearest,calc(var(--type-lede) * var(--leading-hero)),var(--baseline));letter-spacing:var(--tracking-display)}
.tile__rate{margin:0}

/* Specimen rows (scale, roles) */
.spec{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-8) var(--gutter);padding:var(--space-16) 0;border-top:var(--rule);align-items:baseline}
@media (min-width:900px){.spec{grid-template-columns:repeat(12,minmax(0,1fr))}.spec__k{grid-column:span 3}.spec__v{grid-column:span 9}}
.spec__k{display:grid;gap:0}
.spec__v{margin:0;overflow-wrap:anywhere}
.spec:last-of-type{border-bottom:var(--rule)}
.role{font-family:var(--font-display);font-weight:var(--weight-display);letter-spacing:var(--tracking-display)}

/* Do / Don't pairs */
.pairs{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-32) var(--gutter)}
@media (min-width:900px){.pairs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pairs__head{margin:0;padding-bottom:var(--space-16);border-bottom:var(--rule)}
.row{display:grid;gap:var(--space-8);padding:var(--space-16) 0;border-bottom:var(--rule)}
.row__big{margin:0;font:var(--role-text-lede);line-height:var(--leading-hero);line-height:round(nearest,calc(var(--type-lede) * var(--leading-hero)),var(--baseline));letter-spacing:var(--tracking-display)}
.dont-regular{font-family:"Namche Shadow Sans Regular","Namche Shadow Sans",sans-serif;font-weight:400}
.dont-muted{opacity:.65}
.dont-caps{font-family:var(--font-display);text-transform:none}
.dont-under{text-decoration:underline}

/* Space scale (chapter 09) */
.steps-x{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--space-16) var(--space-32)}
.steps-x figure{margin:0;display:grid;gap:var(--space-8);justify-items:start}
.steps-x i{display:block;width:var(--n);height:var(--n);background:currentColor}
.baseline-demo{
  padding:var(--space-8) var(--space-16);border:var(--rule);
  background:repeating-linear-gradient(to bottom,color-mix(in srgb,var(--hook) 55%,transparent) 0 var(--stroke),transparent var(--stroke) var(--baseline));
}
.baseline-demo p{margin:0;font:var(--role-number-stat);line-height:var(--space-64);letter-spacing:var(--tracking-display)}
.grid-demo{position:relative;aspect-ratio:16 / 9;border:var(--rule)}
.grid-demo__cols{position:absolute;inset:0 calc(100% * 64 / 1920);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:calc(100% * 32 / 1792)}
.grid-demo__cols i{background:color-mix(in srgb,var(--hook) 22%,transparent)}
.grid-demo--m{aspect-ratio:9 / 19.5;max-width:calc(var(--space-64) * 3);padding:0}
.grid-demo--m .grid-demo__cols{inset:0 calc(100% * 32 / 390);grid-template-columns:repeat(4,minmax(0,1fr));column-gap:calc(100% * 16 / 326)}
.grid-demo__word{position:absolute;left:calc(100% * 64 / 1920);top:calc(100% * 180 / 1080);font-family:var(--font-display);font-weight:var(--weight-display);font-size:clamp(var(--type-display),4.6vw,var(--type-display-xl));line-height:var(--leading-hero);letter-spacing:var(--tracking-display);margin:0}

/* Demos of real components (chapters 10-13): a ground, with the site's own classes inside */
.demo{position:relative;padding:var(--space-32);background:var(--surface-page);color:var(--text-primary);border:var(--rule);display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-16) var(--space-32)}
.demo.dark{--surface-page:var(--ground-dark)}
.demo.light{--surface-page:var(--gaia-selene);color:var(--ink-on-gaia-selene)}
.demo--col{flex-direction:column;align-items:flex-start}
.demo .cta{margin:0}
.demo__nav{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-16) var(--space-64);width:100%;justify-content:space-between}
.demo__nav .nav__group{gap:var(--space-64)}
.demo__caption{margin:var(--space-8) 0 0}
.demo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(var(--space-64) * 4),1fr));gap:var(--space-32)}
.cta.is-hover{--cta-fill:var(--hook);--cta-ink:var(--hook-ink)}
.cta--hook.is-hover{--cta-fill:var(--gaia-selene);--cta-ink:var(--ink-on-gaia-selene)}
.cta.is-over-footer{--cta-fill:var(--gaia-selene);--cta-ink:var(--ink-on-gaia-selene)}
.cta__label{white-space:nowrap}
.demo-menu{list-style:none;margin:0;padding:var(--space-8) 0;background:var(--text-primary);color:var(--surface-page)}
.demo-menu .is-hover{background:var(--hook);color:var(--hook-ink)}
.nav__toggle.is-hover{--mark:var(--hook)}
.demo .nav__link,.demo .nav__toggle,.demo .nav__item{pointer-events:none}

/* Cards in a static frame: the site's own .feature, .door, .insight, .step */
.demo-cards{display:grid;gap:var(--space-32);grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.demo-cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}.demo-cards--4{grid-template-columns:repeat(2,minmax(0,1fr))}.demo-cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1280px){.demo-cards--4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.demo-cards .feature .pair__img{height:calc(var(--grid-module) * 2)}
.demo-cards .step{grid-column:auto;min-height:calc(var(--grid-module) * 1.5)}
.demo-cards .step:hover,.demo-cards .door:hover,.demo-cards .insight:hover{transform:none}
.demo-cards .door{min-height:calc(var(--grid-module) * 2)}
.demo-cards .insight{height:auto;min-height:calc(var(--grid-module) * 2)}
/* the card stacks by its own width, at the site's 900px: image on top, text below, so the headline keeps its 60 % of a whole row */
.demo-cards>div{container-type:inline-size}
@container (max-width:899px){
  .demo-cards .feature{grid-template-columns:minmax(0,1fr)}
  .demo-cards .feature .pair__img{grid-column:1}
  .demo-cards .feature__text{grid-column:1;grid-row:2}
}
.card-cap{display:grid;gap:var(--space-8);margin-top:var(--space-16)}

/* Pills, coordinates, cursor (chapter 12) */
.pill{display:inline-flex;align-items:center;padding:var(--space-8) var(--space-16);border-radius:var(--radius-pill);background:var(--hook);color:var(--hook-ink);font-family:var(--font-mono);font-weight:var(--weight-mono);font-size:var(--type-tag);line-height:1;text-transform:uppercase;white-space:nowrap}
.pill--case{padding:var(--space-16) var(--space-32)}
.demo-cursor{display:block;width:var(--space-32);height:var(--space-32);background:var(--cur,var(--hook));-webkit-mask:var(--shape-cursor) center/contain no-repeat;mask:var(--shape-cursor) center/contain no-repeat}
.demo-cursor--x{transform:rotate(45deg)}
.demo-cursor-row{display:flex;align-items:center;gap:var(--space-16)}
.demo .service-row{display:flex;align-items:center;gap:var(--space-16);margin:0}
.demo .service-row__dot{flex:none;width:var(--node-dot);height:var(--node-dot);border-radius:var(--radius-pill);background:currentColor}
.demo .service-row.is-hover .service-row__dot{background:var(--hook)}
.demo .service-row__open{width:var(--node-dot);height:var(--node-dot);border:var(--rule);border-radius:var(--radius-pill);flex:none}
.demo .marquee-list{list-style:none;margin:0;padding:var(--space-16) 0 0;border-top:var(--hairline) solid var(--gaia-selene);width:100%}
.demo .marquee-list li{display:flex;align-items:center;gap:var(--space-16);min-height:calc(var(--space-8) * 6)}
.demo .marquee-list .m-dot{width:1.25em;height:1.25em}

/* Footer demo */
.demo-footer{display:grid;gap:var(--space-16);padding:var(--space-32) var(--space-32) var(--space-16);background:var(--hook);color:var(--hook-ink);overflow:hidden}
.demo-footer__word{display:block;width:100%;container-type:inline-size;color:var(--gaia-selene)}
.demo-footer__word::before{content:"NAMCHE";display:block;font-family:var(--font-display);font-weight:var(--weight-display);letter-spacing:var(--tracking-display);line-height:var(--leading-tight);font-size:calc(100cqi / 5.1);white-space:nowrap}
.demo-footer__bar{display:flex;align-items:center;gap:var(--space-32);flex-wrap:wrap}
.demo__coords,.demo-footer__bar .coords{margin:0}
.demo-footer__bar .coords{flex:1;min-width:0}
.demo-footer__up{flex:none;display:grid;place-items:center;width:calc(var(--space-8) * 6);height:calc(var(--space-8) * 6);border-radius:var(--radius-pill);background:var(--gaia-selene);color:var(--ink-on-gaia-selene)}
.demo-footer__legal{display:flex;justify-content:space-between;gap:var(--space-16);flex-wrap:wrap}
.demo-footer__legal span+span{margin-left:var(--space-32)}

/* Marks and logos: drawn masters as masks, the colour follows the ground */
.mark{display:block;width:var(--s);height:var(--s);background:currentColor;-webkit-mask:var(--shape-logo) center/contain no-repeat;mask:var(--shape-logo) center/contain no-repeat}
.wm{display:block;width:var(--w,100%);max-width:100%;aspect-ratio:440 / 83.4015;background:currentColor;-webkit-mask:var(--wm-wortmarke) center/contain no-repeat;mask:var(--wm-wortmarke) center/contain no-repeat}
.wm--lockup{aspect-ratio:480 / 92.9033;-webkit-mask-image:var(--wm-lockup);mask-image:var(--wm-lockup)}
.wm--mark{aspect-ratio:1;-webkit-mask-image:var(--wm-bildmarke);mask-image:var(--wm-bildmarke)}
/* The wordmark on the page is live type. 5.1 is the landing footer's fit: the word fills --w. Mark and lockup stay drawn. */
.wm:not(.wm--mark):not(.wm--lockup){aspect-ratio:auto;background:none;-webkit-mask:none;mask:none;container-type:inline-size}
.wm:not(.wm--mark):not(.wm--lockup)::before{content:"NAMCHE";display:block;font-family:var(--font-display);font-weight:var(--weight-display);letter-spacing:var(--tracking-display);line-height:var(--leading-tight);font-size:calc(100cqi / 5.1);white-space:nowrap}
.logo-field{display:grid;place-items:center;min-height:calc(var(--space-64) * 5);padding:var(--space-32);border:var(--rule);background:var(--g,var(--gaia-selene));color:var(--k,var(--ink-light));position:relative;overflow:hidden}
.logo-field--photo{padding:0}
.logo-field--photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.logo-field--photo .wm,.logo-field--photo .mark{position:relative}
.logo-field--short{min-height:calc(var(--space-64) * 3)}

/* Clear-space diagrams: the box is the protected zone, X drawn as a hairline square */
.zone{position:relative;display:grid;place-items:center;padding:var(--pad);border:var(--stroke) dashed currentColor;width:fit-content;margin:0 auto}
.zone__in{display:block}
.zone__x{position:absolute;font-family:var(--font-mono);font-weight:var(--weight-mono);font-size:var(--type-tag);line-height:1;text-transform:uppercase}
.zone__x--l{left:var(--space-4);top:50%;translate:0 -50%}
.zone__x--t{top:var(--space-4);left:50%;translate:-50% 0}
.flag{display:inline-flex;align-items:center;padding:var(--space-8) var(--space-16);border:var(--rule);border-radius:var(--radius-pill);font:var(--role-label-caption);line-height:1;text-transform:var(--role-label-case);white-space:nowrap}

/* Don't logos (foreign use) */
.dontbox{display:grid;place-items:center;min-height:calc(var(--space-64) * 3);border:var(--rule);padding:var(--space-16);overflow:hidden}
.dontbox .wm--lockup{width:min(100%,calc(var(--space-64) * 3))}
.dontbox--stretch .wm--lockup{transform:scaleY(.4);transform-origin:center}
.dontbox--tint .wm--lockup{background:var(--helios-hestia)}
/* stylelint-disable-next-line namche/token-only -- sample: the Don't sample "no effects" puts a shadow on the lockup on purpose */
.dontbox--fx .wm--lockup{filter:drop-shadow(var(--space-4) var(--space-8) var(--space-8) rgb(0 0 0 / .45)) drop-shadow(0 0 var(--space-16) var(--okeanos-atlas))}
.dontbox--tiny .wm--lockup{width:var(--space-16)}
.dontbox--crowd{gap:var(--space-4);align-content:center}
.dontbox--crowd p{margin:0;font-size:var(--type-tag);line-height:1}

/* Partner placeholders (co-branding), plain boxes, no real logos */
.partner{display:grid;place-items:center;min-width:var(--space-64);height:var(--space-32);padding:0 var(--space-16);border:var(--stroke) dashed currentColor;font-family:var(--font-mono);font-weight:var(--weight-mono);font-size:var(--type-tag);line-height:1;text-transform:uppercase}
.cobrand{display:flex;align-items:center;gap:var(--space-32)}
.cobrand__rule{align-self:stretch;width:var(--stroke);background:currentColor}
.eventbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-16);width:100%}
@media (max-width:599px){
  .logo-field{padding:var(--space-16)}
  .cobrand{flex-direction:column;gap:var(--space-16)} /* the rule turns horizontal when the marks stack */
  .cobrand__rule{align-self:auto;width:var(--space-64);height:var(--stroke)}
  .eventbar{flex-wrap:wrap;justify-content:center}
}

/* Images */
.photo{display:block;width:100%;height:auto;object-fit:cover;background:var(--gaia-erebos)}
.photo--45{aspect-ratio:var(--ratio-portrait)}
.photo--wide{aspect-ratio:16 / 9}
.photo-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,calc(var(--space-32) * 5)),1fr));gap:var(--gutter)}
.photo-row--6,.photo-row--5{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-16)}
/* the row counts its own room, not the window's: 2 up to 420px, 3 up to 760px, then all of them */
.mgrid>.stack{container-type:inline-size}
@container (min-width:420px){.photo-row--5,.photo-row--6{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container (min-width:760px){.photo-row--5{grid-template-columns:repeat(5,minmax(0,1fr))}.photo-row--6{grid-template-columns:repeat(6,minmax(0,1fr))}}
/* single photos in the 4-column grid (under 900px): two per row from 480px, so a 4:5 frame never fills the page */
@media (min-width:480px) and (max-width:899px){.mgrid>:is(.s3,.s4,.s5,.s6):has(>img.photo){grid-column:span 2}}

/* Slider: the track runs past the right page margin (a margin and padding of --edge, so the first slide still sits on the grid) */
.slider{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-16)}
.slider__track{display:flex;gap:var(--gutter);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-right:calc(var(--edge) * -1);padding-right:var(--edge);scroll-padding-inline:0}
.slider__track::-webkit-scrollbar{display:none}
.slider__slide{flex:0 0 var(--span-3);min-width:0;scroll-snap-align:start}
.slider__ctrl{display:flex;gap:var(--space-8)}
.slider .cta--small{border:0;background:var(--cta-fill);color:var(--cta-ink);cursor:pointer}
.slider .cta--small:disabled{visibility:hidden}
.slider__track:focus-visible{outline:var(--stroke-bold) solid var(--hook);outline-offset:var(--space-8)}

/* Motion demos */
.curve{width:100%;max-width:calc(var(--space-64) * 5);height:auto;color:inherit}
.curve path,.curve line{fill:none;stroke:currentColor;stroke-width:1}
.curve .curve__line{stroke-width:2}
.dur{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-8) var(--gutter);padding:var(--space-16) 0;border-top:var(--rule);align-items:baseline}
@media (min-width:900px){.dur{grid-template-columns:calc(var(--space-64) * 2) calc(var(--space-64) * 2) minmax(0,1fr)}}
.dur__k{white-space:nowrap}
.dur__n{margin:0;white-space:nowrap;font-size:var(--type-lede);line-height:var(--leading-hero);line-height:round(nearest,calc(var(--type-lede) * var(--leading-hero)),var(--baseline));letter-spacing:var(--tracking-display)}
.rise{display:grid;gap:var(--space-16)}
.rise__f{overflow:hidden;border-bottom:var(--rule);font:var(--role-headline-title);line-height:var(--leading-hero);line-height:round(nearest,calc(var(--type-display) * var(--leading-hero)),var(--baseline));letter-spacing:var(--tracking-display)}
.rise__f span{display:block;clip-path:inset(0 0 var(--cut) 0);transform:translateY(calc(var(--cut) / 100% * var(--space-16)))}

/* Section patterns: little frames of the twelve scenes, one container each so the type scales with it */
.pat{margin:0;display:grid;gap:var(--space-16);align-content:start}
.pat__frame{container-type:inline-size;position:relative;aspect-ratio:16 / 9;overflow:hidden;background:var(--g);color:var(--k);border:var(--rule);padding:4cqw;display:flex;flex-direction:column;justify-content:space-between}
.pat__frame--bg{background:var(--g) var(--bgimg) center/cover no-repeat}
.pat__t{margin:0;font-family:var(--font-display);font-weight:var(--weight-display);font-size:var(--fs,8cqw);line-height:var(--leading-hero);letter-spacing:var(--tracking-display)}
.pat__m{margin:0;font-family:var(--font-mono);font-weight:var(--weight-mono);font-size:2.6cqw;line-height:1.3;text-transform:uppercase}
.pat__row{display:flex;justify-content:space-between;align-items:end;gap:2cqw}
.pat__cards{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:2cqw;flex:1;margin-top:3cqw}
.pat__cards i{display:block;background:var(--c)}
.pat__note{margin:0;max-width:44%;font-size:2.8cqw;line-height:1.4}
.pat__bar{display:inline-block;padding:1cqw 2cqw;background:var(--gaia-selene);color:var(--ink-on-gaia-selene);font-family:var(--font-mono);font-weight:var(--weight-mono);font-size:2.4cqw;line-height:1.4;text-transform:uppercase}
.pat__foot{height:12%;background:var(--helios-hestia);margin:0 -4cqw -4cqw}
.pat__word{margin:0;font-family:var(--font-display);font-weight:var(--weight-display);font-size:14cqw;line-height:1;letter-spacing:var(--tracking-display);text-transform:uppercase}

/* Open points (chapter 22) */
.dev{display:grid;gap:var(--space-8);border-top:var(--rule);padding-top:var(--space-16)}
.dev__head{display:flex;justify-content:space-between;gap:var(--space-16);align-items:baseline}

/* ── Design system page ────────────────────────────────────────── */
.ds-tools{display:flex;justify-content:space-between;align-items:center;gap:var(--space-16);margin-bottom:var(--space-32)}
.ds-btn{appearance:none;display:inline-flex;align-items:center;min-height:calc(var(--space-8) * 6);padding:0 var(--space-16);border:var(--rule);border-radius:var(--radius-pill);background:none;color:inherit;font:inherit;font-family:var(--font-mono);font-weight:var(--weight-ui);font-size:var(--type-mono-meta);text-transform:uppercase;cursor:pointer}
.ds-btn:hover,.ds-btn:focus-visible{background:var(--ink-light);color:var(--gaia-selene)}
.ds-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--measure-card)),1fr));align-items:start;gap:var(--space-32)}
.ds-card{margin:0;border:var(--rule);min-width:0;display:flex;flex-direction:column;background:var(--gaia-selene);color:var(--ink-on-gaia-selene)}
.ds-stage{position:relative;overflow:hidden;border-bottom:var(--rule)}
.ds-stage iframe{position:absolute;top:0;left:0;border:0;display:block;transform-origin:0 0;background:var(--gaia-selene);color-scheme:light}
.ds-card figcaption{padding:var(--space-16)}
.ds-card summary{list-style:none;display:flex;align-items:center;gap:var(--space-16);min-height:calc(var(--space-8) * 6);cursor:pointer}
.ds-card summary::-webkit-details-marker{display:none}
.ds-card summary h3{flex:1;margin:0;font:var(--role-text-body);line-height:var(--leading-tight)}
.ds-card summary .aff{position:relative;flex:none;width:var(--space-32);height:var(--space-32);border:var(--plus-stroke) solid currentColor;border-radius:var(--radius-pill);transition:transform var(--dur-base) var(--ease-standard)}
.ds-card summary .aff::before,.ds-card summary .aff::after{content:"";position:absolute;top:50%;left:50%;width:var(--space-16);height:var(--plus-stroke);background:currentColor;transform:translate(-50%,-50%)}
.ds-card summary .aff::after{transform:translate(-50%,-50%) rotate(90deg)}
.ds-card details[open] summary .aff{transform:rotate(45deg)}
.ds-card summary:hover h3{text-decoration:underline;text-decoration-thickness:var(--stroke-text);text-underline-offset:var(--underline-offset)}
.ds-card .desc{margin:var(--space-8) 0 0;max-width:var(--measure-text)}
.ds-card .src{display:block;margin-top:var(--space-8);word-break:break-all}
.ds-templates{list-style:none;margin:0;padding:0}
.ds-templates li{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-8) var(--gutter);padding:var(--space-16) 0;border-top:var(--rule)}
.ds-templates li:last-child{border-bottom:var(--rule)}
@media (min-width:900px){.ds-templates li{grid-template-columns:repeat(12,minmax(0,1fr))}.ds-templates li>div{grid-column:span 4}.ds-templates li>p{grid-column:span 8}}
.notice{padding:var(--space-64) 0;margin:0}

/* ── Footer of the three pages ─────────────────────────────────── */
.mfoot{padding:var(--space-64) var(--edge) var(--space-32);display:grid;gap:var(--space-32)}
.mfoot__links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-16) var(--gutter);align-items:start} /* the columns by section: two on a phone, four from 900px */
@media (min-width:900px){.mfoot__links{grid-template-columns:repeat(4,minmax(0,1fr))}}
.mfoot__links ul{list-style:none;margin:0;padding:0}
.mfoot__grp{display:flex;align-items:center;min-height:calc(var(--space-8) * 6);margin:0}
.mfoot__links a{display:inline-flex;align-items:center;min-height:calc(var(--space-8) * 6);text-decoration:none}
.mfoot__links a:hover,.mfoot__links a[aria-current]{text-decoration:underline;text-decoration-thickness:var(--stroke-text);text-underline-offset:var(--underline-offset)}
.mfoot__tag{display:flex;align-items:center;gap:var(--space-16);margin:0;padding-top:calc(var(--space-16) - var(--hairline));border-top:var(--hairline) solid var(--gaia-selene)}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Basic manual: palette swatches with their "Aa" sample, and the visually hidden title of the cover */
.pal-aa{display:flex;align-items:flex-end;padding:var(--space-16);color:var(--k);font:var(--role-text-lede);line-height:1;letter-spacing:var(--tracking-display)}

/* Brand assets page: download cards (a field with the file, its name and the formats as buttons) */
/* stylelint-disable-next-line namche/token-only -- a11y: text that is read out but not shown */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.dl{display:flex;flex-direction:column;gap:var(--space-16);min-width:0}
.dl__field{min-height:calc(var(--space-64) * 4)}
.dl__img{display:block;width:var(--w,100%);max-width:100%;height:auto}
.dl__row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-16);flex-wrap:wrap}
.dl__title{font-size:var(--type-ui-lg)}
.dl__files{display:flex;flex-wrap:wrap;gap:var(--space-8);margin:0}
.dl__files--block{margin-top:var(--space-64)}
.dl__btn{display:inline-flex;align-items:center;min-height:calc(var(--space-8) * 4);padding:0 var(--space-16);border:var(--rule);border-radius:var(--radius-pill);color:inherit;text-decoration:none;font:var(--role-label-meta);line-height:1;text-transform:var(--role-label-case)}
.dl__btn:hover,.dl__btn:focus-visible{background:var(--ink-light);color:var(--gaia-selene);border-color:var(--ink-light)}
.sw .sw__field{height:calc(var(--space-64) * 2)}