/* NAMCHE brand intro - styles for brand-intro.html.
   Loaded after site.css and manual.css (prodbar, nav, CTA, label, h2, chapters, logos, swatches
   come from there). Everything here is a DS token or derived from one: Namche Shadow Sans and
   Shadow Mono at 500 only, full-strength ink, hairlines, no shadow, nothing fades, nothing scales
   on hover. The page teaches by showing the site's own components, so the samples are real. */

/* ── Lesson 01: the build. The landing's own view, rebuilt in four layers ─────────────────
   Each frame is a 1440 x 810 artboard of real components, scaled to its frame (js/intro.js sets --k). */
.mgrid>figure{margin:0}
.build{margin:0;display:grid;gap:var(--space-16);align-content:start}
.build__stage{position:relative;aspect-ratio:16 / 9;overflow:hidden;background:var(--ground-dark);border:var(--rule)}
/* stylelint-disable namche/token-only -- geometry: the 1440 x 810 artboard of the landing hero, a picture of the page at full size */
.board{position:absolute;left:0;top:0;width:1440px;height:810px;transform:scale(var(--k,.4));transform-origin:0 0;background:var(--ground-dark);color:var(--gaia-selene);pointer-events:none;user-select:none}
.board__mark{position:absolute;left:var(--page-margin-lg);top:var(--page-margin-lg);--w:var(--mark-size)}
.board__text{position:absolute;left:var(--page-margin-lg);bottom:var(--page-margin-lg);width:816px;display:grid;gap:var(--space-32)}
.board__tag{display:flex;align-items:center;gap:var(--space-16)}
.board__title{margin:0;font-family:var(--font-display);font-weight:var(--weight-display);font-size:112px;line-height:var(--leading-hero);letter-spacing:var(--tracking-display)}
.board__row{display:flex;justify-content:space-between;align-items:center;height:48px}
.board__row .cta{margin:0}
.board__cue{display:block;width:80px;height:80px;background:currentColor;-webkit-mask:var(--shape-arrow-down) center/contain no-repeat;mask:var(--shape-arrow-down) center/contain no-repeat}
.board__img{position:absolute;left:912px;top:0;width:528px;height:810px;object-fit:cover;background:var(--gaia-erebos)}
/* stylelint-enable namche/token-only */

/* ── Lesson 02: grounds ───────────────────────────────────────── */
.gtiles{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-32) var(--gutter)}
@media (min-width:480px){.gtiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.gtiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
.gtile{margin:0;display:grid;gap:var(--space-16);align-content:start;min-width:0}
.gtile__field{display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-32);min-height:calc(var(--space-64) * 4);padding:var(--space-16);background:var(--g);color:var(--k);border:var(--rule)}
.gtile__field .wm{--w:var(--space-32)}
.gtile__sample{margin:0;font-family:var(--font-display);font-weight:var(--weight-display);font-size:var(--type-ui-lg);line-height:var(--leading-hero);line-height:round(nearest,calc(var(--type-ui-lg) * var(--leading-hero)),var(--baseline));letter-spacing:var(--tracking-display);text-wrap:balance}
.gtile__ink{display:flex;justify-content:space-between;gap:var(--space-16)}

/* ── Lesson 03: type ──────────────────────────────────────────── */
.tspec__sans,.tspec__mono{margin:0}
.tspec__sans{font-size:clamp(var(--type-stat),9vw,var(--type-hero));line-height:var(--leading-hero);line-height:round(nearest,calc(clamp(var(--type-stat),9vw,var(--type-hero)) * var(--leading-hero)),var(--baseline))}
.tspec__mono{font-family:var(--font-mono);font-weight:var(--weight-mono);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));text-transform:uppercase}
.spec__v .m-text{max-width:var(--span-6)}

/* ── Lesson 04: hook ──────────────────────────────────────────── */
.hookhead{margin:0 0 var(--space-16)}
.hookbox{min-height:calc(var(--space-64) * 4);align-content:space-between;justify-content:space-between;gap:var(--space-32)}
.hookbox .m-meta{display:flex;align-items:center;gap:var(--space-16)}
.hookbox__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)}
.hookbox__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-16)}
.hookbox .cta{margin:0}
.chips{display:flex;flex-wrap:wrap;gap:var(--space-16)}
.chip{margin:0;display:grid;gap:var(--space-8);justify-items:start;width:calc(var(--space-64) + var(--space-16))}
.chip i{display:block;width:var(--space-64);height:var(--space-64);background:var(--c);border:var(--rule)}
.chip figcaption{margin:0}

