/* gurovkandev.bg – everything below the hero. Tokens live in critical.css. */

/* ---------------------------------------------------------------- fonts */
/* Self-hosted Google Fonts subsets (Latin + Cyrillic only), woff2, swap. URLs are relative to this file. */

/* Desktop redesign uses one variable family for both display and body text.
   It carries weight 700 too, but the static face above is kept while the phone
   layout still runs on the previous system (Manrope body + Unbounded display).
   Both collapse into this one family once the mobile frames arrive. */
@font-face {
  font-family: "Unbounded Variable";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/unbounded-var-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Unbounded Variable";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/unbounded-var-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

/* The wordmark is a staircase in the frame, in the footer as well as the hero: line
   one sits flush and lines two and three step in together. The footer lockup is 258
   wide with a 30.6 step (node 4:522), which is 0.595em at the size we set it. */
.gk-footer__brand-line {
  display: block;
}

.gk-footer__brand-line--step {
  margin-left: 0.683em;
}

/* ---------------------------------------------------------------- sections */

.gk-section {
  padding-block: var(--gk-section-y);
  /* Anchor links land on the gold bar of the title, not on the section's top padding:
     the padding slides under the sticky header and the title sits 1rem below it. */
  scroll-margin-top: calc(var(--gk-header-h) + 1rem - var(--gk-section-y));
}

#hero {
  scroll-margin-top: var(--gk-header-h);
}

.gk-section--tint {
  background: var(--gk-paper-tint);
}

.gk-section--ink {
  background: var(--gk-ink);
  color: var(--gk-paper);
}

.gk-section__head {
  max-width: 40rem;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.gk-section__title {
  margin: 0 0 0.75rem;
  font-family: var(--gk-font-display);
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.5rem);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.gk-section__title::before {
  content: "";
  display: block;
  width: 3rem;
  height: 0.375rem;
  margin-bottom: 1rem;
  background: var(--gk-gold);
}

.gk-section__intro {
  margin: 0;
  font-size: 1.1em;
  color: var(--gk-muted);
}

.gk-section--ink .gk-section__intro {
  color: rgb(255 255 255 / 0.8);
}

/* ---------------------------------------------------------------- ЗАЩО cards */

.gk-cards {
  display: grid;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 40rem) {
  .gk-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* One row of four on laptops and up, so the whole ЗАЩО block fits a 768px-tall viewport. */
@media (min-width: 64rem) {
  .gk-cards {
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
  }

  .gk-card {
    padding: 1.5rem 1.25rem;
  }

  #zashto .gk-section__head {
    margin-bottom: 2rem;
  }
}

.gk-card {
  padding: 1.75rem;
  background: var(--gk-paper);
  border: 1px solid var(--gk-line);
  border-radius: var(--gk-radius);
}

.gk-card__icon {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1.25rem;
  border-radius: 50%;
  background: var(--gk-gold);
  color: var(--gk-ink);
}

.gk-card__title {
  margin: 0 0 0.5rem;
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.25;
  text-wrap: balance;
}

.gk-card__text {
  margin: 0;
  color: var(--gk-muted);
}

/* ---------------------------------------------------------------- person (Гюров / Кандев) */

.gk-person {
  display: grid;
  gap: 2rem;
}

@media (min-width: 52rem) {
  .gk-person {
    grid-template-columns: 2fr 3fr;
    gap: clamp(2rem, 6vw, 5rem);
    align-items: start;
  }

  /* Mirrored layout keeps the same portrait width: the media still takes the 2fr column. */
  .gk-person--flip {
    grid-template-columns: 3fr 2fr;
  }

  .gk-person--flip .gk-person__media {
    order: 2;
  }
}

.gk-person__media {
  position: relative;
}

/* One-column layout (phones, portrait tablets): a full-width 4:5 portrait would fill a whole screen. */
@media (max-width: 51.99rem) {
  .gk-person__media {
    max-width: 22rem;
  }
}

.gk-person__img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--gk-radius);
  background: var(--gk-paper-tint);
}

.gk-person__media::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.75rem;
  width: 40%;
  height: 0.5rem;
  background: var(--gk-gold);
}

.gk-person__intro {
  font-size: 1.15em;
  margin: 0 0 2rem;
}

.gk-timeline {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 2px solid var(--gk-line);
}

.gk-timeline__item {
  position: relative;
  padding: 0 0 1.75rem 1.5rem;
}

.gk-timeline__item::before {
  content: "";
  position: absolute;
  left: -0.5rem;
  top: 0.4rem;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  background: var(--gk-gold);
  border: 2px solid var(--gk-paper);
}

.gk-section--tint .gk-timeline__item::before {
  border-color: var(--gk-paper-tint);
}

.gk-timeline__period {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gk-muted);
}

.gk-timeline__title {
  margin: 0.15rem 0 0.25rem;
  font-size: 1.1rem;
  font-weight: 800;
}

.gk-timeline__text {
  margin: 0;
}

.gk-person__more {
  display: inline-block;
  margin-top: 1rem;
  font-weight: 700;
  text-decoration-color: var(--gk-gold);
  text-underline-offset: 0.2em;
}

/* ---------------------------------------------------------------- committee */

.gk-members {
  display: grid;
  gap: 1.5rem 1.25rem;
  grid-template-columns: repeat(2, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 40rem) {
  .gk-members {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 64rem) {
  .gk-members {
    grid-template-columns: repeat(4, 1fr);
  }
}

.gk-member__photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--gk-radius);
  background: var(--gk-paper-tint);
  /* Mixed source photos read as one set in monochrome. */
  filter: grayscale(1) contrast(1.05);
}

.gk-member__name {
  margin: 0.75rem 0 0;
  font-size: 1rem;
  font-weight: 800;
}

.gk-member__role {
  margin: 0;
  font-size: 0.9rem;
  color: var(--gk-muted);
}

.gk-member__quote {
  margin: 0.5rem 0 0;
  padding-left: 0.75rem;
  border-left: 3px solid var(--gk-gold);
  font-size: 0.95rem;
  font-style: italic;
}

/* ---------------------------------------------------------------- И ТИ form */

.gk-form {
  display: grid;
  gap: 1.25rem;
  max-width: 40rem;
}

.gk-field {
  display: grid;
  gap: 0.35rem;
}

.gk-field__label {
  font-weight: 700;
}

.gk-field__input {
  width: 100%;
  min-height: 3rem;
  padding: 0.65rem 0.9rem;
  border: 2px solid rgb(255 255 255 / 0.35);
  border-radius: var(--gk-radius);
  background: rgb(255 255 255 / 0.06);
  color: inherit;
  font: inherit;
}

.gk-field__input:focus-visible {
  border-color: var(--gk-gold);
  outline: none;
}

.gk-field__input[aria-invalid="true"] {
  border-color: #ff8a80;
}

.gk-field__error {
  margin: 0;
  font-size: 0.9rem;
  color: #ffb4ab;
}

.gk-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.gk-fieldset__legend {
  padding: 0;
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.gk-choice {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.35rem 0;
  cursor: pointer;
}

.gk-choice input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.15rem 0 0;
  accent-color: var(--gk-gold);
  flex: none;
}

.gk-form__note {
  margin: 0;
  padding: 0.85rem 1rem;
  border-left: 4px solid var(--gk-gold);
  background: rgb(255 255 255 / 0.08);
}

.gk-form__global-error {
  margin: 0;
  padding: 0.85rem 1rem;
  border-radius: var(--gk-radius);
  background: rgb(179 38 30 / 0.35);
}

.gk-form__success {
  max-width: 40rem;
  padding: 1.5rem;
  border-left: 6px solid var(--gk-gold);
  background: rgb(255 255 255 / 0.08);
  font-size: 1.15em;
}

/* Honeypot: off-screen, never hidden with display:none so bots still fill it. */
.gk-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.gk-form .gk-btn--primary {
  justify-self: start;
  min-width: 12rem;
}

.gk-form .gk-btn--primary[disabled] {
  opacity: 0.7;
  cursor: wait;
}

/* ---------------------------------------------------------------- footer */

.gk-footer {
  padding-block: 3rem;
  background: var(--gk-paper-tint);
  border-top: 1px solid var(--gk-line);
  font-size: 0.9rem;
  color: var(--gk-muted);
}

.gk-footer__inner {
  display: grid;
  gap: 2rem;
}

@media (min-width: 52rem) {
  .gk-footer__inner {
    grid-template-columns: 1fr 1fr 2fr;
  }
}

.gk-footer__brand {
  margin: 0 0 0.75rem;
  font-family: var(--gk-font-display);
  text-transform: uppercase;
  color: var(--gk-ink);
}

/* The frame runs the lines of one legal block consecutively - address, then the email
   on the next line, no gap - and separates one block from the next by a blank line.
   Its own markup does that with an empty paragraph (node 4:515); here it is a margin
   of one line at the body leading. */
.gk-footer__line,
.gk-footer__legal-block p {
  margin: 0;
}

.gk-footer__legal-block + .gk-footer__legal-block,
.gk-footer__line + .gk-footer__legal-block,
.gk-footer__legal-block + .gk-footer__line,
.gk-footer__legal-block p + p,
.gk-footer__col--links .gk-footer__line + .gk-footer__line {
  margin-top: 1.1875rem;
}

