/* the desktop's extra faces (tokens.css has the shared ones): Dana's middle weights, Kalameh's regular (Latin text),
   Gilroy (small Latin capitals) */
@font-face { font-family: "Dana"; src: url("../fonts/dana/dana-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Dana"; src: url("../fonts/dana/dana-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Kalameh"; src: url("../fonts/kalameh/kalameh-400.woff2") format("woff2"); font-weight: 100 500; font-display: swap; }
@font-face { font-family: "Gilroy"; src: url("../fonts/gilroy/gilroy-700.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--night);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
html[lang="en"] body { line-height: 1.55; }
img, svg, video, picture { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; }
main:focus { outline: none; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; inset-inline-start: 12px; top: 12px; z-index: 200;
  padding: 10px 16px; border-radius: 999px; background: var(--white); color: var(--ink);
  transform: translateY(-160%); transition: transform .2s var(--ease-out);
}
.skip-link:focus { transform: none; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

/* a homepage section's eyebrow with its chapter number (mr_chap(), helpers.php): an old Georgian capital, also a numeral */
:lang(ka) { font-family: var(--font-ka); }
.chap { display: inline-flex; align-items: center; gap: 12px; }
.chap__no { font-family: var(--font-ka); font-size: 1.85em; font-weight: 400; line-height: 1; letter-spacing: 0; text-transform: none; }

/* direction-aware arrow: drawn pointing right, mirrored in RTL */
.arrow { width: 1.1em; height: 1.1em; flex: none; }
[dir="rtl"] .arrow { transform: scaleX(-1); }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 46px; padding: 0 22px; border-radius: 999px;
  font-weight: 650; font-size: 15px; text-decoration: none; white-space: nowrap;
  transition: background-color .25s, color .25s, transform .25s var(--ease-out), box-shadow .25s;
}
.btn--green { background: var(--green); color: var(--night); box-shadow: inset 0 1px 0 rgb(255 255 255 / .45); }
.btn--green:hover { background: var(--green-hi); transform: translateY(-1px); }


/* the scroll cue (pages/home.php, journal.js): how many scrolls to the next stop, where that is whole gestures */
.mr-cue {
  position: fixed; z-index: 30; left: 50%; bottom: 22px; display: flex; align-items: center; gap: 10px; height: 38px; margin: 0;
  padding: 0 16px 0 14px; border-radius: 999px; background: rgb(7 23 57 / .72); color: rgb(255 255 255 / .9);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14), 0 10px 26px -12px rgb(0 0 0 / .6); font-size: 13px; font-weight: 600;
  white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, 8px); transition: opacity .3s, transform .45s var(--ease-out);
}
html:not([data-tier="lite"]) .mr-cue { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.mr-cue.is-on { opacity: 1; transform: translate(-50%, 0); }
.mr-cue__dots { display: flex; gap: 5px; }
.mr-cue__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px rgb(131 205 32 / .6); }
html.mm-open .mr-cue, html.mr-static .mr-cue { display: none; }

/* a section well off screen: its looping animations wait (app.js) */
.mr-off, .mr-off *, .mr-off::before, .mr-off::after, .mr-off *::before, .mr-off *::after { animation-play-state: paused !important; }

/* ---------- weak machines (html[data-tier="lite"]: partials/head.php, app.js) ----------
   No live blur anywhere (a blur over a moving page is re-rendered every frame): the glass turns opaque enough to read.
   The WebGL scenes draw fewer pixels (MR.cap). */
html[data-tier="lite"] *, html[data-tier="lite"] *::before, html[data-tier="lite"] *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html[data-tier="lite"] .site-header.is-solid { background: rgb(7 23 57 / .97); }
html[data-tier="lite"] .site-header.is-light { background: rgb(251 249 245 / .98); }
html[data-tier="lite"] .clin.is-here .clin-panel { background: rgb(9 28 35 / .94); }
html[data-tier="lite"] .wed-cell { background: color-mix(in srgb, var(--cell) 70%, #1b0f0b); }
html[data-tier="lite"] .qnav__glass { background: linear-gradient(165deg, rgb(250 248 243 / .97), rgb(226 229 227 / .94)); }
html[data-tier="lite"] .mr-cue { background: rgb(7 23 57 / .94); }

/* small links get a 28px-tall hit area without changing how they look (WCAG 2.2 target size) */
.car-card__ka, .dec-unit__map, .dec-req__call, .sf-up, .stu-help a, .sf-reach__row, .sf-links a { display: inline-flex; align-items: center; min-height: 28px; }

/* a dialog is open (MR.lock, app.js): the page does not scroll, yet its scrollbar keeps its place, or the whole page
   changes width under the dialog and again when it closes (Lenis's own rule is overflow: clip, which takes the bar away) */
html.lenis.lenis-stopped:not(.lenis-autoToggle) { overflow: hidden; scrollbar-gutter: stable; }