/* =========================================================================
   Video Call With Strangers App — design system
   Palette: Slate Dusk · Direction: organic blobs · Edges: pill & feather
   Every colour is a variable so the illustration and chrome live in both themes.
   ========================================================================= */

:root {
  --kst-bg: #F3F5F9;
  --kst-surface: #FCFDFE;
  --kst-text: #1D2433;
  --kst-muted: #545E73;
  --kst-accent: #4A5D8A;
  --kst-accent2: #A5B3D4;
  --kst-tint: #E9EEF7;
  --kst-line: rgba(29, 36, 51, .12);

  /* Split from --kst-accent on purpose: the accent doubles as a button
     background, and in dark mode it is far too dim to serve as link ink. */
  --kst-link: #3C4E77;
  --kst-on-accent: #FFFFFF;
  --kst-gate-label: #33436B;   /* small text over the gate gradient */
  --kst-gate-grad: linear-gradient(150deg, #EDF1F8, #DEE5F2 50%, #CDD8EB);

  --kst-col: 44rem;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  --kst-r-card: 20px;
  --kst-r-pill: 999px;
  --kst-shadow: 0 2px 12px rgba(16, 22, 38, .05);
  --kst-shadow-up: 0 6px 22px rgba(16, 22, 38, .09);

  --kst-blob-a: 42% 58% 52% 48% / 48% 42% 58% 52%;
  --kst-blob-b: 58% 42% 38% 62% / 55% 48% 52% 45%;

  --kst-head: 'Oswald', 'Arial Narrow', system-ui, sans-serif;
  --kst-body: 'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

[data-theme="dark"] {
  --kst-bg: #13161E;
  --kst-surface: #1A1F2A;
  --kst-text: #E6EAF2;
  --kst-muted: #A3AEC6;
  --kst-accent: #56699A;
  --kst-accent2: #8B9CC4;
  --kst-tint: #1E2531;
  --kst-line: rgba(230, 234, 242, .14);

  --kst-link: #A9B8DC;
  --kst-on-accent: #FFFFFF;
  --kst-gate-label: #BFCCE8;
  --kst-gate-grad: linear-gradient(150deg, #1A1F2C, #202839 50%, #273146);
}

/* -------------------------------------------------------------------------
   Base
   ------------------------------------------------------------------------- */

body {
  background: var(--kst-bg);
  color: var(--kst-text);
  font-family: var(--kst-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  position: relative;
  overflow-x: hidden;
}

/* F-14 — a little grain so the flat fills stop looking like plastic. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.kst-header, .kst-sheet, .kst-scrim, .kst-cookie, main, .kst-footer { position: relative; z-index: 1; }

h1, h2, h3 {
  font-family: var(--kst-head);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: .01em;
}

.kst-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--kst-accent);
  color: var(--kst-on-accent);
  padding: var(--space-3) var(--space-4);
  border-radius: 0 0 var(--kst-r-card) 0;
  z-index: 60;
}
.kst-skip:focus { left: 0; }

:where(a, button):focus-visible {
  outline: 2px solid var(--kst-link);
  outline-offset: 3px;
  border-radius: var(--space-1);
}

/* -------------------------------------------------------------------------
   Header — sticky blur, one clean row at every width
   ------------------------------------------------------------------------- */

.kst-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--kst-bg) 74%, transparent);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid var(--kst-line);
}

@supports not (backdrop-filter: blur(2px)) {
  .kst-header { background: var(--kst-bg); }
}

.kst-header__in {
  max-width: 1140px;
  margin-inline: auto;
  padding: var(--space-3) clamp(16px, 4vw, 32px);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 60px;
}

.kst-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  min-width: 0;            /* lets the wordmark truncate instead of shoving */
  flex: 1 1 auto;
}

.kst-brand__mark {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
}
.kst-brand__mark svg { width: 30px; height: 30px; }
.kst-brand__body { fill: var(--kst-accent2); }
.kst-brand__lens { fill: var(--kst-accent); }
.kst-brand__signal { fill: var(--kst-accent); }

.kst-brand__name {
  font-family: var(--kst-head);
  font-weight: 600;
  font-size: clamp(14px, 2.6vw, 18px);
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.kst-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
}

/* Icon-only buttons: fixed box, grid-centred. Never let the svg shrink. */
.kst-icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: var(--kst-r-pill);
  color: var(--kst-text);
  transition: background-color .18s ease;
}
.kst-icon:hover { background: var(--kst-tint); }
.kst-icon svg { width: 22px; height: 22px; }

.kst-toggle__moon { display: none; }
[data-theme="dark"] .kst-toggle__sun { display: none; }
[data-theme="dark"] .kst-toggle__moon { display: block; }

