/* Match UP base: tokens, reset, type, browser surfaces, layout.
   Desk-letters redesign, phase 1 (2026-11-01). Loaded on every page.

   Palette: burgundy #732f3e, warm greige #ddd8d6, grey #595959 and derived
   tints only. No fourth hue, no gradients on burgundy, no near-black fields.
   Greige is the page ground. Headings are FiraGO MT (real Mtavruli, written
   by inc/heading-case.php), body is Noto Sans Georgian.

   Order: base.css -> components.css -> home.css (front page only), or
   pages-company.css + pages-utility.css (every other page). */

/* ---------- 1. Tokens ---------- */
:root {
  /* Colour */
  --burgundy: #732f3e;
  --burgundy-deep: #56222d;      /* hover on burgundy */
  --greige: #ddd8d6;             /* page ground */
  --greige-deep: #d2ccc9;        /* footer, slots, image placeholders */
  --greige-lift: #e8e4e2;        /* quiet alternate section, hover wash */
  --surface: #faf8f7;            /* paper: badges, the form sheet, text on burgundy */
  --ink: #262220;                /* text */
  --grey: #595959;               /* secondary text (5.9:1 on greige) */
  --hair: rgba(38, 34, 32, .16); /* 1px dividers */
  --rule: var(--ink);            /* 2px list-opening rules */
  --focus: var(--burgundy);
  --on-burgundy: var(--surface);

  /* Type */
  --font-display: "FiraGO MT", "Noto Sans Georgian", sans-serif;
  --font-body: "Noto Sans Georgian", "FiraGO MT", sans-serif;
  --t-body: 17px;
  --t-small: 14.5px;
  --t-micro: 13px;
  --t-row: clamp(15px, 1.25vw, 18px);          /* disclosure row titles */
  --t-h3: clamp(22px, 2.4vw, 32px);
  --t-h2: clamp(32px, 4.4vw, 64px);            /* section headings, 900 */
  --t-h1: clamp(36px, 5vw, 72px);              /* inner page heads */
  --t-display: clamp(54px, 8vw, 116px);        /* cut-out display (ᲐᲦᲐᲠ ᲒᲐᲓᲐᲓᲝ) */

  /* Space and layout */
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1360px;
  --measure: 62ch;
  --space-section: clamp(72px, 9vw, 136px);

  /* Shape and depth (paper on a desk: offset, soft blur, never a halo) */
  --radius-btn: 14px;
  --radius-card: 12px;
  --radius-paper: 3px;
  --shadow-paper: 0 28px 40px -22px rgba(36, 20, 8, .6), 0 2px 5px rgba(36, 20, 8, .28);
  --shadow-card: 0 14px 28px -16px rgba(38, 34, 32, .5), 0 1px 3px rgba(38, 34, 32, .18);
  --shadow-menu: 0 24px 40px -18px rgba(38, 34, 32, .45), 0 2px 6px rgba(38, 34, 32, .12);

  /* Motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* Images the CSS paints (relative to this file) */
  --desk-clear: url("../images/paper/desk/base.webp");

  color-scheme: light;
  accent-color: var(--burgundy);
  scrollbar-color: var(--burgundy) var(--greige-deep);
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; }
body {
  margin: 0;
  background: var(--greige);
  color: var(--ink);
  font: 400 var(--t-body)/1.7 var(--font-body);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  caret-color: var(--burgundy);
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
summary { cursor: pointer; }
[hidden] { display: none !important; }
table { border-collapse: collapse; }
:where(td, th) { font-variant-numeric: tabular-nums; }

/* ---------- 3. Type ---------- */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-synthesis: none;
  line-height: 1.15;
  text-wrap: balance;
  overflow-wrap: break-word;
}
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
strong, b { font-weight: 700; }

/* ---------- 4. Browser surfaces ---------- */
::selection { background: var(--burgundy); color: var(--surface); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--greige-deep); }
::-webkit-scrollbar-thumb { background: var(--burgundy); border-radius: 6px; border: 3px solid var(--greige-deep); }
::placeholder { color: var(--grey); opacity: 1; }

/* ---------- 5. Accessibility helpers ---------- */
.sr-only, .screen-reader-text, .vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 12px; top: -80px; z-index: 1000; padding: 10px 16px;
  background: var(--burgundy); color: var(--surface); border-radius: 10px; text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------- 6. Layout ---------- */
.shell { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.shell--narrow { --max: 980px; }
.section { padding-block: var(--space-section); }
.section--lift { background: var(--greige-lift); }
.section--flush-bottom { padding-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media print {
  .site-header, .site-footer, .skip, .crumbs { display: none !important; }
  body { background: #fff; }
}