/* ck-page.css — the shared skin for the standalone public pages
   (/shesaxeb/, /siaxleebi/ and their english mirrors).
   Same palette as /switch/, kept in one place so the family stays in step. */

:root {
  --night:  #0A1428;
  --panel:  #FFFFFF;
  --ink:    #0A1428;
  --mist:   #EDF1F6;
  --muted:  #5F7490;
  --orchid: #C4306E;
  --gold:   #A9760F;
  --line:   #D3DCE7;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --panel:  #101E3A;
    --ink:    #E9EFF7;
    --mist:   #070E1D;
    --muted:  #8B9DB6;
    --orchid: #F16CA4;
    --gold:   #EBB65C;
    --line:   #22314F;
  }
}
:root[data-theme="dark"] {
  --panel:  #101E3A;
  --ink:    #E9EFF7;
  --mist:   #070E1D;
  --muted:  #8B9DB6;
  --orchid: #F16CA4;
  --gold:   #EBB65C;
  --line:   #22314F;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--mist);
  color: var(--ink);
  font-family: "Noto Sans Georgian", "Segoe UI", Tahoma, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }

.page { max-width: 52rem; margin: 0 auto; padding: 0 1.15rem 4rem; display: flex; flex-direction: column; gap: 3.2rem; }

/* no text-transform: uppercase — Georgian maps to Mtavruli, which several
   system faces render as tofu. Latin labels are typed uppercase inline. */
.mono {
  font-family: ui-monospace, Consolas, "DejaVu Sans Mono", monospace;
  letter-spacing: .18em;
  font-size: .7rem;
}