.kst-burger__t, .kst-burger__m, .kst-burger__b { transition: transform .22s ease, opacity .18s ease; transform-origin: center; }
.kst-sheet-open .kst-burger__t { transform: translateY(4.5px) rotate(45deg); }
.kst-sheet-open .kst-burger__m { opacity: 0; }
.kst-sheet-open .kst-burger__b { transform: translateY(-4.5px) rotate(-45deg); }

/* --- language dropdown (desktop) --- */
.kst-lang { position: relative; }

.kst-lang__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-4);
  border-radius: var(--kst-r-pill);
  font-size: 15px;
  font-weight: 500;
  color: var(--kst-text);
  transition: background-color .18s ease;
}
.kst-lang__btn:hover { background: var(--kst-tint); }
.kst-lang__chev { width: 16px; height: 16px; transition: transform .2s ease; }
.kst-lang--desk.is-open .kst-lang__chev { transform: rotate(180deg); }

.kst-lang__pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 190px;
  background: var(--kst-surface);
  border: 1px solid var(--kst-line);
  border-radius: var(--kst-r-card);
  box-shadow: var(--kst-shadow-up);
  padding: var(--space-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.kst-lang--desk.is-open .kst-lang__pop { opacity: 1; visibility: visible; transform: none; }

.kst-lang__list { list-style: none; }
.kst-lang__list li a,
.kst-lang__list li > span {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: 0 var(--space-3);
  border-radius: var(--space-3);
  font-size: 15px;
  text-decoration: none;
  color: var(--kst-text);
}
.kst-lang__list li a:hover { background: var(--kst-tint); }
.kst-lang__list img { width: 18px; height: auto; border-radius: 2px; }
.trp-language-switcher-container { font-size: 15px; }

/* Scoped to the DESKTOP dropdown only — an unscoped .kst-lang rule here would
   also hide the copy of the list that lives inside the mobile sheet. */
@media (max-width: 860px) {
  .kst-lang--desk { display: none; }
}
@media (min-width: 861px) {
  .kst-burger { display: none; }
}

/* -------------------------------------------------------------------------
   Sheet + scrim
   ------------------------------------------------------------------------- */

.kst-scrim {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(12, 16, 26, .5);
  opacity: 0;
  transition: opacity .22s ease;
}
.kst-sheet-open .kst-scrim { opacity: 1; }

.kst-sheet {
  position: fixed;
  z-index: 51;              /* above the scrim, so links inside are tappable */
  right: 0;
  bottom: 0;
  left: 0;
  max-height: 82vh;
  overflow-y: auto;
  padding: var(--space-5) clamp(16px, 5vw, 28px) calc(var(--space-6) + env(safe-area-inset-bottom));
  background: var(--kst-surface);
  border-radius: 26px 26px 0 0;
  box-shadow: 0 -10px 40px rgba(12, 16, 26, .22);
  transform: translateY(100%);
  transition: transform .24s ease;
}
.kst-sheet-open .kst-sheet { transform: none; }

.kst-sheet__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: var(--space-4);
}
.kst-sheet__title {
  font-family: var(--kst-head);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--kst-muted);
}
.kst-sheet__links {
  list-style: none;
  margin-block-start: var(--space-4);
  padding-block-start: var(--space-4);
  border-top: 1px solid var(--kst-line);
}
.kst-sheet__links li a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  color: var(--kst-muted);
  text-decoration: none;
}
.kst-sheet__links li a:hover { color: var(--kst-link); }

/* -------------------------------------------------------------------------
   Reading column
   Zero-specificity rule so component styles always win; the gate is the one
   block allowed to be wider. Classed children get an explicit re-centre below,
   because WordPress block CSS and list resets outrank a :where() rule.
   ------------------------------------------------------------------------- */

.kst-entry {
  padding: var(--space-7) clamp(16px, 4vw, 32px) var(--space-8);
}

.kst-entry > :where(*:not(.kst-gate)) {
  max-width: var(--kst-col);
  margin-inline: auto;
}

.kst-entry > .kst-chips,
.kst-entry > .kst-illus,
.kst-entry > .kst-vs,
.kst-entry > .kst-pull,
.kst-entry > .wp-block-list,
.kst-entry > h1,
.kst-entry > h2 {
  max-width: var(--kst-col);
  margin-inline: auto;
}

.kst-entry > * + * { margin-block-start: var(--space-5); }
.kst-entry > * + h2 { margin-block-start: var(--space-7); }

.kst-h1 {
  font-size: clamp(30px, 5.2vw, 46px);
  font-weight: 600;
  letter-spacing: .005em;
  margin-block: 0 var(--space-5);
  scroll-margin-top: 92px;
}

