/* Site shell: one sheet of drafting paper. Light first. */

@font-face { font-family: "Barlow"; font-weight: 300; font-style: normal; font-display: swap; src: url("assets/fonts/barlow-300.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 400; font-style: normal; font-display: swap; src: url("assets/fonts/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-style: normal; font-display: swap; src: url("assets/fonts/barlow-500.woff2") format("woff2"); }
/* Barlow has no Cyrillic: Kazakh letters come from Commissioner, a close flared grotesk (variable 300–500) */
@font-face { font-family: "Commissioner"; font-weight: 300 500; font-style: normal; font-display: swap; src: url("assets/fonts/commissioner-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Commissioner"; font-weight: 300 500; font-style: normal; font-display: swap; src: url("assets/fonts/commissioner-cyrillic-ext.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }

:root {
  /* paper and graphite */
  --paper: #f2f2ef;
  --sheet: #fbfbfa;
  --ink: #1d1d20;
  --ink-2: #57575a;
  --ink-3: #8c8c90;
  --rule: #26262a;
  --dot: #c2c2c6;
  /* drawing blue for links and the active sheet; non-photo blue for construction lines */
  --blue: #1f4fa8;
  --construct: #a9d3e8;

  /* one unit */
  --u: 8px;
  --inset: calc(var(--u) * 1.5);
  --font: "Barlow", "Commissioner", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* type scale */
  --t-xs: 0.75rem;
  --t-sm: 0.875rem;
  --t-md: 1rem;
  --t-lg: 1.25rem;
  --t-display: clamp(2.75rem, 7vw, 5.5rem);

  --ease: cubic-bezier(.22, 1, .36, 1);
  --grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='27.713'%3E%3Cg fill='%23c2c2c6'%3E%3Ccircle cx='0' cy='0' r='.75'/%3E%3Ccircle cx='16' cy='0' r='.75'/%3E%3Ccircle cx='8' cy='13.856' r='.75'/%3E%3Ccircle cx='0' cy='27.713' r='.75'/%3E%3Ccircle cx='16' cy='27.713' r='.75'/%3E%3C/g%3E%3C/svg%3E");
  color-scheme: light;
}

/* the same sheet under a dark lamp: graphite paper, pale ink, the figure's own dark card */
:root[data-theme="dark"] {
  --paper: #0b0b0c;
  --sheet: #131313;
  --ink: #e6e6e6;
  --ink-2: #a3a3a6;
  --ink-3: #6e6e72;
  --rule: #8a8a8f;
  --dot: #34343a;
  --blue: #8db0f5;
  --construct: #23455e;
  --grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='27.713'%3E%3Cg fill='%2334343a'%3E%3Ccircle cx='0' cy='0' r='.75'/%3E%3Ccircle cx='16' cy='0' r='.75'/%3E%3Ccircle cx='8' cy='13.856' r='.75'/%3E%3Ccircle cx='0' cy='27.713' r='.75'/%3E%3Ccircle cx='16' cy='27.713' r='.75'/%3E%3C/g%3E%3C/svg%3E");
  color-scheme: dark;
}

/* Kazakh is swapped in by script; keep the English out of sight until it is */
:root[lang="kk"]:not(.i18n) [data-kk] { visibility: hidden; }

@media (min-width: 720px) {
  :root { --inset: calc(var(--u) * 3); }
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--paper); }

body.site {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.site ::selection { background: var(--construct); color: var(--ink); }

.site a { color: var(--blue); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }

.site :focus-visible { outline: 1.5px solid var(--blue); outline-offset: 3px; }

/* ---------- the sheet ---------- */

.sheet {
  position: relative;
  min-height: calc(100svh - var(--inset) * 2);
  margin: var(--inset);
  border: 1px solid var(--rule);
  background-color: var(--sheet);
  /* isometric dot grid: dots 16px apart along 0°, 60° and 120° */
  background-image: var(--grid);
  background-position: center top;
  display: flex;
  flex-direction: column;
}

/* centring marks: a short stroke at the middle of each edge, as on a drawing sheet */
.sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  --m: calc(var(--u) * 1.5);
  background:
    linear-gradient(var(--rule), var(--rule)) 50% 0 / 1px var(--m) no-repeat,
    linear-gradient(var(--rule), var(--rule)) 50% 100% / 1px var(--m) no-repeat,
    linear-gradient(var(--rule), var(--rule)) 0 50% / var(--m) 1px no-repeat,
    linear-gradient(var(--rule), var(--rule)) 100% 50% / var(--m) 1px no-repeat;
}

/* ---------- title block (the site navigation) ---------- */

.title-block {
  display: flex;
  align-self: flex-end;
  border-left: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--sheet);
  font-family: var(--font);
  font-size: var(--t-xs);
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  position: relative;
  z-index: 2;
}

.title-block ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.title-block li + li,
.tb-sheet { border-left: 1px solid var(--rule); }

.title-block a {
  display: grid;
  grid-template-columns: 7px auto;
  align-items: center;
  column-gap: var(--u);
  row-gap: 6px;
  min-height: calc(var(--u) * 6);
  padding: calc(var(--u) * 1.5) calc(var(--u) * 3);
  color: var(--ink-2);
  font-weight: 500;
  text-decoration: none;
  transition: color 160ms var(--ease), background-color 160ms var(--ease);
}

.tb-desc {
  grid-column: 2;
  font-weight: 400;
  font-size: var(--t-xs);
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink-2);
}

/* the marker: an empty square for a sheet, filled blue for the one on the board */
.title-block a::before {
  content: "";
  width: 7px;
  height: 7px;
  border: 1px solid currentColor;
  flex: none;
  transition: background-color 160ms var(--ease);
}

.title-block a:hover { color: var(--ink); background: var(--paper); }
.title-block a:focus-visible { outline-offset: -4px; }

.title-block a[aria-current="page"] { color: var(--blue); }
.title-block a[aria-current="page"]::before { background: var(--blue); border-color: var(--blue); }

/* switches: theme and language, two pairs of small cells stacked in one block cell */
.tb-tools {
  display: grid;
  align-content: center;
  gap: 4px;
  padding: calc(var(--u) * 1) calc(var(--u) * 2);
  border-left: 1px solid var(--rule);
}

.tb-switch { display: flex; }

.tb-switch button {
  flex: 1;
  min-width: calc(var(--u) * 5);
  min-height: calc(var(--u) * 3);
  margin: 0;
  padding: 2px calc(var(--u) * 1);
  border: 1px solid var(--ink-3);
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 160ms var(--ease), background-color 160ms var(--ease);
}

.tb-switch button + button { border-left: 0; }
.tb-switch button:hover { color: var(--ink); background: var(--paper); }
.tb-switch button:focus-visible { outline-offset: 1px; position: relative; }
.tb-switch button[aria-pressed="true"] { color: var(--sheet); background: var(--blue); border-color: var(--blue); }

.tb-sheet {
  display: flex;
  align-items: flex-end;
  margin: 0;
  padding: calc(var(--u) * 1.5) calc(var(--u) * 3);
  color: var(--ink-2);
  letter-spacing: 0.01em;
  text-transform: none;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 559px) {
  .title-block { align-self: stretch; border-left: 0; flex-wrap: wrap; }
  .title-block ul { flex: 1 0 100%; border-bottom: 1px solid var(--rule); }
  .tb-tools { flex: 1; display: flex; gap: calc(var(--u) * 1.5); border-left: 0; padding: var(--u) calc(var(--u) * 2); }
  .tb-switch { flex: 1; }
  .tb-switch button { min-height: calc(var(--u) * 5.5); }
  .title-block li { flex: 1; }
  .title-block a { padding: calc(var(--u) * 1.5) calc(var(--u) * 2); }
  .tb-sheet { padding: calc(var(--u) * 1.5) calc(var(--u) * 2); }
}

/* ---------- home ---------- */

.home {
  flex: 1;
  display: grid;
  place-items: center;
  padding: calc(var(--u) * 6) calc(var(--u) * 3) calc(var(--u) * 12);
}

.welcome {
  position: relative;
  margin: 0;
  max-width: 15ch;
  font-size: var(--t-display);
  font-weight: 300;
  line-height: var(--lh);
  letter-spacing: -0.025em;
  text-align: center;
  text-wrap: balance;
  color: var(--ink);
  /* lettering guidelines in non-photo blue, one pair per line: cap line and baseline */
  --lh: 1.04em;
  --lh: round(1.04em, 1px);
  padding: 0 calc(var(--u) * 4);
  background-image:
    repeating-linear-gradient(to bottom, transparent 0 round(var(--lh) * 0.2, 1px), var(--construct) round(var(--lh) * 0.2, 1px) calc(round(var(--lh) * 0.2, 1px) + 1px), transparent calc(round(var(--lh) * 0.2, 1px) + 1px) var(--lh)),
    repeating-linear-gradient(to bottom, transparent 0 round(var(--lh) * 0.83, 1px), var(--construct) round(var(--lh) * 0.83, 1px) calc(round(var(--lh) * 0.83, 1px) + 1px), transparent calc(round(var(--lh) * 0.83, 1px) + 1px) var(--lh));
}


.welcome-ghost { visibility: hidden; }
.welcome-line { position: absolute; inset: 0 calc(var(--u) * 4); }
.welcome-typed { white-space: pre-wrap; }

.caret {
  display: inline-block;
  width: 0.06em;
  min-width: 2px;
  height: 0.82em;
  margin-left: 0.04em;
  vertical-align: -0.04em;
  background: var(--blue);
  animation: caret 1.06s steps(1, end) infinite;
}

@keyframes caret { 50% { opacity: 0; } }
.caret.caret-rest { animation: none; opacity: 0; transition: opacity 600ms var(--ease); }

.vh { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- yurt page shell ---------- */

.site-yurt .iso-page { margin-top: calc(var(--u) * 6); }
.site-yurt .sheet { display: block; }
.site-yurt .title-block { margin-left: auto; width: max-content; }

@media (max-width: 559px) {
  .site-yurt .title-block { width: auto; }
  .site-yurt .iso-page { --spread: 10px; margin-top: calc(var(--u) * 3); width: calc(100% - var(--u) * 3); }
}

/* shell type and contrast around the figure; the figure itself is untouched */
.site-yurt .iso-page { --spread: calc(var(--u) * 3); background: var(--sheet); box-shadow: 0 0 0 var(--spread) var(--sheet); }
@media (max-width: 559px) { .site-yurt .iso-page { --spread: 10px; } }
.site-yurt .iso-plate-corner[data-corner="title"],
.site-yurt .iso-plate-corner[data-corner="hint"],
.site-yurt .iso-legend,
.site-yurt .yu-en,
.site-yurt .yu-num { color: var(--ink-2); }
.site-yurt .yu-num { font-size: 11px; }

@media (max-width: 559px) {
  .site-yurt .yu .iso-plate { padding-bottom: 96px; }
  .site-yurt .iso-plate-corner[data-corner="hint"] { bottom: 40px; }
  .site-yurt .iso-plate-corner[data-corner="readout"] { left: 0; white-space: normal; text-align: right; line-height: 1.35; }
}

@media (prefers-reduced-motion: reduce) {
  .caret { animation: none; }
  .title-block a, .title-block a::before, .tb-switch button { transition: none; }
}

/* the narrowest phones: the sheet number is decoration; give its room to the switches */
@media (max-width: 399px) {
  .tb-sheet { display: none; }
}

/* the fonts stop at 500; keep part names from being faux-bolded */
.site-yurt .yu-kk { font-weight: 500; color: var(--ink); }