/* nada.qor.ge: the page wears the glasses. Black, grey, white; colour only under your finger.
   Three voices, the app's own: the sign (condensed black caps), the line (serif), the controls (mono). */
:root {
  --ink: #fff;
  --body: #d6d6d6;
  --quiet: #8a8a8a;
  --sign: ui-sans-serif, -apple-system, "Helvetica Neue", Arial, "Noto Sans Georgian", sans-serif;
  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Georgia, "Noto Serif Georgian", serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: #000; }
body {
  margin: 0; background: #000; color: var(--body);
  font: 17px/1.5 var(--serif); -webkit-font-smoothing: antialiased;
}
[data-lang="en"] [lang="ka"], [data-lang="ka"] [lang="en"] { display: none; }
main { max-width: 36rem; margin: 0 auto; padding: 0 16px 64px; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.top { display: flex; justify-content: space-between; align-items: center; height: 60px; }
.mark { font: 900 12px var(--sign); letter-spacing: 3px; color: #ebebeb; text-decoration: none; }
.top button {
  background: none; border: 0; padding: 6px 0; color: var(--quiet);
  font: 12px var(--mono); cursor: pointer;
}
.top button:hover { color: var(--ink); }

/* a catch: the grey truth on top, the colour original underneath; hold to see it */
.catch { position: relative; display: block; width: 100%; padding: 0; border: 0; background: #000; cursor: pointer; }
.catch img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; }
.catch .photo { position: absolute; inset: 0; opacity: 0; transition: opacity .15s; }
.catch.on .photo, .catch:active .photo { opacity: 1; }
.hint { margin: 10px 0 0; font: 11px var(--mono); color: var(--quiet); }
.line { margin: 14px 0 0; font-size: 21px; line-height: 1.35; color: var(--ink); }

h1 { margin: 72px 0 0; font: 900 clamp(48px, 15vw, 72px)/0.95 var(--sign); font-stretch: condensed; text-transform: uppercase; letter-spacing: -0.01em; color: var(--ink); }
h1 + p { margin: 10px 0 0; font-size: 27px; line-height: 1.25; color: var(--ink); }
.lead { margin: 28px 0 0; font-size: 19px; }
.cta { margin: 28px 0 0; display: inline-block; padding: 14px 18px; background: #fff; color: #000; font: 700 13px var(--mono); text-transform: uppercase; letter-spacing: .04em; }

h2 { margin: 72px 0 12px; font: 900 13px var(--sign); letter-spacing: 3px; text-transform: uppercase; color: #ebebeb; }
p { margin: 0 0 1em; }
p b { font-weight: 600; color: var(--ink); }

.story { width: min(300px, 70%); margin: 24px auto 0; display: block; aspect-ratio: 9 / 16; background: #111; }

.row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 24px; }
.row figure { margin: 0; }
.row .line { font-size: 15px; margin-top: 8px; }
@media (max-width: 560px) {
  .row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 24px -16px 0; padding: 0 16px; scrollbar-width: none; }
  .row figure { flex: 0 0 78%; scroll-snap-align: start; }
}

footer { margin-top: 96px; font: 12px var(--mono); color: var(--quiet); }
footer p { margin: 0 0 8px; }
footer img { width: 22px; height: 22px; vertical-align: -6px; margin-right: 8px; }
.privacy p { max-width: 34rem; }
@media (prefers-reduced-motion: reduce) { .catch .photo { transition: none; } }