.gk-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gk-social__link {
  font-weight: 700;
  color: var(--gk-ink);
}

/* ---------------------------------------------------------------- cookie banner */

.gk-cookie {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  padding: 1rem var(--gk-gutter);
  background: var(--gk-paper);
  color: var(--gk-ink);
  border-top: 4px solid var(--gk-gold);
  box-shadow: 0 -8px 24px rgb(20 33 61 / 0.12);
}

.gk-cookie[hidden] {
  display: none;
}

.gk-cookie__inner {
  display: grid;
  gap: 1rem;
  align-items: center;
}

@media (min-width: 52rem) {
  .gk-cookie__inner {
    grid-template-columns: 1fr auto;
  }
}

.gk-cookie__text {
  margin: 0;
  font-size: 0.95rem;
}

.gk-cookie__actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.gk-btn--ghost {
  background: none;
  border-color: var(--gk-ink);
  color: var(--gk-ink);
}

/* ---------------------------------------------------------------- misc */

.gk-page {
  padding-block: var(--gk-section-y);
  max-width: 44rem;
}

.gk-page h1 {
  font-family: var(--gk-font-display);
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.25rem);
  line-height: 1.15;
}

.gk-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- reveal on scroll */
/* Hidden start state applies only with JavaScript and only for people who accept motion. */
@media (prefers-reduced-motion: no-preference) {
  .gk-js [data-gk-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity 0.6s ease,
      transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: var(--gk-delay, 0ms);
  }

  .gk-js [data-gk-reveal].is-visible {
    opacity: 1;
    transform: none;
  }
}

/* ---------------------------------------------------------------- И ТИ redesign */

.gk-join {
  position: relative;
  overflow: hidden;
}

.gk-join__inner {
  position: relative;
  max-width: 46rem;
}

.gk-join__head {
  margin-bottom: 1.75rem;
}

.gk-join__panel {
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: 1.25rem;
  background: var(--gk-paper);
  color: var(--gk-ink);
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.25);
}

.gk-join .gk-form {
  max-width: none;
  gap: 1.5rem;
}

/* Step badges and the second step, which slides in once a role is chosen. */
.gk-step {
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.35rem;
  border-radius: 50%;
  background: var(--gk-ink);
  color: var(--gk-gold);
  font-size: 0.8rem;
  font-weight: 800;
  vertical-align: middle;
}

.gk-form__step--2 {
  display: grid;
  gap: 1.5rem;
}

.gk-form__step-title {
  margin: 0;
}

/* With JavaScript the two steps take turns in the same place, so the panel never grows. */
.gk-js .gk-form.is-step-1 .gk-form__step--2,
.gk-js .gk-form.is-step-2 .gk-form__step--1 {
  display: none;
}

.gk-js .gk-form__next {
  justify-self: end;
  margin-top: 0.25rem;
}

/* Both step actions sit bottom-right so the panel reads the same on either step. */
.gk-js .gk-form__step--2 > .gk-btn--submit {
  justify-self: end;
}

.gk-form__next[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.gk-form__step-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.gk-form__chosen {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.4rem 0.3rem 0.85rem;
  border-radius: 999px;
  background: rgb(242 183 5 / 0.15);
  font-size: 0.9rem;
  font-weight: 700;
}

.gk-form__back {
  padding: 0.25rem 0.7rem;
  border: 0;
  border-radius: 999px;
  background: var(--gk-ink);
  color: var(--gk-gold);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.gk-form__back:hover,
.gk-form__back:focus-visible {
  background: var(--gk-ink-soft);
}

@media (prefers-reduced-motion: no-preference) {
  .gk-js .gk-form.is-step-2 .gk-form__step--2,
  .gk-js .gk-form.is-step-1.is-returning .gk-form__step--1 {
    animation: gk-step-in 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
}

@keyframes gk-step-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.gk-join .gk-fieldset__legend,
.gk-join .gk-field__label {
  font-weight: 800;
}

.gk-form__row {
  display: grid;
  gap: 1rem;
}

@media (min-width: 40rem) {
  .gk-form__row {
    grid-template-columns: 1fr 1fr;
  }
}

.gk-join .gk-field__input {
  border-color: var(--gk-line);
  background: var(--gk-paper);
  color: var(--gk-ink);
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}

.gk-join .gk-field__input:focus-visible {
  border-color: var(--gk-ink);
  box-shadow: 0 0 0 4px rgb(242 183 5 / 0.25);
  outline: none;
}

.gk-join .gk-field__input[aria-invalid="true"] {
  border-color: var(--gk-error);
}

.gk-join .gk-field__error {
  color: var(--gk-error);
}

.gk-join .gk-form__note {
  background: rgb(242 183 5 / 0.12);
  color: var(--gk-ink);
}

.gk-join .gk-form__global-error {
  background: rgb(179 38 30 / 0.1);
  color: var(--gk-error);
}

/* Role cards: the radio is visually hidden, the card is the control. */
.gk-role-cards {
  display: grid;
  grid-auto-rows: 1fr; /* every card the same height, whatever its label length */
  gap: 0.75rem;
}

@media (min-width: 40rem) {
  .gk-role-cards {
    grid-template-columns: 1fr 1fr;
  }
}

.gk-role-card {
  position: relative;
  display: flex;
  cursor: pointer;
}

.gk-role-card input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.gk-role-card__body {
  position: relative;
  flex: 1;
  display: grid;
  align-content: center;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icon label" "icon hint";
  column-gap: 0.85rem;
  row-gap: 0.15rem;
  padding: 0.9rem 2.5rem 0.9rem 1rem;
  border: 2px solid var(--gk-line);
  border-radius: 1rem;
  transition:
    border-color 0.15s,
    background 0.15s,
    transform 0.15s;
}

.gk-role-card__icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  background: var(--gk-paper-tint);
  color: var(--gk-ink);
  transition:
    background 0.15s,
    color 0.15s;
}

.gk-role-card__label {
  grid-area: label;
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1.25;
  text-wrap: balance;
}

.gk-role-card__hint {
  grid-area: hint;
  font-size: 0.85rem;
  color: var(--gk-muted);
}

.gk-role-card__check {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--gk-gold);
  color: var(--gk-ink);
  transform: scale(0);
  transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.2, 1.4);
}

.gk-role-card__check .gk-icon {
  width: 0.9rem;
  height: 0.9rem;
}

.gk-role-card:hover .gk-role-card__body {
  border-color: var(--gk-muted);
}

.gk-role-card:has(input:focus-visible) .gk-role-card__body {
  box-shadow: 0 0 0 4px rgb(242 183 5 / 0.3);
}

.gk-role-card:has(input:checked) .gk-role-card__body {
  border-color: var(--gk-gold);
  background: rgb(242 183 5 / 0.08);
}

.gk-role-card:has(input:checked) .gk-role-card__icon {
  background: var(--gk-ink);
  color: var(--gk-gold);
}

.gk-role-card:has(input:checked) .gk-role-card__check {
  transform: scale(1);
}

/* Help options as toggle chips. */
.gk-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.gk-chip {
  position: relative;
  cursor: pointer;
}

.gk-chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.gk-chip span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.95rem;
  border: 2px solid var(--gk-line);
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  transition:
    border-color 0.15s,
    background 0.15s,
    color 0.15s;
}

.gk-chip span::before {
  content: "+";
  font-weight: 800;
  color: var(--gk-muted);
}

.gk-chip:hover span {
  border-color: var(--gk-muted);
}

.gk-chip:has(input:focus-visible) span {
  box-shadow: 0 0 0 4px rgb(242 183 5 / 0.3);
}

.gk-chip:has(input:checked) span {
  border-color: var(--gk-ink);
  background: var(--gk-ink);
  color: var(--gk-paper);
}

.gk-chip:has(input:checked) span::before {
  content: "✓";
  color: var(--gk-gold);
}

/* Consent rows and submit. */
.gk-join .gk-choice input {
  accent-color: var(--gk-ink);
}

.gk-btn--submit {
  justify-self: start;
  gap: 0.6rem;
  padding-right: 1.25rem;
  transition:
    transform 0.15s,
    box-shadow 0.15s,
    background 0.15s;
}

.gk-btn--submit .gk-btn__arrow {
  display: inline-grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  transition: transform 0.2s;
}

.gk-btn--submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgb(242 183 5 / 0.35);
}

.gk-btn--submit:hover .gk-btn__arrow {
  transform: translateX(3px);
}

.gk-btn--submit:active {
  transform: translateY(0) scale(0.98);
}

/* Inline success (no-JS path and behind the dialog). */
.gk-join .gk-form__success {
  max-width: none;
  padding: 1.5rem;
  border: 0;
  border-radius: 1rem;
  background: rgb(242 183 5 / 0.12);
  color: var(--gk-ink);
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0.75rem;
}

.gk-success__mark {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--gk-gold);
  color: var(--gk-ink);
}

.gk-icon--lg {
  width: 1.75rem;
  height: 1.75rem;
}

/* ---------------------------------------------------------------- thank-you dialog */