.kst-entry h2 {
  font-size: clamp(23px, 3.2vw, 30px);
  font-weight: 500;
  margin-block: 0 var(--space-2);
  scroll-margin-top: 92px;
}

.kst-entry p { max-inline-size: var(--kst-col); }

/* Links inside the article — buttons and chips are excluded, or the accent ink
   would paint straight over an accent background. */
.kst-entry a:not([class]) {
  color: var(--kst-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.kst-entry a:not([class]):hover { text-decoration-thickness: 2px; }

/* Gutenberg lists carry a class, so ul:not([class]) never reaches them.
   Note: no blanket margin reset here — that is what knocks classed blocks out
   of the centred column. */
.kst-entry .wp-block-list {
  padding-inline-start: var(--space-5);
}
.kst-entry .wp-block-list li + li { margin-block-start: var(--space-2); }

/* -------------------------------------------------------------------------
   Age gate — quiet sonar
   ------------------------------------------------------------------------- */

.kst-gate {
  max-width: 62rem;
  margin-inline: auto;
  margin-block-end: var(--space-7);
}

.kst-gate__card {
  position: relative;
  overflow: hidden;               /* clips the outer sonar rings */
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-5);
  padding: clamp(24px, 4vw, 44px);
  border-radius: 28px;
  background: var(--kst-gate-grad);
  border: 1px solid var(--kst-line);
  box-shadow: var(--kst-shadow);
}

.kst-gate__over {
  font-family: var(--kst-head);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--kst-gate-label);
  margin-block-end: var(--space-3);
}

.kst-gate__q {
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 600;
  color: var(--kst-text);
  margin-block: 0 var(--space-3);
}

.kst-gate__note {
  color: var(--kst-gate-label);
  font-size: 15px;
  margin-block-end: var(--space-5);
  max-inline-size: 34ch;
}

.kst-gate__go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 var(--space-6);
  border-radius: var(--kst-r-pill);
  background: var(--kst-accent);
  color: var(--kst-on-accent);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  box-shadow: var(--kst-shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.kst-gate__go:hover { transform: translateY(-2px); box-shadow: var(--kst-shadow-up); }

.kst-gate__alt {
  display: inline-block;
  margin-block-start: var(--space-4);
  font-size: 14px;
  color: var(--kst-gate-label);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.kst-gate__alt::after { content: " \2193"; }

.kst-gate__sonar {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 190px;
  justify-self: center;
}

.kst-gate__ring {
  position: absolute;
  width: 96px;
  height: 96px;
  border-radius: var(--kst-blob-a);
  border: 1.5px solid var(--kst-accent);
  opacity: 0;
  animation: kst-sonar 8s ease-out infinite;
}
.kst-gate__ring:nth-child(2) { animation-delay: 2.6s; }
.kst-gate__ring:nth-child(3) { animation-delay: 5.2s; }

@keyframes kst-sonar {
  0%   { transform: scale(1);   opacity: .35; }
  100% { transform: scale(2.2); opacity: 0; }
}

.kst-gate__badge {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border-radius: var(--kst-blob-b);
  background: var(--kst-surface);
  border: 1px solid var(--kst-line);
  font-family: var(--kst-head);
  font-weight: 600;
  font-size: 26px;
  color: var(--kst-gate-label);
  box-shadow: var(--kst-shadow);
}

@media (prefers-reduced-motion: reduce) {
  .kst-gate__ring { animation: none; opacity: .2; }
  .kst-gate__ring:nth-child(2) { transform: scale(1.6); opacity: .1; }
  .kst-gate__ring:nth-child(3) { display: none; }
}

@media (max-width: 720px) {
  .kst-gate__card { grid-template-columns: 1fr; text-align: left; }
  .kst-gate__sonar { justify-self: center; min-height: 150px; order: -1; }
  .kst-gate__note { max-inline-size: none; }
}

/* -------------------------------------------------------------------------
   Article blocks
   ------------------------------------------------------------------------- */

.kst-illus {
  border-radius: var(--kst-r-card);
  overflow: hidden;
  background: var(--kst-tint);
}
.kst-illus svg { width: 100%; height: auto; }

.kst-illus__blob  { fill: var(--kst-accent2); opacity: .3; }
.kst-illus__blob2 { fill: var(--kst-accent); opacity: .16; }
.kst-illus__fig   { fill: var(--kst-accent); }
.kst-illus__skin  { fill: none; stroke: var(--kst-text); stroke-width: 3; }
.kst-illus__hair  { fill: var(--kst-text); }
.kst-illus__arm   { fill: var(--kst-accent); }
.kst-illus__phone rect { fill: var(--kst-surface); stroke: var(--kst-text); stroke-width: 2.5; }
.kst-illus__glow  { fill: var(--kst-accent2); opacity: .5; }
.kst-illus__dot   { fill: var(--kst-accent); }

/* chips — pills that wrap INSIDE the reading column, never a full-width row */
.kst-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0;
}
.kst-chips li {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--kst-r-pill);
  background: var(--kst-tint);
  border: 1px solid var(--kst-line);
  font-size: 14.5px;
  color: var(--kst-text);
}