/* ── Lesson 05: mark ──────────────────────────────────────────── */
.sub{margin:0 0 var(--space-16);padding-top:var(--space-16);border-top:var(--rule)}
.shape{display:block;background:currentColor}
.shape--cue{width:calc(var(--space-64) * 1.5);height:calc(var(--space-64) * 1.5);-webkit-mask:var(--shape-arrow-down) center/contain no-repeat;mask:var(--shape-arrow-down) center/contain no-repeat}
.shape--plus{width:var(--space-64);height:var(--space-64);-webkit-mask:var(--shape-cursor) center/contain no-repeat;mask:var(--shape-cursor) center/contain no-repeat}
/* The join is the landing's own link between the process cards (.step__neck in site.css): a thin line with round ends, here at rest and upright, as between the cards */
.join{position:relative;top:auto;left:auto;transform:none;height:calc(var(--space-64) * 1.5);color:inherit}

/* ── Lesson 06: image ─────────────────────────────────────────── */
.imgs{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-32) var(--gutter)}
@media (min-width:600px){.imgs{grid-template-columns:repeat(3,minmax(0,1fr))}}
.imgs figure{margin:0;display:grid;gap:var(--space-16);align-content:start;min-width:0}

/* ── Lesson 07: motion ────────────────────────────────────────── */
.rise-demo{display:grid;gap:var(--space-16);justify-items:start;margin-top:var(--space-32)}
.rise-demo__lines{display:grid}
.rise-demo__line{margin:0;overflow:hidden;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-demo__line span{display:block;transform:translateY(100%)}
.rise-demo.is-in .rise-demo__line span{transform:none;transition:transform var(--dur-slow) var(--ease-standard);transition-delay:calc(var(--i) * 120ms)}
.hover-demo{margin-top:var(--space-32);display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-16) var(--space-32)}
.hover-demo .cta{margin:0;--cta-fill:var(--ink-light);--cta-ink:var(--gaia-selene)}
.hover-demo .cta:hover{--cta-fill:var(--hook);--cta-ink:var(--hook-ink)}
@media (prefers-reduced-motion:reduce){
  .rise-demo__line span{transform:none}
  .rise-demo.is-in .rise-demo__line span{transition:none}
}

/* ── Lesson 08: never ─────────────────────────────────────────── */
.nv{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}
.nv:last-of-type{border-bottom:var(--rule)}
.nv--head{border-top:0;padding-top:0}
.nv__never{margin:0;text-decoration:line-through;text-decoration-thickness:var(--stroke-text)}
@media (min-width:900px){
  .nv{grid-template-columns:repeat(12,minmax(0,1fr))}
  .nv__n{grid-column:span 1}
  .nv__never{grid-column:span 5}
  .nv__instead{grid-column:span 6}
  .nv--head .nv__never{text-decoration:none}
}

/* ── Go deeper ────────────────────────────────────────────────── */
.deeper{list-style:none;margin:0;padding:0;border-top:var(--hairline) solid var(--gaia-selene)}
.deeper li{border-bottom:var(--hairline) solid var(--gaia-selene)}
.deeper__link{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-8) var(--gutter);align-items:baseline;padding:var(--space-16) 0;color:inherit;text-decoration:none}
@media (min-width:900px){
  .deeper__link{grid-template-columns:repeat(12,minmax(0,1fr))}
  .deeper__n{grid-column:span 1}
  .deeper__t{grid-column:span 5}
  .deeper__d{grid-column:span 6}
}
.deeper__link:hover .deeper__t,.deeper__link:focus-visible .deeper__t{text-decoration:underline;text-decoration-thickness:var(--stroke-text);text-underline-offset:var(--underline-offset)}
.deeper__link:hover .deeper__n,.deeper__link:focus-visible .deeper__n{color:var(--hook)}
.mfoot--after{padding-top:0}

/* ── Fixed / flexes: the end of every lesson. Square = fixed, ring = flexes, dashed square = open, short line = change ── */
.fx{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-32) var(--gutter);margin-top:var(--space-64);padding-top:var(--space-16);border-top:var(--rule)}
@media (min-width:900px){.fx{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fx__item{display:grid;gap:var(--space-8);align-content:start}
.fx__item .m-text{max-width:var(--span-6)}
.fx__k{display:flex;align-items:center;gap:var(--space-16)}
.fx__mark{flex:none;width:var(--bullet-square-sm);height:var(--bullet-square-sm);background:currentColor}
.fx__mark--flex{background:none;border:var(--rule);border-radius:var(--radius-pill)}
.fx__mark--open{background:none;border:var(--stroke) dashed currentColor}
.fx__mark--change{background:none;border:var(--rule);border-radius:0;height:0;align-self:center;width:var(--space-16)}