/* kartora's skin: its base, from kartora-docs/design/components/kartora.css. Every colour, size and space is a token of
   tokens/, named --kartora-*. Sizes follow the width of the container `app`, which the root of a page is, never the window's:
   a phone below 720px, a tablet from 720px, a desktop from 1200px.
   The person's accessibility is laid over every design (SCREEN-20): --access-text-size, --access-leading and --access-motion
   are read here, and --kartora-density is the design's own, laid by its lobe: 1 for regular text, and the large text size for
   young students, 19 over 17. --k-scale is the two of them, which every size below is multiplied by. */

.k-app {
  container: app / inline-size;
  --k-scale: calc(var(--kartora-density, 1) * var(--access-text-size, 1));
  background: var(--kartora-bg);
  color: var(--kartora-ink);
  font-family: var(--kartora-font-body);
  font-size: calc(17px * var(--k-scale));
  line-height: calc(1.55 * var(--access-leading, 1));
  min-height: 100%;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
:where(.k-app) *, :where(.k-app) *::before, :where(.k-app) *::after { box-sizing: border-box; }
.k-app :focus-visible { outline: 3px solid var(--kartora-focus); outline-offset: 2px; }
:where(.k-app) a { color: var(--kartora-accent); }
.k-app svg { max-width: 100%; }

/* Type */
.k-display, .k-title, .k-heading {
  font-family: var(--kartora-font-display);
  font-weight: 700;
  line-height: calc(1.12 * var(--access-leading, 1));
  letter-spacing: -.01em;
  margin: 0;
  text-wrap: balance;
}
.k-display { font-size: calc(var(--kartora-display) * var(--k-scale)); }
.k-title { font-size: calc(var(--kartora-title) * var(--k-scale)); }
.k-heading { font-size: calc(var(--kartora-heading) * var(--k-scale)); line-height: calc(1.25 * var(--access-leading, 1)); }
@container app (min-width: 1200px) {
  .k-display { font-size: calc(var(--kartora-display-wide) * var(--k-scale)); }
  .k-title { font-size: calc(var(--kartora-title-wide) * var(--k-scale)); }
  .k-heading { font-size: calc(var(--kartora-heading-wide) * var(--k-scale)); }
}
.k-lede { font-size: calc(var(--kartora-text-lg) * var(--k-scale)); margin: 0; }
.k-muted { color: var(--kartora-muted); }
:where(.k-app) p { margin: 0; }

/* Layout */
.k-stack { display: flex; flex-direction: column; gap: var(--kartora-space-4); min-width: 0; }
.k-grid { display: grid; gap: var(--kartora-space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.k-content {
  width: 100%;
  max-width: var(--kartora-page);
  margin: 0 auto;
  padding: var(--kartora-space-5) var(--kartora-space-4) var(--kartora-space-7);
  display: flex;
  flex-direction: column;
  gap: var(--kartora-space-6);
}
@container app (min-width: 720px) { .k-content { padding: var(--kartora-space-6) var(--kartora-space-6) var(--kartora-space-8); } }
.k-section { display: flex; flex-direction: column; gap: var(--kartora-space-4); min-width: 0; }
.k-closing { align-items: center; text-align: center; }

/* The map's scale, as a share of its full colour over its fog: the mark and the illustrations are drawn in it. */
.k-shade-0 { fill: var(--kartora-map-low); }
.k-shade-20 { fill: color-mix(in srgb, var(--kartora-map-high) 20%, var(--kartora-map-low)); }
.k-shade-25 { fill: color-mix(in srgb, var(--kartora-map-high) 25%, var(--kartora-map-low)); }
.k-shade-40 { fill: color-mix(in srgb, var(--kartora-map-high) 40%, var(--kartora-map-low)); }
.k-shade-50 { fill: color-mix(in srgb, var(--kartora-map-high) 50%, var(--kartora-map-low)); }
.k-shade-55 { fill: color-mix(in srgb, var(--kartora-map-high) 55%, var(--kartora-map-low)); }
.k-shade-60 { fill: color-mix(in srgb, var(--kartora-map-high) 60%, var(--kartora-map-low)); }
.k-shade-70 { fill: color-mix(in srgb, var(--kartora-map-high) 70%, var(--kartora-map-low)); }
.k-shade-72 { fill: color-mix(in srgb, var(--kartora-map-high) 72%, var(--kartora-map-low)); }
.k-shade-75 { fill: color-mix(in srgb, var(--kartora-map-high) 75%, var(--kartora-map-low)); }
.k-shade-85 { fill: color-mix(in srgb, var(--kartora-map-high) 85%, var(--kartora-map-low)); }
.k-shade-90 { fill: color-mix(in srgb, var(--kartora-map-high) 90%, var(--kartora-map-low)); }
.k-shade-95 { fill: color-mix(in srgb, var(--kartora-map-high) 95%, var(--kartora-map-low)); }
.k-shade-100 { fill: var(--kartora-map-high); }