/* qor.ge. Colours from the Qor visual identity (docs/qor-visual-identity.pdf):
   Deep Charcoal ground, Bone White type, Warm Gray for the secondary, and
   Saffron Gold only for the core and for what you can press. Type is our own:
   Josefin Sans (the logo's face) for the family's names; Newsreader (with
   Kolkheti for Georgian) for the promise and the Georgian lines;
   FiraGO, one family drawn for Latin and Georgian alike, for everything else. */

@font-face {
  font-family: 'Newsreader';
  src: url('/fonts/newsreader.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  src: url('/fonts/newsreader-italic.woff2') format('woff2');
  font-weight: 400 500;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Kolkheti';
  src: url('/fonts/kolkheti-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+10A0-10FF, U+2D00-2D2F;
}
@font-face {
  font-family: 'Kolkheti';
  src: url('/fonts/kolkheti-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+10A0-10FF, U+2D00-2D2F;
}
/* Josefin Sans, the logo's face (src/wordmark.mjs), for the family's names. */
@font-face {
  font-family: 'Josefin Sans';
  src: url('/fonts/josefin-sans.woff2') format('woff2');
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Georgian capitals (Mtavruli) for the language switch, which FiraGO does
   not draw: Noto Sans Georgian, cut to the capitals alone. */
@font-face {
  font-family: 'Georgian Caps';
  src: url('/fonts/noto-sans-georgian-mtavruli.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+1C90-1CBF;
}
@font-face {
  font-family: 'FiraGO';
  src: url('/fonts/firago-regular-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'FiraGO';
  src: url('/fonts/firago-regular-georgian.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+10A0-10FF, U+2D00-2D2F;
}
@font-face {
  font-family: 'FiraGO';
  src: url('/fonts/firago-medium-latin.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'FiraGO';
  src: url('/fonts/firago-medium-georgian.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+10A0-10FF, U+2D00-2D2F;
}
@font-face {
  font-family: 'FiraGO';
  src: url('/fonts/firago-italic-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'FiraGO';
  src: url('/fonts/firago-italic-georgian.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+10A0-10FF, U+2D00-2D2F;
}

:root {
  /* Roles, not names: dark is the ground of the identity (Deep Charcoal,
     Bone White type); a light system setting turns it round (below). */
  --ground: #1a1a1a;
  --ink: #f2f0eb;
  --text: rgba(242, 240, 235, 0.82);
  --gray: #8a8580;
  --line: #353331;
  --card: #1f1f1f;
  --accent: #f5a82c; /* Saffron Gold: links on hover, the promise */
  --serif: 'Newsreader', 'Kolkheti', Georgia, serif;
  --sans: 'FiraGO', 'Georgian Caps', system-ui, sans-serif;
  color-scheme: dark;
}
/* Light: Bone ground, Charcoal type. Saffron Gold reads at 1.8:1 on Bone,
   so the gold for type deepens to 4.6:1 (the mark keeps its own gold), and
   the gray darkens to 4.7:1. */
@media (prefers-color-scheme: light) {
  :root {
    --ground: #f2f0eb;
    --ink: #1a1a1a;
    --text: rgba(26, 26, 26, 0.84);
    --gray: #6f6a65;
    --line: #d8d3cb;
    --card: #f8f7f3;
    --accent: #9a5f06;
    color-scheme: light;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  /* The logo's size and place, shared with the sky below. */
  --hero-top: clamp(0.75rem, 2.5vh, 2.75rem);
  --title-top: clamp(1.25rem, 5vh, 5.5rem);
  --word: min(34rem, 92vw, 47vh);
  position: relative;
  isolation: isolate;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--ground);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
main {
  flex: 1;
}
a {
  color: inherit;
  text-decoration: none;
}
:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}
main,
.foot {
  width: min(72rem, 100% - 2.5rem);
  margin-inline: auto;
}
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── Qor: the orbital mark, the wordmark under it ───────────────────── */
.hero {
  padding-top: var(--hero-top);
  text-align: center;
}
.lang {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--gray);
}
.lang [aria-current] {
  color: var(--ink);
}
.lang [lang='ka'] {
  letter-spacing: 0.02em;
}
.lang a {
  transition: color 0.2s;
}
.lang a:hover {
  color: var(--accent);
}
.lang__sep {
  color: var(--line);
}

.hero__title {
  margin: var(--title-top) 0 0;
  line-height: 0;
  color: var(--ink);
}
.hero__promise {
  margin: clamp(1rem, 2.6vh, 2.6rem) 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  color: var(--accent);
}
/* Georgian has no italic of its own: a slant only tilts it. */
.hero__promise:lang(ka) {
  font-style: normal;
}

/* QOR (src/wordmark.mjs): Q and R in bone, the O a belt turning round the
   orbital mark. The mark's rings are kept faint behind the belt. */
.word {
  display: block;
  /* The frame is wider than the word: it is centred on the O. On a short
     screen it gives way, so the page (footer too) fits in one screen. */
  width: var(--word);
  height: auto;
  margin: 0 auto;
  overflow: visible;
}
.word .ring { opacity: 0.35; }

/* The sky: the belt's bodies carried out across the page, fewer and
   fainter the further they drift (src/sky.svg, 3000 px square). Its middle
   is hung on the O's core: --core (from src/wordmark.mjs, set on body) is
   how far down the logo's frame the core sits, against the frame's width. */
.sky {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: url('/sky.svg') no-repeat 50%
    calc(var(--hero-top) + var(--title-top) + var(--word) * var(--core) - 1500px);
}

/* ── The tree ───────────────────────────────────────────────────────────
   A stem from QOR down to a rail; from the rail a thread to each card of
   the first row, and from each card a thread to the one below it. Most
   important first, read left to right. In the works is drawn dashed. On a
   phone the rail goes and it is one thread. */
.tree {
  --stem: clamp(1.5rem, 4vh, 3.25rem);
  --gap: clamp(1rem, 2.5vh, 1.5rem);
  --cols: 1;
  position: relative;
  margin-top: clamp(0.75rem, 2vh, 1.75rem);
  padding: var(--stem) 0 clamp(1.25rem, 4vh, 5rem);
}
.tree::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  height: var(--stem);
  border-left: 1px solid var(--line);
}
.tree__list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  column-gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.p {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: var(--gap);
  text-align: center;
}
.p:first-child {
  padding-top: 0;
}
.p::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  height: var(--gap);
  border-left: 1px solid var(--line);
}
.p[data-status='soon']::before {
  border-left-style: dashed;
}
.p__card {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 21rem;
  margin: 0 auto;
  padding: clamp(0.85rem, 2vh, 1.2rem) 1.35rem clamp(0.8rem, 1.8vh, 1.1rem);
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--card);
  transition: border-color 0.3s ease;
}
a.p__card:hover {
  border-color: rgba(245, 168, 44, 0.55);
}
/* The names in the logo's face, a touch heavier than the logo's 200 so
   they hold at this size. */
.p__name {
  margin: 0;
  font-family: 'Josefin Sans', var(--sans);
  font-weight: 300;
  font-size: 1.65rem;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.p__qor {
  color: var(--gray);
  font-weight: 400;
  margin-right: 0.12em;
}
.p__tag {
  margin: 0.45rem 0 0;
  font-size: 0.94rem;
  line-height: 1.5;
  text-wrap: pretty;
}
/* In Georgian the lines are Kolkheti, as the promise is. */
html[lang='ka'] .p__tag {
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.42;
}
.p__meta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin: auto 0 0;
  padding-top: clamp(0.45rem, 1.2vh, 0.75rem);
  font-size: 0.8rem;
  color: var(--gray);
  transition: color 0.3s ease;
}
a.p__card:hover .p__meta {
  color: var(--accent);
}
.g {
  width: 10px;
  height: 10px;
  flex: none;
  overflow: visible;
  fill: var(--ink);
}
.g__ring {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.4;
}
.g__ring--forming {
  stroke: var(--gray);
  stroke-width: 1.6;
  stroke-dasharray: 4.5 3.35;
}
.p[data-status='soon'] .p__card {
  background: transparent;
  border-style: dashed;
}
.p[data-status='soon'] .p__name,
.p[data-status='soon'] .p__tag {
  color: var(--gray);
}

/* Wider: a rail under the stem, and the cards in rows hanging from it. */
@media (min-width: 40rem) {
  .tree {
    --cols: 2;
  }
  .tree__list {
    padding-top: var(--gap);
  }
  .tree__list::before {
    content: '';
    position: absolute;
    top: 0;
    left: calc(50% / var(--cols));
    right: calc(50% / var(--cols));
    border-top: 1px solid var(--line);
  }
  .p:first-child {
    padding-top: var(--gap);
  }
  .p__card {
    max-width: none;
  }
}
@media (min-width: 64rem) {
  .tree {
    --cols: 4;
  }
}

/* ── Footer ─────────────────────────────────────────────────────────── */
.foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(0.9rem, 2vh, 1.4rem) 0 clamp(1rem, 2.5vh, 2rem);
  font-size: 0.85rem;
  color: var(--gray);
}
.foot p {
  margin: 0;
}
.foot a {
  color: var(--ink);
  transition: color 0.2s;
}
.foot a:hover {
  color: var(--accent);
}
.foot__qor {
  color: var(--gray);
}
.foot .lang a {
  color: inherit;
}
.foot .lang a:hover {
  color: var(--accent);
}

/* ── Motion: the mark turns and breathes on its own (src/mark.svg); the
   page fades in over 300 ms and the tree draws down. Off for anyone who
   asks for less. ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  body {
    animation: fade 0.3s ease-out;
  }
  .tree::before,
  .p::before {
    transform: scaleY(0);
    transform-origin: top;
    animation: grow 0.4s ease-out forwards;
  }
  .tree::before {
    animation-delay: 0.3s;
  }
  .tree__list::before {
    transform: scaleX(0);
    animation: grow 0.4s ease-out 0.6s forwards;
  }
  .p {
    opacity: 0;
    animation: fade 0.5s ease-out forwards;
    animation-delay: calc(0.9s + var(--i) * 0.06s);
  }
  .p::before {
    animation-delay: calc(0.9s + var(--i) * 0.06s);
  }
}
@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes grow {
  to {
    transform: none;
  }
}