.gk-modal {
  width: min(92vw, 26rem);
  padding: 0;
  border: 0;
  border-radius: 1.5rem;
  background: var(--gk-paper);
  color: var(--gk-ink);
  box-shadow: 0 30px 80px rgb(20 33 61 / 0.35);
}

.gk-modal::backdrop {
  background: rgb(20 33 61 / 0.6);
  backdrop-filter: blur(3px);
}

.gk-modal__body {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  padding: 2.25rem 1.75rem 1.75rem;
  text-align: center;
}

.gk-modal__check {
  color: var(--gk-gold);
  margin-bottom: 0.5rem;
}

.gk-modal__title {
  margin: 0;
  font-family: var(--gk-font-display);
  font-size: 1.5rem;
  line-height: 1.1;
}

.gk-modal__text,
.gk-modal__body .gk-btn {
  margin-top: 0.5rem;
  min-width: 10rem;
}

@media (prefers-reduced-motion: no-preference) {
  .gk-modal[open] {
    animation: gk-modal-in 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  .gk-modal[open]::backdrop {
    animation: gk-fade-in 0.35s ease both;
  }

  .gk-modal[open] .gk-modal__check-ring {
    stroke-dasharray: 190;
    stroke-dashoffset: 190;
    animation: gk-draw 0.7s ease-out 0.1s forwards;
  }

  .gk-modal[open] .gk-modal__check-path {
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation: gk-draw 0.4s ease-out 0.6s forwards;
  }
}

@keyframes gk-modal-in {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes gk-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes gk-draw {
  to {
    stroke-dashoffset: 0;
  }
}

/* Narrow phones: the consent banner should leave most of the first screen to the page. */
@media (max-width: 24rem) {
  .gk-cookie {
    font-size: 0.85rem;
  }

  .gk-cookie .gk-btn {
    padding: 0.6rem 1rem;
  }
}

/* ================================================================ desktop redesign
   Source: Figma GKA_Website, frame "GKA_Desktop" 1920x6402.
   Tokens and the above-the-fold part are in critical.css under the same banner.
   Everything here applies from 64rem up only, so the phone layout is untouched.
   ================================================================ */

@media (min-width: 64rem) {
  /* --------------------------------------------------------------- sections */

  /* The frame alternates white and paper, starting with white under the hero.
     Ids are the anchor targets fixed by the ТЗ, so they are stable to style on. */
  #zashto,
  #kandev {
    background: var(--gk-white);
  }

  #gyurov,
  #komitet {
    background: var(--gk-paper);
  }

  /* Measured gap between sections in the frame is ~240, unevenly split. Squaring it
     to 100/140 keeps the rhythm and reads more consistently than copying the drift.
     Fluid so a 1366 laptop does not spend a third of the screen on padding. */
  .gk-section {
    --gk-section-pt: clamp(3.5rem, 5.2vw, 6.25rem);
    --gk-section-pb: clamp(4.5rem, 7.3vw, 8.75rem);
    padding-block: var(--gk-section-pt) var(--gk-section-pb);
    /* Anchors have to land on the section title, not on the top padding, so the
       target is pulled up by the padding the title sits below. */
    scroll-margin-top: calc(var(--gk-header-h) + 1rem - var(--gk-section-pt));
  }

  /* The frame gives every band its own vertical padding. */
  #zashto {
    --gk-section-pt: clamp(4.5rem, 5.573vw, 6.6875rem); /* 107 */
    --gk-section-pb: clamp(6.5rem, 7.76vw, 9.3125rem); /* 149 */
  }

  #gyurov {
    --gk-section-pt: clamp(4rem, 4.974vw, 5.96875rem); /* 95.5 */
    --gk-section-pb: clamp(5.5rem, 6.927vw, 8.3125rem); /* 133 */
  }

  #kandev {
    --gk-section-pt: clamp(3rem, 3.4375vw, 4.125rem); /* 66 */
    --gk-section-pb: clamp(3rem, 3.646vw, 4.375rem); /* 70 */
  }

  #komitet {
    --gk-section-pt: clamp(3.25rem, 3.854vw, 4.625rem); /* 74 */
    --gk-section-pb: clamp(4.5rem, 5.781vw, 6.9375rem); /* 111 */
  }

  .gk-section__head {
    max-width: none;
    margin-bottom: clamp(2.5rem, 5.1vw, 6.125rem); /* 98, as under ZASHTO */
  }

  .gk-section__title {
    margin: 0;
    font-size: var(--gk-fs-h2);
    font-weight: var(--gk-weight-bold);
    /* The frame's 66px title measures a 79 box, not 66. */
    line-height: var(--gk-lh-display);
    color: var(--gk-accent-text);
    text-transform: none;
    letter-spacing: 0;
  }

  /* The gold rule above section titles is not in the redesign. */
  .gk-section__title::before {
    content: none;
  }

  .gk-section__intro {
    margin: 0;
    font-size: var(--gk-fs-body);
    font-weight: var(--gk-weight-body);
    line-height: var(--gk-lh-body);
    color: var(--gk-ink);
  }

  /* ZASHTO and I TI set the title and the intro side by side, centred as one group. */
  #zashto .gk-section__head,
  #iti .gk-join__head {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 1.875rem;
    margin-bottom: clamp(2.5rem, 5.1vw, 6.125rem);
  }

  /* 80, not 71. The old 71 only ever landed the panel on the frame's 249 because the
     intro was taking a third line and padding the head by exactly the 9 that were
     missing here; with the intro back on two lines the real gap has to be stated. */
  #iti .gk-join__head {
    margin-bottom: clamp(2.5rem, 4.17vw, 5rem); /* 80 */
  }

  /* Both intros hang below the top of the 66px title rather than aligning to it,
     by 28 next to ЗАЩО and 31 next to И ТИ, on measures of 472 and 500. */
  /* The frame's box is 472, where its own engine fits two lines. Chrome needs 490 for
     the same two lines, and with three the head grows past the title and pushes the
     card row 6 down. */
  #zashto .gk-section__intro {
    max-width: 30.625rem; /* 490 */
    margin-top: 1.75rem; /* 28 */
  }

  /* Same story as ZASHTO one rule up, and it was missed there: the frame's 500 fits
     two lines in Figma and three in Chrome, so the intro grew past the title and hung
     below it - the head read as two blocks that do not line up. 512 is the measured
     width for two lines, with 4 to spare. */
  #iti .gk-section__intro {
    max-width: 32rem; /* 512; the frame's box is 500 */
    margin-top: 1.9375rem; /* 31 */
  }

  /* The frame puts this intro in ink on the accent band (5.41:1). The legacy
     `.gk-section--ink` rule would tint it white at 80% opacity, which is 2.51:1. */
  #iti .gk-section__intro {
    color: var(--gk-ink);
  }

  /* The committee stacks them, both centred. */
  #komitet .gk-section__head {
    display: grid;
    justify-items: center;
    gap: 0.5625rem; /* 9, as in the frame */
    text-align: center;
    margin-bottom: 2.9375rem;
  }

  /* --------------------------------------------------------------- ZASHTO cards */

  /* minmax(0, 1fr) rather than 1fr: the fixed 76 icon tile plus a long Bulgarian word
     gives the card a min-content width of ~357, which would push the four-up row past
     the viewport on a 1366 laptop instead of shrinking. */
  .gk-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: calc(20 * var(--gk-u));
  }

  /* Title across the top, then the icon tile and the text side by side. The template
     order is icon, title, text, so grid areas reorder it without touching the markup. */
  /* The frame positions everything in the card absolutely: the title is centred on
     y=77 and the icon row starts at y=119 whatever the title's length, so the four
     icon tiles read as one row. A fixed title band reproduces that from flow layout,
     and the 267 height is the frame's card. */
  .gk-card {
    display: grid;
    grid-template-areas:
      "title title"
      "icon text";
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: calc(90 * var(--gk-u)) auto;
    align-content: start;
    /* The frame's card is 267; `min-` so real copy longer than the placeholder
       grows the row instead of spilling out of it. */
    min-height: calc(267 * var(--gk-u));
    row-gap: 0;
    column-gap: calc(23 * var(--gk-u));
    /* 27 on the left puts the icon on the frame's 255. The frame's own right padding
       is smaller than its left (26 against 29), and copying that gives the copy the
       frame's full 198: at 194 "университетските" does not fit and breaks mid-word. */
    padding: calc(27 * var(--gk-u)) calc(23 * var(--gk-u))
      calc(27 * var(--gk-u)) calc(27 * var(--gk-u));
    background: var(--gk-paper);
    border: 2px solid var(--gk-line);
    border-radius: var(--gk-radius);
  }

  /* The frame centres the title in its band, which works there because no title runs
     past two lines. Chrome sets "партийни интереси" at 352 against a 351 card, so that
     one title takes a third line at any padding, and centring four titles of one, two
     and three lines leaves their tops 24 apart - the row reads crooked. Aligning them
     to the top of the band puts all four first lines on one line and leaves the icon
     row where the frame fixes it. */
  .gk-card__title {
    grid-area: title;
    align-self: start;
    margin: 0;
    font-size: var(--gk-fs-h3);
    font-weight: var(--gk-weight-bold);
    line-height: 1;
    text-align: center;
    text-wrap: balance;
    /* Bulgarian compounds outrun the column on a narrow laptop. Hyphenate rather than
       cut mid-word, but only words long enough to actually need it, so ordinary ones
       keep the frame's clean wraps. break-word is the fallback for engines with no
       Bulgarian patterns. */
    /* WebKit ignores hyphenate-limit-chars, and unlimited `auto` breaks after one
       letter - "Компетентнос-т". Only hyphenate where the limit is honoured. */
    hyphens: manual;
    overflow-wrap: break-word;
  }

  .gk-card__icon {
    grid-area: icon;
    align-self: start;
    width: calc(76 * var(--gk-u));
    height: calc(76 * var(--gk-u));
    margin: 0;
    border-radius: var(--gk-radius);
    background: var(--gk-accent);
    color: var(--gk-paper);
  }

  .gk-card__icon .gk-icon,
  .gk-card__icon svg {
    width: calc(42 * var(--gk-u));
    height: calc(42 * var(--gk-u));
  }

  .gk-card__text {
    grid-area: text;
    align-self: center;
    margin: 0;
    font-size: var(--gk-fs-body);
    font-weight: var(--gk-weight-body);
    line-height: var(--gk-lh-body);
    color: var(--gk-ink);
    /* "университетските" measures 213 in Chrome against the frame's 198 column, so
       something has to give: a soft hyphen reads as a break, a raw cut does not. The
       limit keeps shorter words like "кабинет" whole, as the frame has them. */
    /* WebKit ignores hyphenate-limit-chars, and unlimited `auto` breaks after one
       letter - "Компетентнос-т". Only hyphenate where the limit is honoured. */
    hyphens: manual;
    overflow-wrap: break-word;
  }

  /* The frame's side-by-side icon and text needs the 352 card it was drawn at. Below
     that the text column gets too narrow for Bulgarian words, so the icon moves above
     the copy - which is what the previous design did at every width. */
  /* The frame's four-up row needs roughly 150 of copy column to set 16px Bulgarian
     without breaking words, and with the card on the proportional scale that runs out
     near 1500. Below it the row halves instead of stacking the icon onto a line of its
     own: the icon beside the copy is what makes this card this card, and a phone-style
     stack at laptop width was the single thing that read most wrongly. */
  @media (max-width: 93.74rem) {
    .gk-cards {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  /* --------------------------------------------------------------- person */

  /* 640 portrait, 173 gap, 651 text = the 1464 container. */
  .gk-person {
    grid-template-columns: 640fr 660fr;
    gap: clamp(3rem, 8.54vw, 10.25rem); /* 164 */
    align-items: center;
  }

  .gk-person--flip {
    grid-template-columns: 660fr 640fr;
  }

  .gk-person__media {
    max-width: none;
  }

  .gk-person__img {
    aspect-ratio: 1;
    border-radius: var(--gk-radius);
  }

  /* The gold offset block behind the portrait is not in the redesign. */
  .gk-person__media::after {
    content: none;
  }

  .gk-person__body .gk-section__head {
    margin-bottom: 2.5rem; /* 40 */
  }

  .gk-person__intro {
    margin: 1.25rem 0 0;
    font-size: var(--gk-fs-body);
    font-weight: var(--gk-weight-body);
    line-height: var(--gk-lh-body);
    color: var(--gk-ink);
  }

  /* --------------------------------------------------------------- timeline */

  .gk-timeline {
    margin: 0 0 0 0.5625rem; /* puts the rule on the frame's 1041 */
    padding-left: 2.625rem; /* 42 from the rule to the text */
    border-left: 2px solid var(--gk-ink);
  }

  /* The previous design spaced entries with 28 of padding; the frame uses a plain 40
     between them, so the padding has to go or every entry carries both. */
  .gk-timeline__item {
    padding: 0;
    margin-bottom: 2.5rem; /* 40 */
  }

  .gk-timeline__item:last-child {
    margin-bottom: 0;
  }

  /* The dot straddles the rule, which sits 42 of padding plus its own 2 to the left
     of the item's content box. */
  .gk-timeline__item::before,
  .gk-section--tint .gk-timeline__item::before {
    top: 0;
    left: -3.4375rem; /* centres the 24 dot on the 2px rule */
    width: 1.5rem; /* 24 */
    height: 1.5rem;
    border: 0;
    border-radius: 50%;
    background: var(--gk-accent);
  }

  .gk-timeline__period {
    margin: 0 0 0.625rem; /* 10 */
    font-family: var(--gk-font-body);
    font-size: var(--gk-fs-body);
    font-weight: var(--gk-weight-body);
    letter-spacing: 0;
    text-transform: none;
    color: var(--gk-accent-text);
  }

  .gk-timeline__title {
    margin: 0 0 0.625rem; /* 10 */
    font-size: var(--gk-fs-h3);
    font-weight: var(--gk-weight-bold);
    line-height: 1;
    color: var(--gk-ink);
  }

  .gk-timeline__text {
    margin: 0;
    font-size: var(--gk-fs-body);
    font-weight: var(--gk-weight-body);
    line-height: var(--gk-lh-body);
    color: var(--gk-ink);
  }

  .gk-person__more {
    margin-top: 3.875rem; /* 62 */
    color: var(--gk-accent-text);
    font-weight: var(--gk-weight-bold);
    text-transform: lowercase;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.35em;
  }

  /* --------------------------------------------------------------- committee */

  .gk-members {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2.5rem 2.125rem; /* 40 / 34 */
  }

  .gk-member {
    display: grid;
    gap: 0; /* spacing inside the card is set per element, as in the frame */
    justify-items: stretch;
  }

  /* Photos are shown in colour, not the previous monochrome grid. The white
     backing matches the empty placeholder boxes the frame shows. */
  .gk-member__photo {
    aspect-ratio: 1;
    border-radius: var(--gk-radius);
    filter: none;
    background: var(--gk-white);
    margin-bottom: 1.25rem; /* 20 */
  }

  /* The text column is 276 wide under a 340 photo, left aligned inside it. */
  .gk-member__name,
  .gk-member__role,
  .gk-member__quote {
    width: 81.2%;
    margin-inline: auto;
    text-align: left;
  }

  .gk-member__name {
    /* The phone layout adds 12 above the name; the frame stacks the copy tight. */
    margin: 0 auto 0.625rem;
    font-family: var(--gk-font-display);
    font-size: var(--gk-fs-h3);
    font-weight: var(--gk-weight-bold);
    line-height: var(--gk-lh-h3);
    color: var(--gk-accent-text);
    text-transform: none;
  }

  .gk-member__role {
    margin-bottom: 1.25rem;
    font-size: var(--gk-fs-body);
    font-weight: var(--gk-weight-bold);
    color: var(--gk-ink);
    text-transform: none;
    letter-spacing: 0;
  }

  .gk-member__quote {
    margin: 0 auto;
    padding: 0;
    border: 0;
    font-size: var(--gk-fs-body);
    font-weight: var(--gk-weight-body);
    font-style: normal;
    line-height: var(--gk-lh-body);
    color: var(--gk-ink);
  }

  /* --------------------------------------------------------------- I TI */

  #iti {
    background: var(--gk-accent);
    color: var(--gk-ink);
    padding-block: 5.625rem;
  }

  /* The gold corner glow is not in the redesign. */
  .gk-join::before {
    content: none;
  }

  /* Paper on the accent band is 2.81:1; pure white is 3.08:1, which clears the
     large-text threshold for this 66px heading. */
  #iti .gk-section__title {
    color: var(--gk-white);
  }

  /* The narrow reading measure the previous design used does not apply here: the
     frame runs the panel almost the full container width. */
  .gk-join__inner {
    max-width: none;
  }

  .gk-join__panel {
    max-width: calc(1430 * var(--gk-u));
    margin-inline: auto;
    padding: calc(78 * var(--gk-u)) clamp(2rem, 12.4%, 11.0625rem);
    background: var(--gk-paper);
    border: 0;
    border-radius: var(--gk-radius);
  }

  .gk-join .gk-form {
    gap: 2.5rem;
  }

  /* Step numbers read as "1." inline, not as a badge. */
  .gk-step {
    display: inline;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    background: none;
    border-radius: 0;
    color: inherit;
    font: inherit;
  }

  .gk-step::after {
    content: ".";
  }

  /* The frame centres the step title over the cards and draws no required marker
     next to it. The marker is aria-hidden, so hiding it costs screen readers
     nothing - the radio group is still `required`. */
  .gk-join .gk-form__step--1 > .gk-fieldset__legend,
  .gk-join .gk-form__step-title {
    font-family: var(--gk-font-display);
    font-size: var(--gk-fs-h3);
    font-weight: var(--gk-weight-bold);
    line-height: 1.2;
    color: var(--gk-accent-text);
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 2.5rem; /* 40; the fieldset gap does not reach a <legend> */
    text-align: center;
  }

  /* Step 2 heads its panel from the left and sits 24 above the fields (51:6181),
     where step 1 centres over the cards and sits 40 above them (51:1856). */
  .gk-join .gk-form__step-title {
    margin-bottom: 0;
    text-align: left;
  }

  /* "Как искаш да помогнеш?" is labelled as a field in the frame, not as a step:
     16/900 ink, 10 above the chips (51:6203). */
  .gk-join .gk-form__step--2 .gk-fieldset__legend:not(.gk-form__step-title) {
    font-family: var(--gk-font-display);
    font-size: var(--gk-fs-body);
    font-weight: var(--gk-weight-bold);
    line-height: var(--gk-lh-body);
    color: var(--gk-ink);
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 0.625rem; /* 10 */
    text-align: left;
  }

  /* The frame keeps 10 between a label and its field, and 20 between fields. */
  .gk-join .gk-field {
    gap: 0.625rem; /* 10 */
  }

  .gk-join .gk-form__row {
    gap: 1.25rem; /* 20 */
  }

  .gk-join .gk-fieldset__legend [aria-hidden="true"] {
    display: none;
  }

  /* 40 between the title, the card grid and the action, as in the frame. */
  .gk-join .gk-form__step--1 {
    gap: 2.5rem;
  }

  .gk-join .gk-field__label {
    font-size: var(--gk-fs-body);
    font-weight: var(--gk-weight-bold);
    color: var(--gk-ink);
    text-transform: none;
    letter-spacing: 0;
  }

  /* Role cards: 2x2, icon tile and copy side by side inside a white card. */
  .gk-role-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }

  .gk-role-card__body {
    display: grid;
    grid-template-areas:
      "icon label"
      "icon hint";
    grid-template-columns: auto 1fr;
    align-content: center;
    align-items: center;
    column-gap: 1.25rem;
    row-gap: 0.625rem;
    height: 100%;
    padding: 1.25rem;
    background: var(--gk-white);
    border: 0;
    border-radius: var(--gk-radius);
  }

  .gk-role-card__icon {
    grid-area: icon;
    width: calc(76 * var(--gk-u));
    height: calc(76 * var(--gk-u));
    margin: 0;
    border-radius: var(--gk-radius);
    background: var(--gk-accent);
    color: var(--gk-paper);
  }

  .gk-role-card__icon .gk-icon,
  .gk-role-card__icon svg {
    width: 2.625rem;
    height: 2.625rem;
  }

  .gk-role-card__label {
    grid-area: label;
    align-self: end;
    font-size: var(--gk-fs-body);
    font-weight: var(--gk-weight-bold);
    line-height: var(--gk-lh-body);
    color: var(--gk-ink);
  }

  .gk-role-card__hint {
    grid-area: hint;
    align-self: start;
    font-size: var(--gk-fs-body);
    font-weight: var(--gk-weight-body);
    line-height: var(--gk-lh-body);
    color: var(--gk-ink);
  }

  /* Frame 51:1819 now draws the chosen card: a 3px accent border and no tick.
     `outline` with a negative offset keeps the card's box the size it was, which a
     real border would not. */
  .gk-role-card:has(input:checked) .gk-role-card__body {
    background: var(--gk-white);
    outline: 3px solid var(--gk-accent);
    outline-offset: -3px;
  }

  /* The colour has to be restated, not just the background. The base rule still
     carries the pre-redesign pair - ink tile, gold glyph - and gold is an alias of
     the accent now, so setting only the background left the glyph accent on accent
     and the icon read as gone. Selection is marked by the outline on the body; the
     tile itself does not change. */
  .gk-role-card:has(input:checked) .gk-role-card__icon {
    background: var(--gk-accent);
    color: var(--gk-paper);
  }

  /* The frame marks the choice with the border alone, so the corner tick goes.
     It is aria-hidden, so nothing is lost to a screen reader. */
  .gk-role-card__check {
    display: none;
  }

  /* --------------------------------------------------------------- form fields */

  /* Frame 51:6190: a plain white field, 42 tall, 20 of padding, no resting border.
     The border is held transparent rather than dropped so the invalid state (3px,
     51:6193) can colour it without the field growing and shifting the row. */
  .gk-join .gk-field__input {
    min-height: 2.625rem; /* 42 */
    padding: 0 1.25rem; /* 20 */
    background: var(--gk-white);
    border: 1px solid var(--gk-control-edge);
    border-radius: var(--gk-radius);
    color: var(--gk-ink);
    font-size: var(--gk-fs-body);
    font-weight: var(--gk-weight-body);
  }

  /* An invalid field keeps its red border while it is focused - the script moves
     focus to the first one after a failed submit, and the focus rule below would
     otherwise repaint it accent. Focus stays legible through the outline. */
  .gk-join .gk-field__input[aria-invalid="true"],
  .gk-join .gk-field__input[aria-invalid="true"]:focus-visible {
    border: 3px solid var(--gk-error);
  }

  .gk-join .gk-field__error {
    font-size: 0.875rem;
    color: var(--gk-error);
  }

  .gk-join .gk-field__input:focus-visible {
    border-color: var(--gk-accent);
    outline: 2px solid var(--gk-accent);
    outline-offset: 1px;
  }

  /* Frame 51:6205: chips are square-cornered white fields, 42 tall, 20 of padding,
     10 apart - not the pills the previous design used. */
  .gk-chips {
    gap: 0.625rem; /* 10 */
  }

  .gk-chip span {
    min-height: 2.625rem; /* 42 */
    /* The frame pads chips by 20, which puts the four of them at 1137 against the
       row's 1076 - Chrome sets Unbounded ~3% wider (11.1.6) and the fourth chip drops
       to a second line, changing the panel's height. 12 brings the row back to one
       line without touching the frame's 10 gap. */
    padding: 0 0.75rem;
    gap: 0.3rem;
    background: var(--gk-white);
    /* The 3px border is reserved for the chosen state, so the resting edge is drawn
       as an inset outline: it costs no width and cannot shift the row. */
    border: 3px solid transparent;
    outline: 1px solid var(--gk-control-edge);
    outline-offset: -1px;
    border-radius: var(--gk-radius);
    color: var(--gk-ink);
    font-size: var(--gk-fs-body);
    font-weight: var(--gk-weight-body);
  }

  /* A chosen chip keeps its white ground and its "+" (51:6206); only the border
     turns accent. Hover has to be restated: the inherited ink border reads as
     chosen, and the frame draws no hover of its own. */
  .gk-chip:has(input:checked) span {
    background: var(--gk-white);
    border-color: var(--gk-accent);
    outline-color: transparent;
    color: var(--gk-ink);
  }

  .gk-chip:hover span {
    border-color: var(--gk-line);
  }

  .gk-chip:hover:has(input:checked) span {
    border-color: var(--gk-accent);
  }

  /* Consent rows, frames 51:6501 / 51:6220: a 26 square on the panel's radius,
     white on paper, 10 from its text. */
  .gk-join .gk-choice {
    align-items: center;
    gap: 0.625rem; /* 10 */
    padding: 0;
  }

  .gk-join .gk-choice input {
    appearance: none;
    width: 1.625rem; /* 26 */
    height: 1.625rem;
    margin: 0;
    border: 1px solid var(--gk-control-edge);
    border-radius: var(--gk-radius);
    background: var(--gk-white);
    cursor: pointer;
  }

  .gk-join .gk-choice input:checked {
    background-color: var(--gk-accent-text);
    background-image: var(--gk-tick);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 1rem 1rem;
  }

  .gk-join .gk-choice input:focus-visible {
    outline: 3px solid var(--gk-accent-text);
    outline-offset: 2px;
  }

  /* The frame sets this legal copy at 8px. Consent cannot be given at a size it
     cannot be read at, so it stays at 14 - the smallest step that is still legible
     - and reads as secondary the way the frame intends. */
  .gk-join .gk-choice span {
    font-size: 0.875rem;
    line-height: var(--gk-lh-body);
    color: var(--gk-ink);
  }

  /* Four gold glows from the previous palette survive here because the redesign
     restated colour but not box-shadow. On this palette they read as a yellow halo. */
  .gk-join .gk-field__input:focus-visible {
    box-shadow: none;
  }

  .gk-role-card:has(input:focus-visible) .gk-role-card__body,
  .gk-chip:has(input:focus-visible) span {
    box-shadow: none;
    outline: 3px solid var(--gk-accent-text);
    outline-offset: 2px;
  }

  /* The step-2 back control is not drawn in the frame. It stays - it is the only way
     back to the role cards - but not as the gold pill it inherited. */
  .gk-join .gk-form__chosen {
    padding: 0;
    background: none;
    color: var(--gk-ink);
    font-size: 0.875rem;
    font-weight: var(--gk-weight-body);
  }

  .gk-join .gk-form__back {
    padding: 0;
    background: none;
    color: var(--gk-accent-text);
    font-size: 0.875rem;
    font-weight: var(--gk-weight-bold);
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }

  .gk-join .gk-form__back:hover,
  .gk-join .gk-form__back:focus-visible {
    background: none;
    color: var(--gk-ink);
  }

  /* The frame centres the step action; the previous design parked it bottom right.
     `.gk-form .gk-btn--primary` (12rem, justify-self: start) and `.gk-js
     .gk-form__next` (justify-self: end) both outrank a single class, so the
     centring and the frame's 240 have to be stated at the same weight. */
  .gk-btn--submit,
  .gk-form__next,
  .gk-js .gk-form__step--2 > .gk-btn--submit,
  .gk-join .gk-form .gk-btn--primary,
  .gk-js .gk-join .gk-form__next {
    justify-self: center;
    min-width: 15rem; /* 240 */
    min-height: 3.75rem; /* 60 */
    margin-top: 0;
    margin-inline: auto;
    border-radius: var(--gk-radius);
    background: var(--gk-accent-text);
    color: var(--gk-paper);
    font-weight: var(--gk-weight-bold);
    text-transform: lowercase;
  }

  .gk-btn--submit:hover,
  .gk-form__next:hover {
    background: #8f5cff;
    box-shadow: 0 10px 24px rgb(129 69 255 / 0.3);
  }

  /* --------------------------------------------------------------- success modal */

  /* Frame 51:6836 replaces the small paper card with a wide ink panel floating over
     the blurred page. 1189x748 in the frame; both are capped against the viewport so
     a 768-tall laptop still shows the whole panel. */
  .gk-modal {
    width: min(92vw, 74.3125rem); /* 1189 */
    border-radius: var(--gk-radius);
    background: var(--gk-ink);
    color: var(--gk-paper);
    box-shadow: none;
  }

  /* The frame blurs the page and washes it lighter rather than darkening it: the
     cream band above the panel stays cream and the accent band goes pale. An ink
     tint here turned the cream grey. */
  .gk-modal::backdrop {
    background: rgb(247 244 241 / 0.3);
    backdrop-filter: blur(8px);
  }

  .gk-modal__body {
    align-content: center;
    gap: 0.625rem; /* 10 between the headline and its line of copy */
    min-height: min(46.75rem, 78vh); /* 748 */
    padding: clamp(3rem, 12vh, 10rem) 2rem;
  }

  /* The frame draws no check mark - the headline carries the message on its own. */
  .gk-modal__check {
    display: none;
  }

  .gk-modal__title {
    max-width: 24.1875rem; /* 387 */
    font-size: 3.5rem; /* 56 */
    line-height: 1;
    color: var(--gk-paper);
  }

  /* Accent on ink is 5.4:1, so the frame's own colour clears AA here and the
     accent-text substitute is not needed. */
  .gk-modal__text {
    max-width: 24.1875rem;
    font-size: 0.75rem; /* 12 */
    line-height: var(--gk-lh-body);
    color: var(--gk-accent);
  }

  /* 192x48 with a 12 label, and 32 below the copy: the body gap carries 10 of it. */
  .gk-modal__body .gk-btn {
    min-width: 12rem; /* 192 */
    min-height: 3rem;
    height: 3rem; /* 48; the arrow glyph is taller than the 12px label */
    margin-top: 1.375rem;
    padding-inline: 2.5rem;
    font-size: 0.75rem; /* 12 */
  }

  /* --------------------------------------------------------------- footer */

  .gk-footer {
    padding-block: 3.0625rem 3.625rem;
    background: var(--gk-paper);
    color: var(--gk-ink);
    border-top: 0;
  }

  /* Wordmark, then the three legal and link columns from the frame. The frame's
     fixed 312/273/211 columns plus three 110 gaps need 1376 and overflow a 1366
     viewport, so the columns share the remaining space and the gap is fluid. */
  .gk-footer__inner {
    display: grid;
    grid-template-columns:
      minmax(0, 21rem) minmax(0, 312fr) minmax(0, 273fr)
      minmax(0, 211fr);
    align-items: start;
    gap: clamp(1.5rem, 5.7vw, 6.875rem); /* 110 at 1920 */
  }

  /* Sized off the frame's own lockup, which is a 258x131 vector (node 4:522) with its
     lines measuring 204.7 / 219.2 / 118.3. At 54px Chrome set them 20% over that - not
     a metric difference, just too large. 44.8 puts all three within a pixel and the
     block on the frame's 131. The step and the leading come out the same as the hero's,
     which is right: it is the same lockup. Final size set by measuring the glyphs in
     the frame PNG rather than by its box insets: 204 and 218 wide, line pitch 44. */
  .gk-footer__brand {
    margin: 0;
    font-size: 2.87rem; /* 45.9 */
    font-weight: var(--gk-weight-bold);
    line-height: 0.975;
    color: var(--gk-ink);
    text-transform: none;
    letter-spacing: 0;
  }

  .gk-footer__brand-accent {
    color: var(--gk-accent-text);
  }

  /* The frame keeps the "+" on a chosen chip rather than swapping in a tick, and
     the chip stays white, so the mark stays ink. */
  .gk-chip:has(input:checked) span::before {
    content: "+";
    color: var(--gk-ink);
  }

  .gk-footer__line,
  .gk-footer__legal-block p {
    font-size: var(--gk-fs-body);
    font-weight: var(--gk-weight-body);
    line-height: var(--gk-lh-body);
    color: var(--gk-ink);
  }

  .gk-footer a {
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }

  /* The frame stops at 1920 and says nothing about a 1024 laptop, where four ZASHTO
     cards leave 171 for a 24px Bulgarian compound and the footer's fixed wordmark
     column pushes the last link off the page. Below 1200 both grids halve and the
     footer stacks two up. */
  @media (max-width: 74.99rem) {
    .gk-cards,
    .gk-members {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gk-footer__inner {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
  }

  .gk-footer__line,
  .gk-footer__legal-block p,
  .gk-footer a {
    overflow-wrap: break-word;
  }

  /* --------------------------------------------------------------- cookie banner */

  .gk-cookie {
    background: var(--gk-paper);
    color: var(--gk-ink);
    border-top: 2px solid var(--gk-line);
  }

  .gk-cookie .gk-btn--primary {
    color: var(--gk-paper);
  }

  .gk-btn--ghost {
    border: 2px solid var(--gk-ink);
    border-radius: var(--gk-radius);
    color: var(--gk-ink);
    text-transform: lowercase;
  }
}

/* ================================================================ mobile layout
   The Figma file has no mobile frames, so this is not a transcription: it carries the
   desktop system down to the phone and decides the layout numbers by what fits a 320
   viewport. What is kept is the identity - the palette, Unbounded, the single radius,
   the 76 icon tile, the accent tiles, and the staircase lockup, which is the brand
   mark and the one thing the page is recognised by. What changes is arrangement: every
   two-column composition stacks, and the display sizes come down hard, because
   Unbounded sets roughly 0.62em per Cyrillic character and a 66px heading is 400px of
   one word.

   Everything lives below the desktop breakpoint, so the 1024+ layout cannot see it. */
@media (max-width: 63.99rem) {
  /* ---------------------------------------------------------------- header */

  .gk-header {
    background: var(--gk-paper);
    border-bottom: 0;
  }

  .gk-brand {
    font-size: clamp(0.875rem, 4vw, 1.25rem);
    font-weight: var(--gk-weight-bold);
    letter-spacing: 0;
    text-transform: none;
    color: var(--gk-ink);
  }

  .gk-brand__accent {
    color: var(--gk-accent-text);
  }

  .gk-nav__toggle {
    color: var(--gk-ink);
    font-size: 0.9375rem;
    font-weight: var(--gk-weight-bold);
    text-transform: lowercase;
  }

  /* Under 22rem the brand and a labelled toggle do not both fit; the bars carry the
     meaning on their own and the button keeps its accessible name. */
  @media (max-width: 22rem) {
    .gk-nav__toggle-label {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
  }

  .gk-nav-open .gk-nav__list {
    gap: 1.25rem;
    padding-top: 2rem;
    background: var(--gk-ink);
  }

  .gk-nav-open .gk-nav__link {
    font-size: clamp(1.5rem, 7vw, 2.25rem);
    font-weight: var(--gk-weight-bold);
    line-height: var(--gk-lh-display);
    letter-spacing: 0;
    text-transform: lowercase;
    color: var(--gk-paper);
  }

  /* The assistant keeps the pill it has on the desktop menu rather than becoming a
     fifth link: it is a different kind of destination and the colour says so. */
  .gk-nav-open .gk-nav__item--chat .gk-nav__link {
    display: inline-flex;
    align-items: center;
    align-self: start;
    min-height: 3rem;
    padding: 0.5rem 1.75rem;
    border-radius: var(--gk-radius);
    background: var(--gk-accent);
    color: var(--gk-ink);
    font-size: 1.125rem;
  }

  /* ---------------------------------------------------------------- hero */

  /* The photo is a wide studio shot with the subject hard left, so a centred crop on a
     portrait viewport frames an empty backdrop. */
  .gk-hero__img {
    object-position: 22% center;
  }

  .gk-hero__media::after {
    background: linear-gradient(
      180deg,
      rgb(14 28 65 / 0.15) 0%,
      rgb(14 28 65 / 0.55) 45%,
      rgb(14 28 65 / 0.93) 100%
    );
  }

  .gk-hero__title {
    margin: 0 0 1rem;
    font-size: var(--gk-fs-display);
    font-weight: var(--gk-weight-bold);
    line-height: 0.973;
    letter-spacing: 0;
    text-wrap: wrap;
  }

  /* The staircase is the mark. The step is set in em so it scales with the lockup
     instead of collapsing to nothing at 320. */
  .gk-hero__line--step {
    margin-left: 0.682em;
  }

  .gk-hero__accent {
    color: var(--gk-accent);
  }

  .gk-hero__sub {
    margin: 0 0 1.75rem;
    max-width: 32rem;
    font-size: var(--gk-fs-body);
    font-weight: var(--gk-weight-body);
    line-height: var(--gk-lh-body);
  }

  /* One thumb-width target, then the quieter link under it. */
  .gk-hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .gk-hero__actions .gk-btn--primary {
    width: 100%;
  }

  .gk-hero__actions .gk-link--secondary {
    align-self: center;
  }

  /* ---------------------------------------------------------------- sections */

  /* The frame alternates the bands - white, paper, white, paper - and that rhythm is
     what separates one section from the next. Without it Gyurov and Kandev run into
     each other on a phone, where there is no second column to tell them apart. */
  #zashto,
  #kandev,
  .gk-section--tint {
    background: var(--gk-white);
  }

  #gyurov,
  #komitet {
    background: var(--gk-paper);
  }

  .gk-section__head {
    max-width: none;
    margin-bottom: clamp(1.75rem, 6vw, 2.75rem);
  }

  .gk-section__title {
    margin: 0 0 0.75rem;
    font-size: var(--gk-fs-h2);
    font-weight: var(--gk-weight-bold);
    line-height: var(--gk-lh-display);
    letter-spacing: 0;
    text-transform: none;
    color: var(--gk-accent-text);
  }

  /* The gold rule above every heading belonged to the previous design; the redesign
     marks a section with the accent on the word itself. */
  .gk-section__title::before {
    content: none;
  }

  .gk-section__intro {
    font-size: var(--gk-fs-body);
    font-weight: var(--gk-weight-body);
    line-height: var(--gk-lh-body);
    color: var(--gk-ink);
  }

  /* ---------------------------------------------------------------- buttons */

  /* The desktop buttons are lowercase accent-text on paper; the phone keeps that
     voice rather than inventing a second one. Full width where the button is the
     screen's one action, so it is a thumb target rather than a word. */
  .gk-btn {
    min-height: 3.25rem;
    padding: 0.75rem 1.5rem;
    border: 0;
    border-radius: var(--gk-radius);
    font-size: var(--gk-fs-body);
    font-weight: var(--gk-weight-bold);
    text-transform: lowercase;
  }

  .gk-btn--primary {
    background: var(--gk-accent-text);
    color: var(--gk-paper);
  }

  .gk-btn--ghost {
    border: 2px solid var(--gk-ink);
    color: var(--gk-ink);
  }

  .gk-link--secondary {
    color: var(--gk-paper);
    font-weight: var(--gk-weight-bold);
    text-transform: lowercase;
  }

  /* ---------------------------------------------------------------- ZASHTO cards */

  /* One column. The card keeps its anatomy from the frame - title over an icon tile
     and copy side by side - because that is what makes it this card rather than a
     generic one; only the title goes left, since a centred title over a left-aligned
     row reads as a mistake once there is no row of four to balance it. */
  .gk-cards {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .gk-card {
    display: grid;
    grid-template-areas:
      "title title"
      "icon text";
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    height: auto;
    gap: 0.875rem 1.125rem;
    padding: 1.25rem;
    background: var(--gk-paper);
    border: 2px solid var(--gk-line);
    border-radius: var(--gk-radius);
    box-shadow: none;
  }

  .gk-card__title {
    grid-area: title;
    align-self: start;
    margin: 0;
    font-size: var(--gk-fs-h3);
    font-weight: var(--gk-weight-bold);
    line-height: var(--gk-lh-h3);
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
    color: var(--gk-ink);
  }

  /* The frame's tile is 76. At 390 that leaves the copy 210 against the 213 of
     "университетските", so every first card would carry a hyphen the frame does not
     have. 64 clears it and still reads as the same tile. */
  .gk-card__icon {
    grid-area: icon;
    align-self: center;
    width: 4rem;
    height: 4rem;
    margin: 0;
    border-radius: var(--gk-radius);
    background: var(--gk-accent);
    color: var(--gk-paper);
  }

  .gk-card__icon .gk-icon,
  .gk-card__icon svg {
    width: 2.25rem;
    height: 2.25rem;
  }

  @media (max-width: 22.5rem) {
    .gk-card__icon {
      width: 3.25rem;
      height: 3.25rem;
    }

    .gk-card__icon .gk-icon,
    .gk-card__icon svg {
      width: 1.75rem;
      height: 1.75rem;
    }
  }

  /* "университетските" sets at 213 against a 158 copy column at 320: on a phone the
     compounds have to be allowed to break, or they push the page sideways. The limit
     keeps ordinary words whole. */
  .gk-card__title,
  .gk-card__text,
  .gk-role-card__label,
  .gk-role-card__hint,
  .gk-member__name,
  .gk-member__quote {
    /* WebKit ignores hyphenate-limit-chars, and unlimited `auto` breaks after one
       letter - "Компетентнос-т". Only hyphenate where the limit is honoured. */
    hyphens: manual;
    overflow-wrap: break-word;
  }

  .gk-card__text {
    grid-area: text;
    align-self: center;
    margin: 0;
    font-size: var(--gk-fs-body);
    font-weight: var(--gk-weight-body);
    line-height: var(--gk-lh-body);
    color: var(--gk-ink);
  }

  /* ---------------------------------------------------------------- person */

  .gk-person {
    gap: 1.5rem;
  }

  /* The frame's portrait is a square, not the 4:5 the previous design cropped to. */
  .gk-person__img {
    aspect-ratio: 1 / 1;
    border-radius: var(--gk-radius);
  }

  .gk-person__body .gk-section__head {
    margin-bottom: 1.5rem;
  }

  .gk-person__intro {
    margin: 0;
    font-size: var(--gk-fs-body);
    font-weight: var(--gk-weight-body);
    line-height: var(--gk-lh-body);
    color: var(--gk-ink);
  }

  .gk-timeline {
    border-left-color: var(--gk-ink);
  }

  .gk-timeline__item {
    padding: 0 0 1.5rem 1.25rem;
  }

  /* The bar under the portrait and the letter-spaced caps on the period both belong
     to the previous design; the redesign marks the period with the accent alone. */
  .gk-person__media::after {
    content: none;
  }

  .gk-timeline__period {
    color: var(--gk-accent-text);
    font-size: 0.9375rem;
    font-weight: var(--gk-weight-bold);
    letter-spacing: 0;
    text-transform: none;
  }

  .gk-timeline__title {
    font-size: var(--gk-fs-h3);
    font-weight: var(--gk-weight-bold);
    line-height: var(--gk-lh-h3);
    color: var(--gk-ink);
  }

  .gk-person__more {
    color: var(--gk-accent-text);
    font-weight: var(--gk-weight-bold);
    text-decoration-color: currentcolor;
    text-transform: lowercase;
  }

  /* ---------------------------------------------------------------- committee */

  /* Two up: eight members in one column is 1600px of scrolling, and the frame's
     composition - square photo over centred name, role and quote - survives the
     narrower card. minmax(0, 1fr) because a bare 1fr takes the longest Bulgarian word
     as its floor and pushes the second column off the screen. */
  .gk-members {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem 1rem;
  }

  @media (max-width: 22.5rem) {
    .gk-members {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* Subgrid gives both cards in a row the same four tracks, so a name that takes two
     lines in one column cannot push its quote out of step with its neighbour's. */
  .gk-members {
    grid-auto-rows: auto;
  }

  .gk-member {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    /* A subgrid inherits the parent's 28 row gap, which would push name, role and
       quote apart. Its own row-gap wins inside its span; the 28 between members is
       the parent's and stays. */
    row-gap: 0.25rem;
    align-content: start;
    text-align: center;
  }

  /* The redesign shows the committee in colour; the greyscale was the old set's way
     of making mixed sources agree. */
  .gk-member__photo {
    filter: none;
    margin-bottom: 0.5rem;
    background: var(--gk-line);
  }

  .gk-member__name {
    margin: 0;
    font-size: var(--gk-fs-body);
    font-weight: var(--gk-weight-bold);
    line-height: var(--gk-lh-body);
    color: var(--gk-ink);
  }

  .gk-member__role {
    margin: 0;
    font-size: 0.875rem;
    font-weight: var(--gk-weight-body);
    line-height: var(--gk-lh-body);
    color: var(--gk-ink);
  }

  .gk-member__quote {
    margin: 0.375rem 0 0;
    padding: 0;
    border-left: 0;
    font-size: 0.8125rem;
    font-style: normal;
    line-height: var(--gk-lh-body);
    color: var(--gk-ink);
  }

  /* ---------------------------------------------------------------- I TI */

  .gk-section--ink.gk-join {
    background: var(--gk-accent);
    color: var(--gk-ink);
  }

  /* Paper on the accent band is 2.81:1, which axe flags as a serious violation even
     at the large-text threshold. Pure white is 3.08:1 and clears it - the same call
     the desktop layer makes for this heading. */
  .gk-join .gk-section__title {
    color: var(--gk-white);
  }

  .gk-join .gk-section__intro,
  .gk-section--ink .gk-section__intro {
    color: var(--gk-ink);
  }

  .gk-join__panel {
    padding: clamp(1.25rem, 5vw, 2rem);
    border-radius: var(--gk-radius);
    background: var(--gk-paper);
    box-shadow: none;
  }

  .gk-join .gk-fieldset__legend,
  .gk-join .gk-form__step-title {
    font-family: var(--gk-font-display);
    font-size: var(--gk-fs-h3);
    font-weight: var(--gk-weight-bold);
    line-height: var(--gk-lh-h3);
    letter-spacing: 0;
    text-transform: none;
    color: var(--gk-accent-text);
  }

  /* "1." inline, as on the desktop, rather than the badge the previous design used. */
  .gk-step {
    display: inline;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: none;
    color: inherit;
    font: inherit;
  }

  .gk-step::after {
    content: ".";
  }

  /* The marker is aria-hidden, so hiding it costs a screen reader nothing and the
     radio group stays required. */
  .gk-join .gk-fieldset__legend [aria-hidden="true"] {
    display: none;
  }

  /* Each role card sizes to its own copy: forcing four equal rows leaves the three
     short ones half empty once they are stacked rather than in a 2x2. */
  .gk-role-cards {
    grid-auto-rows: auto;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
  }

  .gk-role-card__body {
    display: grid;
    grid-template-areas:
      "icon label"
      "icon hint";
    grid-template-columns: auto minmax(0, 1fr);
    align-content: center;
    align-items: center;
    column-gap: 1rem;
    row-gap: 0.25rem;
    padding: 1rem;
    border: 0;
    border-radius: var(--gk-radius);
    background: var(--gk-white);
  }

  .gk-role-card__icon {
    grid-area: icon;
    width: 3.5rem;
    height: 3.5rem;
    margin: 0;
    border-radius: var(--gk-radius);
    background: var(--gk-accent);
    color: var(--gk-paper);
  }

  .gk-role-card__icon .gk-icon,
  .gk-role-card__icon svg {
    width: 2rem;
    height: 2rem;
  }

  .gk-role-card__label {
    grid-area: label;
    font-size: var(--gk-fs-body);
    font-weight: var(--gk-weight-bold);
    line-height: var(--gk-lh-body);
  }

  .gk-role-card__hint {
    grid-area: hint;
    font-size: 0.875rem;
    font-weight: var(--gk-weight-body);
    line-height: var(--gk-lh-body);
  }

  .gk-role-card:has(input:checked) .gk-role-card__body {
    outline: 3px solid var(--gk-accent);
    outline-offset: -3px;
  }

  /* Same as on the desktop: the tile keeps its colours and the outline carries the
     choice. Without this the base rule turns the tile ink and the glyph accent,
     which is a second, louder way of saying the same thing. */
  .gk-role-card:has(input:checked) .gk-role-card__icon {
    background: var(--gk-accent);
    color: var(--gk-paper);
  }

  .gk-role-card__check {
    display: none;
  }

  .gk-form__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  .gk-join .gk-field {
    gap: 0.5rem;
  }

  .gk-join .gk-field__input {
    min-height: 3rem;
    padding: 0 1rem;
    border: 1px solid var(--gk-control-edge);
    border-radius: var(--gk-radius);
    background: var(--gk-white);
    box-shadow: none;
    color: var(--gk-ink);
    font-size: var(--gk-fs-body);
    font-weight: var(--gk-weight-body);
  }

  .gk-join .gk-field__input[aria-invalid="true"],
  .gk-join .gk-field__input[aria-invalid="true"]:focus-visible {
    border: 3px solid var(--gk-error);
  }

  .gk-join .gk-field__input:focus-visible {
    border-color: var(--gk-accent-text);
    outline: 2px solid var(--gk-accent-text);
    outline-offset: 1px;
    box-shadow: none;
  }

  .gk-join .gk-field__error {
    font-size: 0.875rem;
    color: var(--gk-error);
  }

  .gk-chip span {
    min-height: 2.75rem;
    padding: 0 0.875rem;
    border: 3px solid transparent;
    border-radius: var(--gk-radius);
    outline: 1px solid var(--gk-control-edge);
    outline-offset: -1px;
    background: var(--gk-white);
    box-shadow: none;
    color: var(--gk-ink);
    font-size: 0.9375rem;
    font-weight: var(--gk-weight-body);
  }

  .gk-chip:has(input:checked) span {
    border-color: var(--gk-accent);
    outline-color: transparent;
    background: var(--gk-white);
    color: var(--gk-ink);
  }

  .gk-chip:has(input:checked) span::before {
    content: "+";
    color: var(--gk-ink);
  }

  /* The consent copy runs to seven lines on a phone, and centring the box against it
     parks the box in the middle of a paragraph. It sits on the first line instead. */
  .gk-join .gk-choice {
    align-items: start;
    gap: 0.625rem;
  }

  .gk-join .gk-choice input {
    appearance: none;
    width: 1.625rem;
    height: 1.625rem;
    margin: 0.0625rem 0 0;
    border: 1px solid var(--gk-control-edge);
    border-radius: var(--gk-radius);
    background: var(--gk-white);
    cursor: pointer;
  }

  .gk-join .gk-choice input:checked {
    background-color: var(--gk-accent-text);
    background-image: var(--gk-tick);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 1rem 1rem;
  }

  .gk-join .gk-choice input:focus-visible {
    outline: 3px solid var(--gk-accent-text);
    outline-offset: 2px;
  }

  .gk-join .gk-choice span {
    font-size: 0.875rem;
    line-height: var(--gk-lh-body);
    color: var(--gk-ink);
  }

  /* The action is the screen's one job here, so it spans the panel. */
  .gk-btn--submit,
  .gk-form__next {
    width: 100%;
    justify-self: stretch;
    margin-inline: 0;
    background: var(--gk-accent-text);
    box-shadow: none;
    color: var(--gk-paper);
  }

  .gk-join .gk-form__chosen {
    padding: 0;
    background: none;
    color: var(--gk-ink);
    font-size: 0.875rem;
    font-weight: var(--gk-weight-body);
  }

  .gk-join .gk-form__back {
    padding: 0;
    background: none;
    color: var(--gk-accent-text);
    font-weight: var(--gk-weight-bold);
    text-decoration: underline;
  }

  /* ---------------------------------------------------------------- footer */

  .gk-footer {
    border-top: 0;
    background: var(--gk-paper);
    color: var(--gk-ink);
  }

  .gk-footer__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
  }

  .gk-footer__brand {
    font-family: var(--gk-font-display);
    font-size: 1.75rem;
    font-weight: var(--gk-weight-bold);
    line-height: 0.95;
    text-transform: none;
    color: var(--gk-ink);
  }

  .gk-footer__brand-accent {
    color: var(--gk-accent-text);
  }

  .gk-footer__line,
  .gk-footer__legal-block p,
  .gk-footer a {
    color: var(--gk-ink);
    font-size: 0.875rem;
    font-weight: var(--gk-weight-body);
    line-height: var(--gk-lh-body);
    overflow-wrap: break-word;
  }

  /* ---------------------------------------------------------------- success modal */

  .gk-modal {
    width: min(92vw, 30rem);
    border-radius: var(--gk-radius);
    background: var(--gk-ink);
    box-shadow: none;
    color: var(--gk-paper);
  }

  .gk-modal::backdrop {
    background: rgb(247 244 241 / 0.3);
    backdrop-filter: blur(8px);
  }

  .gk-modal__body {
    gap: 0.625rem;
    padding: 2.5rem 1.5rem;
  }

  .gk-modal__check {
    display: none;
  }

  .gk-modal__title {
    font-size: 2rem;
    font-weight: var(--gk-weight-bold);
    line-height: 1;
    color: var(--gk-paper);
  }

  .gk-modal__text {
    font-size: 0.875rem;
    line-height: var(--gk-lh-body);
    color: var(--gk-accent);
  }

  .gk-modal__body .gk-btn {
    width: auto;
    min-width: 12rem;
    margin-top: 1rem;
  }
}

/* Hyphenation, gated. `hyphens: auto` is only safe where `hyphenate-limit-chars` is
   honoured: WebKit ignores it and breaks Bulgarian compounds after a single letter.
   Where it is unsupported the long words simply wrap whole, and `overflow-wrap` stays
   as the last resort for a word wider than its column. */
@supports (hyphenate-limit-chars: 14 7 5) {
  @media (min-width: 64rem) {
    .gk-card__title {
      hyphens: auto;
      hyphenate-limit-chars: 14 7 5;
    }

    .gk-card__text {
      hyphens: auto;
      hyphenate-limit-chars: 14 7 5;
    }
  }

  @media (max-width: 63.99rem) {
    .gk-card__title,
    .gk-card__text,
    .gk-role-card__label,
    .gk-role-card__hint,
    .gk-member__name,
    .gk-member__quote {
      hyphens: auto;
      hyphenate-limit-chars: 10 5 4;
    }
  }
}