/* ---------------- hero ---------------- */
.hero {
  background: var(--night);
  color: #EDF1F6;
  margin: 0 -1.15rem;
  padding: 2.4rem 1.6rem 3.5rem;
  display: flex; flex-direction: column; gap: 1.4rem;
  position: relative; overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; right: -14%; top: -28%;
  width: 30rem; height: 30rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(196,48,110,.5), transparent 62%);
  pointer-events: none;
}
.hero > * { position: relative; }
.hero .mono { color: #F16CA4; }
h1 {
  font-size: clamp(2.05rem, 7.2vw, 3.8rem);
  line-height: 1.02; font-weight: 800; letter-spacing: -.02em;
  margin: 0; text-wrap: balance;
}
h1 em { font-style: normal; color: #EBB65C; }
.dek { color: #A9BBD2; max-width: 33rem; margin: 0; font-size: 1.06rem; }

/* top row of the hero: back link on the left, language on the right */
.toprow { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.back, .langbar span, .langbar a {
  font-family: ui-monospace, Consolas, "DejaVu Sans Mono", monospace;
  font-size: .72rem; letter-spacing: .12em;
  padding: .3rem .62rem; line-height: 1;
  border: 1px solid rgba(237,241,246,.28);
}
.back { color: #A9BBD2; text-decoration: none; }
.back:hover, .back:focus-visible { color: #0A1428; background: #EBB65C; border-color: #EBB65C; }
.langbar { display: flex; gap: .4rem; }
.langbar span { background: #EDF1F6; color: #0A1428; border-color: #EDF1F6; }
.langbar a { color: #A9BBD2; text-decoration: none; }
.langbar a:hover, .langbar a:focus-visible { color: #0A1428; background: #EBB65C; border-color: #EBB65C; }

/* ---------------- section heads ---------------- */
.band { display: flex; flex-direction: column; gap: .7rem; }
.band .mono { color: var(--orchid); }
h2 {
  font-size: clamp(1.6rem, 5vw, 2.15rem);
  font-weight: 800; letter-spacing: -.015em; line-height: 1.1;
  margin: 0; text-wrap: balance;
}
.band p { margin: 0; color: var(--muted); max-width: 36rem; }
.band p a, .road p a { color: var(--orchid); font-weight: 700; }

/* ---------------- the road (timeline) ---------------- */
.road { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.road li { border-left: 2px solid var(--line); padding: 0 0 2.1rem 1.6rem; position: relative; }
.road li:last-child { padding-bottom: 0; border-left-color: transparent; }
.road li::before {
  content: ""; position: absolute; left: -.47rem; top: .45rem;
  width: .8rem; height: .8rem; border-radius: 50%; background: var(--orchid);
}
.road li.is-now::before { background: var(--gold); box-shadow: 0 0 0 .3rem rgba(169,118,15,.22); }
.road .when { display: block; color: var(--orchid); margin-bottom: .25rem; }
.road li.is-now .when { color: var(--gold); }
.road h3 {
  font-family: Sylfaen, "Noto Serif Georgian", Georgia, serif;
  font-size: clamp(1.25rem, 4vw, 1.6rem);
  font-weight: 700; line-height: 1.15; margin: 0 0 .3rem; letter-spacing: -.01em;
}
.road p { margin: 0; color: var(--muted); max-width: 34rem; }

/* ---------------- numbers ---------------- */
.figures {
  background: var(--panel); border: 1px solid var(--line); border-top: 5px solid var(--orchid);
  padding: 1.9rem 1.7rem; display: flex; flex-direction: column; gap: 1.3rem;
}
.figures > .mono { color: var(--orchid); }
.figures ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 1.3rem; }
.figures li { display: flex; flex-direction: column; gap: .1rem; }
.figures b {
  font-family: Sylfaen, Georgia, serif;
  font-size: clamp(1.5rem, 5vw, 2.1rem);
  line-height: 1; color: var(--orchid); font-variant-numeric: tabular-nums;
}
.figures span { font-size: .84rem; color: var(--muted); line-height: 1.35; }
.figures .asof { margin: 0; color: var(--muted); font-size: .85rem; border-top: 1px dashed var(--line); padding-top: 1rem; }

/* ---------------- crew ---------------- */
.crew { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.4rem; }
.member { background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; overflow: hidden; }
.shot { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.member-txt { padding: 1.3rem 1.25rem 1.5rem; display: flex; flex-direction: column; gap: .45rem; }
.member .role { color: var(--orchid); }
.name { font-family: Sylfaen, "Noto Serif Georgian", Georgia, serif; font-size: 1.32rem; font-weight: 700; line-height: 1.1; margin: 0; }
.member p { margin: 0; color: var(--muted); font-size: .95rem; }
/* the three spans of experience, as a compact row of counters */
.spans { list-style: none; margin: .25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .9rem; }
.spans li { display: flex; flex-direction: column; line-height: 1.15; }
.spans b { font-family: Sylfaen, Georgia, serif; font-size: 1.28rem; color: var(--orchid); font-variant-numeric: tabular-nums; }
.spans span { font-size: .78rem; color: var(--muted); }

/* ---------------- company ---------------- */
.entity { background: var(--panel); border: 1px solid var(--line); padding: 1.7rem; }
.entity > .mono { color: var(--orchid); display: block; margin-bottom: 1.1rem; }
.entity dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .55rem 1.3rem; }
.entity dt { color: var(--muted); font-size: .88rem; }
.entity dd { margin: 0; font-weight: 600; }
.entity dd a { color: var(--orchid); }

/* ---------------- lead story ---------------- */
.lead {
  background: var(--panel); border: 1px solid var(--line); border-top: 5px solid var(--gold);
  padding: 1.9rem 1.7rem; display: flex; flex-direction: column; gap: .6rem;
}
.lead .mono { color: var(--gold); }
.lead h2 {
  font-family: Sylfaen, "Noto Serif Georgian", Georgia, serif;
  font-size: clamp(1.5rem, 5vw, 2.1rem);
  font-weight: 700; line-height: 1.12; margin: 0; letter-spacing: -.01em;
}
.lead p { margin: 0; color: var(--muted); max-width: 36rem; }
.lead .more {
  align-self: flex-start; margin-top: .5rem;
  background: var(--orchid); color: #fff; text-decoration: none;
  font-weight: 800; font-size: .95rem; padding: .7rem 1.5rem;
}
.lead .more:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* ---------------- feed ---------------- */
.month { display: flex; flex-direction: column; gap: 1.1rem; }
.month > .mono { color: var(--orchid); border-bottom: 1px solid var(--line); padding-bottom: .6rem; }
.feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.item { background: var(--panel); border: 1px solid var(--line); padding: 1.25rem 1.35rem; display: flex; flex-direction: column; gap: .35rem; }
.item h3 { font-size: 1.13rem; font-weight: 800; line-height: 1.25; margin: 0; letter-spacing: -.01em; text-wrap: balance; }
.item p { margin: 0; color: var(--muted); font-size: .97rem; }
.item .go-in {
  align-self: flex-start; margin-top: .25rem; color: var(--orchid); font-weight: 700;
  text-decoration: none; font-size: .93rem; border-bottom: 1px solid currentColor;
}

/* ---------------- doors ---------------- */
.doors { display: flex; flex-direction: column; gap: 1.1rem; }
.doors > .mono { color: var(--orchid); border-bottom: 1px solid var(--line); padding-bottom: .6rem; }
.doors ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .8rem; }
.doors a { display: flex; flex-direction: column; gap: .15rem; background: var(--panel); border: 1px solid var(--line); padding: 1rem 1.1rem; text-decoration: none; color: inherit; }
.doors a:hover, .doors a:focus-visible { border-color: var(--orchid); }
.doors b { font-size: 1rem; }
.doors span { color: var(--muted); font-size: .87rem; line-height: 1.35; }

/* ---------------- quote ---------------- */
.quote { background: var(--night); color: #EDF1F6; margin: 0 -1.15rem; padding: 3.5rem 1.7rem; text-align: center; }
.quote blockquote {
  font-family: Sylfaen, "Noto Serif Georgian", Georgia, serif;
  font-size: clamp(1.5rem, 5.2vw, 2.3rem);
  line-height: 1.25; font-weight: 700; margin: 0 auto; max-width: 26rem; text-wrap: balance;
}
.quote blockquote em { font-style: normal; color: #F16CA4; }

/* ---------------- cta ---------------- */
.cta { text-align: center; display: flex; flex-direction: column; gap: 1.1rem; align-items: center; }
.cta h2 { max-width: 26rem; }
.go { display: inline-block; background: var(--orchid); color: #fff; text-decoration: none; font-weight: 800; font-size: 1.1rem; padding: .95rem 2.2rem; }
.go:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.sign { color: var(--muted); font-size: .9rem; margin: 0; }

@media (max-width: 32rem) {
  .figures, .entity, .lead { padding: 1.5rem 1.2rem; }
  .item { padding: 1.1rem 1.15rem; }
  .entity dl { grid-template-columns: 1fr; gap: .15rem; }
  .entity dd { margin-bottom: .7rem; }
}

/* the latin mirror does not want Georgian serif fallbacks for its display type */
html[lang="en"] .name,
html[lang="en"] .road h3,
html[lang="en"] .lead h2,
html[lang="en"] .quote blockquote { font-family: Georgia, "Times New Roman", serif; }