/* NAMCHE slides - the stage of a slide (libraries/Slide) and the masters of slides.html.
   Loaded after site.css and manual.css (label bullet, CTA, mark and dot come from there).
   A slide is drawn at its true size, 1920 by 1080, with the same tokens as the pages, and scaled to the width
   of its frame; nothing in it is sized by the window. Five sizes: hero (cover title, numbers), xl (headline),
   title, lede (all running text) and the nav label (all mono lines). Full-strength ink, hairlines, no shadow,
   two grounds (Selene, #111111), Hestia once per slide at most. */

/* ── Stage ─────────────────────────────────────────────────────── */
.slide-frame{container-type:inline-size;position:relative;aspect-ratio:16 / 9;overflow:hidden;border:var(--rule)}
.slide{
  --slide-w:calc(var(--grid-x) * 15); /* 1920: fifteen modules of X, the 16:9 slide of the manual */
  --slide-k:tan(atan2(100cqw,var(--slide-w))); /* frame width over slide width, as a number */
  position:absolute;left:0;top:0;width:var(--slide-w);aspect-ratio:16 / 9;
  transform-origin:0 0;scale:var(--slide-k);
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  padding:var(--space-32) var(--page-margin-lg);
  background:var(--surface-page);color:var(--text-primary);
  font:var(--role-text-lede);
}
.slide.light{--surface-page:var(--gaia-selene);--text-primary:var(--ink-on-gaia-selene)}
.slide.dark{--surface-page:var(--ground-dark);--text-primary:var(--ink-on-ground-dark)}
/* a family tone as the ground of a whole slide (Michael, 2026-10-01): a section, a statement, a slide that carries the
   product; the ink of each tone is chosen by contrast. One family per deck section, Hestia never as a ground. */
.slide.okeanos-1{--surface-page:var(--family-okeanos-rotation-1);--text-primary:var(--family-okeanos-rotation-1-ink)}
.slide.okeanos-2{--surface-page:var(--family-okeanos-rotation-2);--text-primary:var(--family-okeanos-rotation-2-ink)}
.slide.okeanos-3{--surface-page:var(--family-okeanos-rotation-3);--text-primary:var(--family-okeanos-rotation-3-ink)}
.slide.helios-1{--surface-page:var(--family-helios-rotation-1);--text-primary:var(--family-helios-rotation-1-ink)}
.slide.helios-2{--surface-page:var(--family-helios-rotation-2);--text-primary:var(--family-helios-rotation-2-ink)}
.slide.helios-3{--surface-page:var(--family-helios-rotation-3);--text-primary:var(--family-helios-rotation-3-ink)}
.slide.helios-4{--surface-page:var(--family-helios-rotation-4);--text-primary:var(--family-helios-rotation-4-ink)}
.slide__top{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-32);min-height:var(--space-64)}
.slide__label,.sl-meta{display:flex;align-items:center;gap:var(--space-16);margin:0;font:var(--role-label-nav);text-transform:var(--role-label-case)}
.slide__hook{color:var(--hook)}
.slide__body{display:flex;flex-direction:column;gap:var(--space-64);min-height:0;padding:var(--space-64) 0 var(--space-32)}
/* the foot is the manual's Satzleiste: hairline above, a plus at each end, the line between */
.slide__foot{display:grid;grid-template-columns:var(--space-16) minmax(0,1fr) auto var(--space-16);align-items:center;gap:var(--space-16);padding-top:calc(var(--space-16) - var(--hairline));border-top:var(--rule)}
.slide__plus{position:relative;height:var(--space-16)}
.slide__plus::before,.slide__plus::after{content:"";position:absolute;top:50%;left:50%;width:var(--space-16);height:var(--plus-stroke);background:currentColor;transform:translate(-50%,-50%)}
.slide__plus::after{transform:translate(-50%,-50%) rotate(90deg)}

/* ── Voices on a slide ─────────────────────────────────────────── */
.sl-title{margin:0;font:var(--role-headline-hero);letter-spacing:var(--tracking-display);text-wrap:balance}
.sl-h{margin:0;font:var(--role-headline-xl);letter-spacing:var(--tracking-display);text-wrap:balance}
.sl-t{margin:0;font:var(--role-headline-title);line-height:round(nearest,calc(var(--type-display) * var(--leading-hero)),var(--baseline));letter-spacing:var(--tracking-display)}
.sl-text{margin:0;font:var(--role-text-lede);text-wrap:pretty}
.sl-num{margin:0;font:var(--role-headline-hero);letter-spacing:var(--tracking-display)}

/* ── The grid of a slide: 12 columns, gutter 32, inside the 64 margin ── */
.sl-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--space-32);row-gap:var(--space-32)}
.sl-grid>*{grid-column:1 / -1;min-width:0}
.sl-grid>.c1{grid-column:span 1}
.sl-grid>.c3{grid-column:span 3}
.sl-grid>.c4{grid-column:span 4}
.sl-grid>.c5{grid-column:span 5}
.sl-grid>.c6{grid-column:span 6}
.sl-grid>.c7{grid-column:span 7}
.sl-grid>.c8{grid-column:span 8}
.sl-stack{display:grid;gap:var(--space-16);align-content:start}
.sl-stack--32{gap:var(--space-32)}
.sl-push{margin-top:auto}

/* ── Masters ───────────────────────────────────────────────────── */
/* Statement: up to three lines at headline size */
.sl-lines{display:grid;gap:var(--space-32);margin:auto 0}
/* Agenda and Rows: lines divided by hairlines */
.sl-rows{border-bottom:var(--rule)}
.sl-row{align-items:baseline;padding:var(--space-16) 0;border-top:var(--rule)}
.sl-rows--open .sl-row{padding:var(--space-32) 0}
.sl-row .m-dot{margin-right:var(--space-16)}
/* Columns, Steps, Numbers, People: a hairline above each column */
.sl-col{display:grid;gap:var(--space-16);align-content:start;padding-top:calc(var(--space-16) - var(--hairline));border-top:var(--rule)}
/* Cards: boxes of equal height; one may be the ink field */
.sl-card{display:grid;gap:var(--space-16);align-content:start;min-height:calc(var(--grid-x) * 2);padding:var(--space-32);border:var(--rule)}
.sl-card--ink{background:var(--text-primary);color:var(--surface-page)}
.sl-list{list-style:none;display:grid;gap:var(--space-8);margin:0;padding:0}
.sl-list li{display:flex;align-items:baseline;gap:var(--space-16)}
.sl-list .m-bullet{position:relative;top:calc(var(--bullet-square-sm) / -4)}
.slide .cta{margin:0;justify-self:start}

/* ── slides.html: a master with its caption ────────────────────── */
.blk code{white-space:nowrap} /* a token name never breaks inside its dashes */
.master{display:grid;gap:var(--space-16);margin:0}
.master__cap{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-8) var(--gutter);align-items:baseline}
@media (min-width:900px){
  .master__cap{grid-template-columns:repeat(12,minmax(0,1fr))}
  .master__n{grid-column:span 3}
  .master__use{grid-column:span 9}
}