.kst-pull {
  position: relative;
  padding: var(--space-5) var(--space-5) var(--space-5) var(--space-7);
  border: 0;
  border-radius: var(--kst-blob-a);
  background: var(--kst-tint);
  transition: border-radius .5s ease;
}
.kst-pull:hover { border-radius: var(--kst-blob-b); }
.kst-pull::before {
  content: "\201C";
  position: absolute;
  left: var(--space-4);
  top: var(--space-2);
  font-family: var(--kst-head);
  font-size: 52px;
  line-height: 1;
  color: var(--kst-accent2);
}
.kst-pull p {
  font-family: var(--kst-head);
  font-weight: 500;
  font-size: clamp(18px, 2.4vw, 21px);
  line-height: 1.42;
  letter-spacing: .01em;
}

.kst-vs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.kst-vs__card {
  padding: var(--space-5);
  border-radius: var(--kst-r-card);
  background: var(--kst-tint);
  border: 1px solid var(--kst-line);
  box-shadow: var(--kst-shadow);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .2s ease;
}
.kst-vs__card--b { border-radius: var(--kst-r-card) var(--kst-r-card) 34px var(--kst-r-card); }
.kst-vs__tag {
  font-family: var(--kst-head);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--kst-link);
  margin-block-end: var(--space-2);
}
.kst-vs__card p:not(.kst-vs__tag) { font-size: 15.5px; line-height: 1.62; }

@media (max-width: 620px) {
  .kst-vs { grid-template-columns: 1fr; }
}

.kst-btn {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--space-5);
  border-radius: var(--kst-r-pill);
  background: var(--kst-accent);
  color: var(--kst-on-accent);
  font-weight: 700;
  text-decoration: none;
}

/* -------------------------------------------------------------------------
   404
   ------------------------------------------------------------------------- */

.kst-404 {
  max-width: var(--kst-col);
  margin-inline: auto;
  padding: var(--space-8) clamp(16px, 4vw, 32px);
  text-align: center;
}
.kst-404__num {
  font-family: var(--kst-head);
  font-weight: 600;
  font-size: clamp(84px, 20vw, 168px);
  line-height: 1;
  color: var(--kst-accent2);
  opacity: .5;
}
.kst-404__title { font-size: clamp(24px, 4vw, 34px); margin-block: var(--space-4) var(--space-3); }
.kst-404__note { color: var(--kst-muted); margin-block-end: var(--space-5); }

/* -------------------------------------------------------------------------
   Footer — tinted, never inverted
   ------------------------------------------------------------------------- */

.kst-footer {
  margin-block-start: var(--space-8);
  border-top: 1px solid var(--kst-line);
  background: var(--kst-tint);
}
.kst-footer__in {
  max-width: 1140px;
  margin-inline: auto;
  padding: var(--space-6) clamp(16px, 4vw, 32px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.kst-footer__copy { font-size: 14.5px; color: var(--kst-muted); }
.kst-footer__menu {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}
.kst-footer__menu li a {
  font-size: 14.5px;
  color: var(--kst-muted);
  text-decoration: none;
}
.kst-footer__menu li a:hover { color: var(--kst-link); text-decoration: underline; }

/* -------------------------------------------------------------------------
   Cookie notice — floating corner card
   ------------------------------------------------------------------------- */

.kst-cookie {
  position: fixed;
  z-index: 45;
  left: clamp(12px, 4vw, 24px);
  bottom: clamp(12px, 4vw, 24px);
  width: min(400px, calc(100vw - 24px));
  padding: var(--space-5);
  border-radius: var(--kst-r-card);
  background: var(--kst-surface);
  border: 1px solid var(--kst-line);
  box-shadow: var(--kst-shadow-up);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .26s ease, transform .26s ease;
}
.kst-cookie.is-up { opacity: 1; transform: none; }
.kst-cookie__text { font-size: 14px; line-height: 1.6; color: var(--kst-muted); }
.kst-cookie__text a { color: var(--kst-link); }
.kst-cookie__ok {
  margin-block-start: var(--space-4);
  min-height: 44px;
  padding: 0 var(--space-5);
  border-radius: var(--kst-r-pill);
  background: var(--kst-accent);
  color: var(--kst-on-accent);
  font-weight: 700;
  font-size: 15px;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}