/* Page-specific additions; shared branding and theme assets stay in place. */
[lang="am"] {
  font-family: "Noto Sans Ethiopic", "Kefa", "Nyala", "Abyssinica SIL", sans-serif;
  letter-spacing: normal;
}

[lang="km"] {
  font-family: "Noto Sans Khmer", "Khmer MN", "Khmer Sangam MN", "Leelawadee UI", sans-serif;
  letter-spacing: normal;
}

.language-masthead-note {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.8125rem;
}

.language-masthead-title {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.1;
  text-align: right;
}

.language-masthead-title em { color: var(--vermilion-deep); font-weight: 400; }

.language-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
  max-width: 68rem;
  margin: clamp(1rem, 3vw, 2.5rem) auto 0;
}

.language-card {
  --card-ink: #284b40;
  --card-bg: #dce4d5;
  position: relative;
  display: block;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
  border-radius: 8rem 8rem 0.75rem 0.75rem;
  color: var(--card-ink);
  background: var(--card-bg);
  text-decoration: none;
}

.language-card--amharic { --card-ink: #713f2e; --card-bg: #eed9bf; }
.language-card--khmer { --card-ink: #305957; --card-bg: #d5e3e2; }

.language-card__art {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  aspect-ratio: 1.45;
}

.language-card__art::before,
.language-card__art::after {
  position: absolute;
  z-index: -1;
  width: 16rem;
  height: 16rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: 0.12;
  content: "";
  transition: transform 400ms ease;
}

.language-card__art::before { top: -9rem; right: -5rem; }
.language-card__art::after { bottom: -12rem; left: -1rem; width: 24rem; height: 24rem; }
.language-card--amharic .language-card__art::before { top: -10rem; right: auto; left: -5rem; }
.language-card--amharic .language-card__art::after { left: auto; right: -4rem; }
.language-card--khmer .language-card__art::before { top: -11rem; right: -3rem; }
.language-card--khmer .language-card__art::after { bottom: -10rem; left: -9rem; }

.language-card__native {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.5;
}

.language-card__native[lang="am"] {
  font-family: "Noto Sans Ethiopic", "Kefa", "Nyala", "Abyssinica SIL", sans-serif;
}

.language-card__native[lang="km"] {
  font-family: "Noto Sans Khmer", "Khmer MN", "Khmer Sangam MN", "Leelawadee UI", sans-serif;
}

.language-card__art-caption {
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.language-card__body { padding: 0 1.5rem 1.4rem; }
.language-card__heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.language-card h2 { margin: 0; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.03em; }

.language-card__arrow {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  border-radius: 50%;
  font-size: 1.2rem;
  transition: color 180ms ease, background 180ms ease;
}

.language-card:hover .language-card__arrow { color: var(--card-bg); background: var(--card-ink); }
.language-card:hover .language-card__art::before { transform: translate(0.5rem, 0.5rem); }
.language-card:focus-visible { outline: 3px solid var(--theme-focus); outline-offset: 0.35rem; }

.language-eyebrow-native { display: inline-block; margin-left: 0.75rem; font-size: 1rem; font-weight: 400; }
.single-place-grid { display: grid; grid-template-columns: minmax(0, 25rem); }
.online-place-card .place-card__media { aspect-ratio: 5 / 4; }
.online-place-card .place-card__media::after { content: none; }
.online-place-card .place-card__body { grid-template-columns: minmax(0, 1fr) auto; }
.online-place-card .place-card__description { font-size: 0.875rem; }
.online-place-card__status { grid-column: 1 / -1; margin: 0.25rem 0 0; color: var(--vermilion-deep); font-size: 0.75rem; }

.language-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 0.5rem 0 2.5rem; color: var(--ink-soft); font-size: 0.8125rem; }
.language-breadcrumb a, .language-text-link { color: var(--ink); text-underline-offset: 0.25em; text-decoration-thickness: 1px; }
.language-breadcrumb a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.language-breadcrumb a:hover, .language-text-link:hover { color: var(--vermilion-deep); }
.language-breadcrumb a:focus-visible, .language-text-link:focus-visible, .language-switcher a:focus-visible { outline: 3px solid var(--theme-focus); outline-offset: 0.25rem; }

.online-lesson-intro { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: clamp(2rem, 5vw, 4rem); }
.online-lesson-intro h1 { margin: 0; font-family: var(--serif); font-size: clamp(2.6rem, 4.6vw, 4.25rem); font-weight: 400; letter-spacing: -0.045em; line-height: 1.1; }
.online-lesson-intro h1 em { color: var(--vermilion-deep); font-weight: 400; }
.online-lesson-intro__description { max-width: 42ch; margin: 1.75rem 0; color: var(--ink-soft); line-height: 1.85; }
.online-lesson-intro__art { overflow: hidden; border-radius: 48% 48% 1rem 1rem; background: #eedfc8; }
.online-lesson-intro__art img { display: block; width: 100%; height: auto; }
.lesson-coming-soon { margin: 2rem 0 1.5rem; padding: 0.25rem 0 0.25rem 1.25rem; border-left: 2px solid var(--vermilion); }
.lesson-coming-soon h2 { margin: 0; font-size: 1rem; font-weight: 600; }
.lesson-coming-soon p { max-width: 40ch; margin: 0.6rem 0 0; color: var(--ink-soft); font-size: 0.875rem; line-height: 1.8; }
.language-text-link { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; font-size: 0.875rem; }

/* Compact switcher between the learning languages, written in their own scripts. */
.language-switcher { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 0.15rem; padding: 0.2rem; border: 1px solid var(--line); border-radius: 2rem; }
.language-switcher a { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 0.8rem; border-radius: 2rem; color: var(--ink-soft); font-size: 0.875rem; line-height: 1; text-decoration: none; white-space: nowrap; transition: color 160ms ease, background-color 160ms ease; }
.language-switcher a[lang="am"] { font-size: 0.95rem; }
.language-switcher a[lang="km"] { font-size: 1rem; }
.language-switcher a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.language-switcher a[aria-current] { color: var(--paper); background: var(--ink); }

.language-footer { display: flex; justify-content: center; width: min(100% - (2 * var(--page-gutter, 1.5rem)), var(--content-width, 68rem)); margin-inline: auto; padding-block: 1.5rem 2.5rem; border-top: 1px solid var(--line); }

@media (max-width: 48rem) {
  .language-page .site-masthead__inner { flex-direction: row; align-items: center; }
  .language-grid { grid-template-columns: 1fr; gap: 2.5rem; max-width: 26rem; }
  .online-lesson-intro { grid-template-columns: 1fr; }
  .online-lesson-intro__art { width: min(100%, 30rem); grid-row: 1; margin-inline: auto; }
  .language-breadcrumb { margin-bottom: 1.5rem; }
}

@media (max-width: 40rem) {
  .learning-language-page .site-masthead__inner:has(> .site-masthead__back) { flex-wrap: wrap; gap: 0.5rem 1rem; }
  .language-masthead-note { display: none; }
  .language-card__native { font-size: clamp(3rem, 12vw, 4.5rem); }
  .language-card__body { padding-inline: 1.25rem; }
  .online-place-card .place-card__body { display: grid; }
  .online-place-card .place-card__arrow { display: grid; }
  .online-place-card h3 { font-size: 1.125rem; }
  .online-place-card .place-card__description { margin-top: 0; }
  .online-lesson-intro__art { max-width: 24rem; }
}