/* ==========================================================================
   Chung Dung — Design tokens & base styles
   Palette sampled directly from the "website homepage" mockup: sage-green
   fields, deep grassy green, cream paper, and a mustard-gold accent.
   ========================================================================== */

:root {
  --cream: #f7f1de;
  --cream-soft: #f5f4dd;
  --paper: #efe7d0;

  --sage: #b0d38f;
  --sage-soft: #c8e0a8;

  --green-deep: #385817;
  --green: #52872e;
  --green-mid: #6f8f52;
  --green-soft: #a9c08c;
  --green-pale: #dce8c9;

  --amber: #ffc700;
  --amber-dark: #b17501;
  --terracotta: #cf6f45;

  --ink: #2c3320;
  --ink-soft: #5b6350;

  /* Dark green-black for text on sage, asked for in the visual feedback. */
  --lab-ink: #2d5903;

  --white: #ffffff;

  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 10px;

  --shadow-soft: 0 10px 30px rgba(56, 74, 43, 0.12);
  --shadow-card: 0 6px 18px rgba(56, 74, 43, 0.10);

  --font-display: "Lora", Georgia, "Times New Roman", serif;
  --font-body: "Lora", Georgia, "Times New Roman", serif;

  --container: 1120px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

/* Buttons don't inherit the page font on their own — without this the VI/EN
   switch and the nav toggle fall back to the browser's default (Arial). */
button,
input,
select,
textarea { font-family: inherit; }

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--green-deep);
  margin: 0 0 0.5em;
  line-height: 1.2;
}

h1 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }

p { margin: 0 0 1em; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lab-ink);
  background: var(--amber);
  /* An ellipse (not a pill), so the generous side padding is what keeps the
     first and last letters inside the curve. */
  padding: 12px 46px;
  border-radius: 50%;
  margin-bottom: 14px;
  transform: rotate(-1.5deg);  /* the hand-drawn tilt used elsewhere on the site */
}

.eyebrow--plain { text-transform: none; letter-spacing: 0.01em; }

.section {
  padding: 88px 0;
  position: relative;
}

.section--tight { padding: 56px 0; }

.section--deep {
  background: var(--green-deep);
  color: var(--cream-soft);
}
.section--deep h2, .section--deep h3 { color: var(--cream-soft); }
.section--deep p { color: #d9e2c9; }

.section--soft {
  background: #fdf9e7;   /* sampled from the homepage design */
}

.section-head {
  max-width: 640px;
  margin: 0 0 48px;
}

.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  padding: 13px 28px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn:hover { transform: translateY(-2px); }

/* A long email address in a button was pushing the page sideways on phones. */
.btn {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.btn--primary {
  background: var(--green);
  color: var(--cream-soft);
  box-shadow: var(--shadow-card);
}
.btn--primary:hover { background: var(--green-deep); }

.btn--amber {
  background: var(--amber);
  color: var(--green-deep);
  box-shadow: var(--shadow-card);
}
.btn--amber:hover { background: var(--amber-dark); color: var(--cream-soft); }

/* Cream pill with amber text — the CTA style in the homepage design. */
.btn--cream {
  background: var(--cream-soft);
  color: var(--amber-dark);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.05rem, 1.82vw, 1.6rem);
  line-height: 1.15;
  padding: 1.33em 1.9em;
  box-shadow: var(--shadow-card);
}
.btn--cream:hover { background: var(--white); }

.btn--outline {
  background: transparent;
  border-color: var(--green);
  color: var(--green-deep);
}
.btn--outline:hover { background: var(--green); color: var(--cream-soft); }

.btn--outline-light {
  background: transparent;
  border-color: var(--green-soft);
  color: var(--cream-soft);
}
.btn--outline-light:hover { background: var(--cream-soft); color: var(--green-deep); }

/* ---------- Header / nav ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 241, 222, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(56, 74, 43, 0.1);
}

.site-header--sage {
  background: rgba(176, 211, 143, 0.95);
  border-bottom-color: rgba(56, 74, 43, 0.14);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--green-deep);
}

.brand img {
  width: 46px;
  height: 46px;
  object-fit: contain;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  font-weight: 600;
  color: var(--ink);
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--green-deep);
  border-color: var(--amber);
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.lang-switch {
  display: flex;
  align-items: center;
  border: 2px solid var(--green);
  border-radius: 999px;
  overflow: hidden;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
}

.lang-switch button {
  background: transparent;
  border: none;
  padding: 7px 13px;
  cursor: pointer;
  color: var(--green-deep);
}

.lang-switch button.active {
  background: var(--green);
  color: var(--cream-soft);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 3px;
  margin: 5px 0;
  background: var(--green-deep);
  border-radius: 2px;
}

/* ---------- Hero ---------- */

.hero {
  padding: 64px 0 40px;
  position: relative;
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}

.hero-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-art img {
  width: 100%;
  max-width: 380px;
  border-radius: 50%;
  box-shadow: var(--shadow-soft);
}

.blob-ring {
  position: absolute;
  border: 10px solid var(--green-soft);
  border-radius: 50%;
  opacity: 0.6;
}

.hero .tagline {
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 46ch;
}

.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 28px;
}

/* ---------- Cards ---------- */

.grid {
  display: grid;
  gap: 28px;
}

.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 32px 28px;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(56, 74, 43, 0.08);
}

.card .icon-badge {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--green-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 18px;
}

.card--on-dark {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--cream-soft);
}
.card--on-dark h3 { color: var(--cream-soft); }
.card--on-dark p { color: #d9e2c9; }

/* ---------- Sticker badge ---------- */

.sticker {
  display: inline-block;
  background: var(--amber);
  color: var(--green-deep);
  font-family: var(--font-display);
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 40% 60% 55% 45% / 55% 45% 55% 45%;
  transform: rotate(-4deg);
  box-shadow: var(--shadow-card);
}

/* ---------- Courses (Learning Lab) ---------- */

.course-card {
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(56, 74, 43, 0.08);
  display: flex;
  flex-direction: column;
}

.course-card__top {
  background: var(--green-pale);
  padding: 22px 26px;
}

.course-card__body {
  padding: 22px 26px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.course-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--green-deep);
  background: var(--white);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}

.course-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin: 14px 0 18px;
}

.course-meta span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.course-card__body .btn { margin-top: auto; align-self: flex-start; }

/* ---------- Learning Lab: manifesto statement ---------- */

.lab-manifesto {
  max-width: 780px;
  margin: 0 auto 48px;
  text-align: center;
}

.lab-manifesto__lead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  color: var(--ink-soft);
  margin: 14px 0 10px;
}

.lab-manifesto__question {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.2vw, 2.5rem);
  line-height: 1.35;
  color: var(--lab-ink);
  margin: 0 0 22px;
}

.lab-context {
  color: var(--lab-ink);
  margin: 0;
}

.lab-list-label {
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  color: var(--amber-dark);
  margin-bottom: 26px;
}

/* Heading above the three course boxes ("Các khóa học sắp tới"). */
.lab-upcoming { margin: 0 0 34px; }

/* ---------- Learning Lab: Atlas course cards ---------- */

.atlas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.atlas-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  padding: 34px 28px 28px;
  min-height: 400px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

.atlas-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-soft);
}

.atlas-card--rust { background: var(--terracotta); color: #fff; }
.atlas-card--forest { background: var(--green-deep); color: var(--cream-soft); }
.atlas-card--amber { background: var(--amber); color: var(--green-deep); }

.atlas-card__number {
  position: absolute;
  top: 18px;
  right: 22px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3.4rem;
  line-height: 1;
  opacity: 0.3;
}

.atlas-card__tag {
  display: inline-block;
  width: fit-content;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.24);
  padding: 5px 13px;
  border-radius: 999px;
  margin-bottom: 20px;
}

.atlas-card--amber .atlas-card__tag { background: rgba(56, 74, 43, 0.14); }

.atlas-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.3;
  margin: 0 0 14px;
  color: inherit;
}

.atlas-card__body {
  font-size: 0.98rem;
  line-height: 1.55;
  opacity: 0.92;
  margin: 0 0 22px;
  flex: 1;
}

.atlas-card__meta {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.86rem;
  opacity: 0.85;
  margin-bottom: 24px;
}

.atlas-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  align-self: flex-start;
  padding: 10px 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--green-deep);
  transition: background 0.15s ease, gap 0.15s ease;
}

.atlas-card--amber .atlas-card__cta { background: var(--green-deep); color: var(--cream-soft); }
.atlas-card:hover .atlas-card__cta { gap: 12px; }

/* ---------- Values / Philosophy list ---------- */

.value-item {
  display: flex;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(56, 74, 43, 0.12);
}
.value-item:last-child { border-bottom: none; }

.value-num {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--amber);
  min-width: 44px;
}

/* ---------- Projects ---------- */

.project-card {
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(56, 74, 43, 0.08);
}

.project-card__image {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--green-mid), var(--green));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
}

.project-card__body { padding: 22px 26px; }

.status-pill {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.status-pill.ongoing { background: var(--green-pale); color: var(--green-deep); }
.status-pill.upcoming { background: rgba(224,165,62,0.2); color: var(--amber-dark); }
.status-pill.past { background: rgba(56,74,43,0.1); color: var(--ink-soft); }

/* ---------- Forms ----------
   The site has no form fields of its own: registration and contact both open
   one Google Form (link in js/config.js). This card is the invitation to it. */

.form-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(56, 74, 43, 0.08);
}

.form-card--cta p {
  color: var(--ink-soft);
  margin-bottom: 26px;
}

/* ---------- Contact ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px;
  align-items: start;
}

.contact-info-item {
  display: flex;
  gap: 16px;
  margin-bottom: 26px;
}

.contact-info-item .icon-badge {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--green-pale);
  display: flex;
  align-items: center;
  justify-content: center;
}

.social-row {
  display: flex;
  gap: 14px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.social-row a {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid rgba(56, 74, 43, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.social-row a:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }

.social-row img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

/* Smaller, tighter version for the dark footer. The .footer-col prefix is
   needed to outrank `.footer-col a { display: block }` further down. */
.social-row--footer { margin-top: 0; gap: 10px; }
.footer-col .social-row--footer a {
  display: flex;
  width: 40px;
  height: 40px;
  background: rgba(247, 241, 222, 0.94);
  border-color: rgba(247, 241, 222, 0.28);
  box-shadow: none;
  margin-bottom: 0;
  transition: transform 0.15s ease, background 0.15s ease;
}
.footer-col .social-row--footer a:hover {
  background: var(--white);
  transform: translateY(-2px);
}
.social-row--footer img { width: 22px; height: 22px; }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--green-deep);
  color: #cdd8bc;
  padding: 56px 0 28px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--cream-soft);
  font-size: 1.1rem;
  margin-bottom: 12px;
}
.footer-brand img { width: 40px; height: 40px; object-fit: contain; }

.footer-col h4 {
  color: var(--cream-soft);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}

.footer-col a,
.footer-col p {
  display: block;
  color: #cdd8bc;
  margin-bottom: 10px;
}
.footer-col a:hover { color: var(--amber); }

.footer-bottom {
  border-top: 1px solid rgba(205, 216, 188, 0.18);
  padding-top: 22px;
  font-size: 0.85rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---------- Page hero (inner pages) ---------- */

.page-hero {
  padding: 56px 0 12px;
  text-align: center;
}
/* The page title stacked three spacings on top of the first section heading
   (48 + 24 + 56 = 128px of air). Drop the section-head margin here and pull
   the next section up. */
.page-hero .section-head {
  max-width: none;   /* the title needs the full width to stay on one line */
  margin: 0 auto;
}
/* the intro paragraph keeps a comfortable measure */
.page-hero .section-head p { max-width: 780px; margin-left: auto; margin-right: auto; }
.page-hero + .section { padding-top: 36px; }
/* When the title is the only thing in the hero, its own bottom margin is
   just more of the same gap. */
.page-hero .section-head h1:last-child { margin-bottom: 0; }

/* ---------- Atlas course detail hero ---------- */

.atlas-hero {
  padding: 64px 0 56px;
  color: #fff;
}
.atlas-hero--rust { background: var(--terracotta); }
.atlas-hero--forest { background: var(--green-deep); }
.atlas-hero--amber { background: var(--amber); color: var(--green-deep); }

.atlas-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.92rem;
  margin-bottom: 30px;
  opacity: 0.85;
  transition: opacity 0.15s ease, gap 0.15s ease;
}
.atlas-hero__back:hover { opacity: 1; gap: 10px; }

.atlas-hero__tag {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.24);
  padding: 6px 15px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.atlas-hero--amber .atlas-hero__tag { background: rgba(56, 74, 43, 0.14); }

.atlas-hero h1 {
  color: inherit;
  max-width: 780px;
  margin-bottom: 0;
}

.atlas-detail__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin: 28px 0 32px;
  font-size: 1rem;
  color: var(--ink-soft);
}
.atlas-detail__meta span { display: flex; align-items: center; gap: 8px; }

/* ---------- Course description page (atlas-1) ----------------------------
   Reproduces the course PDF as a web document: a sticky, clickable table of
   contents beside a cream "paper" column. Long-form copy is written in both
   languages in the HTML; the VI/EN switch sets <html lang>, which hides the
   other language here. */

html[lang="vi"] .lang-en,
html[lang="en"] .lang-vi { display: none !important; }

.atlas-hero__subtitle { font-weight: 500; }
.atlas-hero__lead {
  max-width: 760px;
  margin: 18px 0 0;
  font-size: 1.08rem;
  line-height: 1.6;
  opacity: 0.95;
}

.course-wrap { padding: 48px 0 88px; }

.course-layout {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  gap: 36px;
  align-items: start;
}

/* Sections land below the sticky header rather than under it. */
.course-doc [id], #toc { scroll-margin-top: 92px; }

.course-toc {
  position: sticky;
  top: 92px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  background: var(--cream-soft);
  border-radius: var(--radius-md);
  padding: 22px 20px 24px;
  box-shadow: var(--shadow-card);
}
.course-toc__title {
  font-size: 1.15rem;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--amber);
  display: inline-block;
}
.course-toc__list,
.course-toc__list ol { list-style: none; margin: 0; padding: 0; }
.course-toc__list ol { padding-left: 18px; margin: 2px 0 6px; }
.course-toc__list a {
  display: flex;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 8px;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--green-deep);
  transition: background 0.15s ease;
}
.course-toc__list > li > a { font-weight: 600; }
.course-toc__list ol a { color: var(--ink-soft); font-size: 0.86rem; }
.course-toc__list a:hover { background: rgba(176, 211, 143, 0.45); }
.course-toc__list a.is-active {
  background: var(--sage);
  color: var(--green-deep);
}
.toc-letter { color: var(--amber-dark); flex-shrink: 0; }
.course-toc__cta { width: 100%; margin-top: 18px; }

.course-doc {
  background: var(--cream-soft);
  border-radius: var(--radius-lg);
  padding: 44px 52px 52px;
  box-shadow: var(--shadow-soft);
  min-width: 0;
}

.course-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 28px;
  margin: 0 0 12px;
  padding: 16px 20px;
  background: var(--white);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--terracotta);
  font-size: 0.95rem;
}

.course-facts > span { display: block; }
.course-facts span span { display: inline; }
.course-facts strong { color: var(--green-deep); }

.doc-section { padding-top: 34px; }
.doc-section + .doc-section { border-top: 1px solid rgba(56, 74, 43, 0.14); margin-top: 30px; }

.doc-h2 {
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  color: var(--green-deep);
  margin-bottom: 18px;
}
.doc-h3 {
  font-size: 1.12rem;
  color: var(--green);
  margin: 26px 0 12px;
}
.doc-h3 em { font-weight: 400; color: var(--ink-soft); }
.doc-letter { color: var(--amber-dark); }

.course-doc p { color: var(--ink); }
.course-doc mark {
  background: none;
  color: var(--green);
  font-weight: 700;
}

.doc-list { margin: 0; padding-left: 1.2em; }
.doc-list li { margin-bottom: 10px; line-height: 1.65; }
.doc-list li::marker { color: var(--green); }
.doc-list em { color: var(--ink-soft); }

.doc-top {
  display: inline-block;
  margin-top: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--amber-dark);
}
.doc-top:hover { text-decoration: underline; }

/* b. Course goals — the PDF's 3-column table, as columns that stack on phones. */
.goal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1.5px solid var(--green-deep);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--white);
}
.goal-col + .goal-col { border-left: 1.5px solid var(--green-deep); }
.goal-col h4 {
  margin: 0;
  padding: 12px 16px;
  text-align: center;
  font-size: 1rem;
  background: var(--sage);
  border-bottom: 1.5px solid var(--green-deep);
}
.goal-col ul { margin: 0; padding: 14px 18px 16px 34px; }
.goal-col li { margin-bottom: 12px; font-size: 0.95rem; line-height: 1.55; }
.goal-col li:last-child { margin-bottom: 0; }

/* Tables (fees + syllabus) */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.fee-table,
.syllabus {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  font-size: 0.95rem;
}
.fee-table th, .fee-table td,
.syllabus th, .syllabus td {
  border: 1.5px solid var(--green-deep);
  padding: 11px 14px;
  vertical-align: middle;
}
.fee-table { min-width: 560px; }
.fee-table th { background: var(--sage); }
.fee-table td:not(:first-child),
.fee-table th:not(:first-child) { text-align: center; }
.fee-table td.yes { color: var(--green); font-weight: 700; font-size: 1.15rem; }
.fee-table td.no { color: var(--ink-soft); }
.fee-table .tier-1 { color: #b85c00; }
.fee-table .tier-2 { color: var(--green); }
.fee-table .tier-3 { color: #1f5fc4; }
.fee-table .price-row td { font-weight: 700; white-space: nowrap; }
.fee-table .price-row td:first-child { font-weight: 400; }

.doc-note {
  margin-top: 18px;
  padding: 16px 20px;
  border-radius: var(--radius-sm);
  background: rgba(176, 211, 143, 0.35);
  border-left: 4px solid var(--green);
  color: var(--green-deep);
}
.doc-note ol { margin: 8px 0 0; padding-left: 1.3em; }
.doc-note li { margin-bottom: 6px; }
.doc-note a,
.course-doc p a,
.doc-contact a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.doc-note--inline { margin-top: 16px; }

/* D. Feedback — the PDF's linked file chip */
.file-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px 9px 10px;
  background: var(--white);
  border: 1px solid rgba(56, 74, 43, 0.18);
  border-radius: 999px;
  font-weight: 600;
  color: var(--green-deep);
  box-shadow: var(--shadow-card);
  transition: transform 0.15s ease;
}
.file-chip:hover { transform: translateY(-2px); }
.file-chip__icon {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: #d93025;
  color: #fff;
  border-radius: 5px;
  padding: 3px 6px;
}

/* E. Syllabus */
.syllabus th { background: var(--sage); text-align: left; }
.syllabus td { vertical-align: top; }
.syllabus .syl-num { text-align: center; font-weight: 700; color: var(--amber-dark); width: 54px; }
.syllabus .syl-topic { font-weight: 700; color: var(--green-deep); width: 22%; }
.syllabus .syl-body p { margin: 0 0 8px; }
.syllabus .syl-body p:last-child { margin-bottom: 0; }
.syllabus .syl-take { width: 22%; color: var(--green); font-style: italic; }
.syllabus .syl-bonus td { background: rgba(255, 199, 0, 0.1); }

/* F. Instructor */
.mentor {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.mentor__photo {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}
.mentor__body h4 { color: var(--green); margin: 0 0 12px; font-size: 1.02rem; }

/* Closing call to register */
.doc-register {
  margin-top: 44px;
  padding: 34px 32px;
  text-align: center;
  background: var(--sage);
  border-radius: var(--radius-lg);
}
.doc-register h2 { margin-bottom: 10px; }
.doc-register p { max-width: 560px; margin-left: auto; margin-right: auto; }
.btn--lg { padding: 16px 44px; font-size: 1.1rem; margin: 8px 0 20px; }
.doc-contact { font-size: 0.9rem; color: var(--ink-soft); margin-bottom: 0; }

@media (max-width: 1000px) {
  .course-layout { grid-template-columns: 1fr; }
  .course-toc { position: static; max-height: none; }
  .course-toc__cta { display: none; }
  .course-doc { padding: 32px 28px 36px; }
}

@media (max-width: 760px) {
  .course-facts { grid-template-columns: 1fr; }
  .goal-grid { grid-template-columns: 1fr; }
  .goal-col + .goal-col { border-left: none; border-top: 1.5px solid var(--green-deep); }
  .mentor { grid-template-columns: 1fr; }
  .mentor__photo { max-width: 280px; }

  /* Syllabus: each session becomes its own card on phones. */
  .syllabus, .syllabus tbody, .syllabus tr, .syllabus td { display: block; width: auto; }
  .syllabus thead { display: none; }
  .syllabus { background: none; }
  .syllabus tr {
    background: var(--white);
    border: 1.5px solid var(--green-deep);
    border-radius: var(--radius-sm);
    margin-bottom: 14px;
    overflow: hidden;
  }
  .syllabus td { border: none; padding: 8px 16px; }
  .syllabus .syl-num { text-align: left; padding-top: 14px; width: auto; }
  .syllabus .syl-num::before { content: "Buổi "; }
  html[lang="en"] .syllabus .syl-num::before { content: "Session "; }
  .syllabus .syl-topic { width: auto; font-size: 1.05rem; padding-top: 0; }
  .syllabus .syl-take { width: auto; padding-bottom: 14px; }
  .syllabus .syl-take:empty { display: none; }
  .syllabus .syl-take:not(:empty) {
    border-top: 1px dashed rgba(56, 74, 43, 0.25);
    margin: 4px 16px 0;
    padding: 10px 0 14px;
  }
}

@media (max-width: 560px) {
  .course-wrap { padding: 28px 0 60px; }
  .course-doc { padding: 26px 18px 30px; border-radius: var(--radius-md); }
  .doc-register { padding: 26px 18px; }
}

/* ---------- Homepage: hero (hand illustration + overlaid content) ----------
   The stage reproduces the 1366 x 677 design frame. Above 1180px it scales
   with the viewport; below that it holds its size and is anchored right, so
   the hand is clipped on the left and the finger labels stay put. All sizes
   inside the stage are in cqw (1% of stage width), so text and hand always
   scale together and never drift apart.
   ------------------------------------------------------------------------ */

.hero-hand {
  position: relative;
  overflow: hidden;
  background: var(--green);
  container-type: inline-size;
}

.hero-stage {
  position: relative;
  width: max(100%, 1180px);
  margin-left: min(0px, calc(100% - 1180px));
  aspect-ratio: 1366 / 677;
  container-type: inline-size;
  overflow: hidden;
}

.hero-stage__img {
  position: absolute;
  left: 0;
  top: -8.12%;
  width: 100%;
  height: auto;
  display: block;
}

.hero-stage__label {
  position: absolute;
  width: 46%;
  transform: translateX(-50%);
  text-align: center;
  transition: transform 0.15s ease;
}
.hero-stage__label:hover { transform: translateX(-50%) translateY(-2px); }

.hero-stage__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.62cqw;
  line-height: 1.1;
  color: #2d5903;
}

.hero-stage__sub {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.37cqw;
  line-height: 1.2;
  color: #2d5903;
  margin-top: 0.50cqw;
}

.hero-stage__label--1 { top: 7.65%;  left: 61.46%; }
.hero-stage__label--2 { top: 28.46%; left: 61.38%; }
.hero-stage__label--3 { top: 49.07%; left: 60.61%; }
.hero-stage__label--4 { top: 70.82%; left: 60.65%; }

/* Identity text is positioned against the visible hero box, not the stage,
   so it stays on screen (and on the palm) as the hand gets clipped. */
.hero-identity {
  position: absolute;
  top: 26.37%;
  left: 25.44%;
  width: 31%;
  transform: translateX(-50%);
  text-align: center;
  font-family: var(--font-display);
  font-size: 2.50cqw;
  line-height: 1.35;
  color: #2d5903;
}
.hero-identity strong { font-weight: 700; }
.hero-identity .accent { color: #b27602; }

/* Shown only on narrow screens, where labels can't sit on the fingers */
.hero-links-mobile { display: none; }
.hero-links-mobile a {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid rgba(245, 244, 221, 0.25);
}
.hero-links-mobile a:last-child { border-bottom: none; }
.hero-links-mobile strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--cream-soft);
  margin-bottom: 2px;
}
.hero-links-mobile span {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--sage-soft);
}

/* ---------- Cascading cards (problem statement / support boxes) ---------- */

.cascade {
  max-width: 900px;
  margin: 0 auto;
}

.cascade-card {
  background: var(--cream-soft);
  border-radius: var(--radius-lg);
  padding: 30px 34px;
  display: flex;
  gap: 22px;
  align-items: flex-start;
  box-shadow: var(--shadow-card);
  margin-bottom: 28px;
}

.cascade-card:nth-child(2) { margin-left: 8%; max-width: 92%; }
.cascade-card:nth-child(3) { margin-left: 0; max-width: 96%; }
.cascade-card:last-child { margin-bottom: 0; }

.cascade-num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 44px;
  background: var(--amber);
  color: var(--green-deep);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  border-radius: 46% 54% 58% 42% / 52% 46% 54% 48%;
  transform: rotate(-4deg);
}

.cascade-card h3 {
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.15rem, 2.33vw, 2rem);   /* measured from the design */
  line-height: 1.25;
  color: var(--lab-ink);
}
.cascade-card h3 .accent { color: var(--amber-dark); font-style: italic; }

.cascade-card p { margin: 0; color: var(--ink); }
.cascade-card p strong { color: var(--green-deep); }

/* The block beside the number badge takes the rest of the card's width. */
.cascade-card > div { flex: 1; min-width: 0; }

/* ---------- Homepage: section shells ---------- */

.section--sage { background: var(--sage); }

/* Whole-page green, matching the homepage's sections. */
.page--sage { background: var(--sage); }

.two-tone-heading {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
}
.two-tone-heading .line1 { display: block; color: var(--green-deep); }
.two-tone-heading .line2 { display: block; color: var(--amber-dark); }

/* One size for every big section title, measured from the design render:
   "Vấn đề của thế giới hiện đại" and "Chuỗi khoá học đang mở" both come out
   at ~63px on a 1366px-wide screen, so they all share this. */
/* Section headings sit a clear step below the page name: smaller and bold,
   in the same style as the big question on the learning lab page. */
.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.45rem, 3.2vw, 2.5rem);
  line-height: 1.35;
  color: var(--lab-ink);
}
.section-title .sketch-underline,
.section-title .accent,
.page-title .accent,
.tree-title .accent { color: var(--amber-dark); }

/* Page titles: same family and two-tone colouring as the section titles, but
   clearly larger so the page name leads and the section headings follow. */
.page-title {
  font-family: var(--font-display);
  font-weight: 400;
  /* Big, but never wrapping: the last term is the width the line has to fit
     into, divided by how many ems wide the title is (--title-em, set per page
     and measured in Lora, with a little slack). */
  --title-em: 12;
  /* ...but never smaller than the headings underneath it. */
  font-size: max(1.6rem, min(6.2vw, 5.6rem, calc(min(100vw - 48px, 1120px) / var(--title-em))));
  line-height: 1.15;
  color: var(--lab-ink);
}

/* The hand-drawn stroke under "Vấn đề", lifted from the design render. */
.sketch-underline {
  background: url("../images/heading-underline.png") left bottom / 100% auto no-repeat;
  padding-bottom: 0.22em;
}

/* ---------- Homepage: Learning Lab teaser ---------- */

/* The circle is the hand-drawn one from the design, lifted out of the render
   as a transparent PNG — a CSS ellipse can't carry the brush texture or the
   tail that loops past the start. Type sizes below are measured from that
   same render: the circled words run ~37% of the page width. */
.lab-teaser__badge {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 4.95vw, 4.3rem);
  line-height: 1.05;
  color: #d78404;
  background: url("../images/lab-circle.png") center / 100% 100% no-repeat;
  padding: 0.57em 0.40em;
  margin-bottom: -0.12em;   /* let the circle's tail sit close to the title */
}

.lab-teaser__title {
  font-size: clamp(2rem, 4.7vw, 4.4rem);   /* same size as every section title */
  margin-left: 5%;   /* the design insets it from the circle's left edge */
  font-weight: 400;
  line-height: 1.12;
  margin-top: 0;
  color: var(--lab-ink);
}

/* Laid out from the homepage design render: the title sits left and the
   intro paragraph fills the right-hand side, which used to be empty. */
.lab-teaser__top {
  display: grid;
  grid-template-columns: 48% 47%;
  justify-content: space-between;
  align-items: start;
  gap: 24px;
}

.lab-teaser__body {
  margin: 10px 0 0;
  text-align: center;
  font-style: italic;
  font-size: clamp(0.98rem, 1.6vw, 1.4rem);
  line-height: 1.55;
  color: var(--lab-ink);
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(56, 74, 43, 0.35);
}
.lab-teaser__body .accent { color: var(--amber-dark); font-style: italic; }

/* The question block is indented from the left, not centred. */
.lab-teaser__qa { margin-left: 13.5%; margin-top: 5%; }  /* wide enough for the question to set on two lines, as in the design */
.lab-teaser__cta { text-align: center; margin-top: 5%; }

.lab-teaser__point {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.05rem, 2vw, 1.7rem);
  color: var(--lab-ink);
  margin: 6.5% 0 0;
}
.lab-teaser__point::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--amber);
  flex-shrink: 0;
}

.lab-teaser__lead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.05rem, 2vw, 1.7rem);
  color: var(--cream-soft);
  margin-bottom: 8px;
}

.lab-teaser__question {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.2vw, 1.95rem);
  line-height: 1.4;
  color: var(--lab-ink);
}

/* ---------- Homepage: course preview cards ---------- */

.course-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 40px;
}

.course-preview {
  padding-top: 4px;
}

.course-preview__tag {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--amber-dark);
}

.course-preview__title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--lab-ink);
  border-bottom: 1px solid rgba(56, 74, 43, 0.25);
  padding-bottom: 14px;
  margin: 4px 0 14px;
}

.course-preview__body {
  color: var(--lab-ink);
  margin-bottom: 14px;
}

.course-preview__meta {
  list-style: disc;
  margin: 0;
  padding-left: 1.1em;
  font-size: 0.92rem;
  color: var(--lab-ink);
}
.course-preview__meta li { margin-bottom: 6px; }
.course-preview__meta li::marker { color: var(--lab-ink); }
.course-preview__meta strong { color: var(--lab-ink); }

/* ---------- Homepage: projects teaser ---------- */

.projects-teaser__list {
  list-style: none;
  margin: 24px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(56, 74, 43, 0.2);
}
.projects-teaser__list li {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  padding: 8px 0;
}
.projects-teaser__list li::before {
  content: "• ";
  color: var(--amber-dark);
}

/* The daisy from the homepage design, standing on the bottom edge of the
   "đang ấp ủ" section to fill the empty right side. Its stem is cropped flat
   in the artwork, so it must sit flush with the section's bottom. */
.has-daisy { position: relative; overflow: hidden; }
.has-daisy .container { position: relative; z-index: 1; }
/* Keep the words clear of the flower on the right (the inline 640px cap on
   the paragraph isn't enough on mid-width screens). */
.has-daisy .container > p,
.has-daisy .projects-teaser__list { max-width: min(600px, 62%) !important; }
.daisy {
  position: absolute;
  bottom: 0;
  right: max(16px, calc(50% - 560px + 24px));
  width: clamp(240px, 30vw, 400px);
  height: auto;
  pointer-events: none;
}

/* Too narrow to sit beside the text: shrink it and reserve room underneath,
   so it still stands on the section's bottom edge without covering words. */
@media (max-width: 900px) {
  /* Too narrow for the two-column design: stack it and drop the indent. */
  .lab-teaser__top { grid-template-columns: 1fr; }
  .lab-teaser__body { text-align: left; }
  .lab-teaser__qa { margin-left: 0; }
  .lab-teaser__badge { font-size: clamp(1.6rem, 8vw, 3rem); }
  .lab-teaser__title { font-size: clamp(1.9rem, 9vw, 3.4rem); }

  .section.has-daisy { padding-bottom: 190px; } /* beats the later mobile .section padding */
  .has-daisy .container > p,
  .has-daisy .projects-teaser__list { max-width: none !important; }
  .daisy { width: 200px; right: 24px; }
}

/* ---------- Homepage: support teaser ---------- */

.support-teaser {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.support-teaser__label {
  display: block;
  color: var(--ink);
  margin-bottom: 8px;
}
/* Plain text links only (the email) — the donation box and the social icons
   bring their own styling. */
.support-teaser > div > a:not(.donate-link) {
  display: block;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--amber-dark);
  color: var(--green-deep);
}

.support-teaser .social-row { margin-top: 4px; }

/* The donation box illustration, linking to the bank details on Ủng hộ. */
.donate-link {
  display: inline-block;
  transition: transform 0.18s ease;
}
.donate-link img {
  width: 132px;
  height: auto;
  filter: drop-shadow(0 6px 10px rgba(56, 74, 43, 0.18));
}
.donate-link:hover { transform: translateY(-3px) rotate(-2deg); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Learning Lab: 5-layer tree band ------------------------------
   Reproduces page 7 of the partnership deck. The design frame is 1920px
   wide; every measurement below is that frame's value expressed in cqw
   (1% of the frame), so the whole band scales as one piece.
   Measured from the source: pills start 92px in (4.79%), run to 979 /
   1151 / 1367 / 1564 / 1708px wide, text sits 129px inside the pill
   (6.72%) and the question column starts 533px in (27.76%).
   ------------------------------------------------------------------------ */

.tree-band {
  background-image: url("../images/tree-5-layers.jpg");
  background-size: cover;
  background-position: center;
}

.tree-frame {
  max-width: 1920px;
  margin: 0 auto;
  container-type: inline-size;
}

.tree-inner { padding: 5.3cqw 0 3.1cqw; }

.tree-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3.83cqw;
  line-height: 1.15;
  color: var(--lab-ink);
  margin: 0 0 1.1cqw 5.9cqw;
}

.tier {
  position: relative;
  margin-left: 4.79cqw;
  margin-bottom: 1.2cqw;
  border-radius: 1cqw;
  padding: 1.25cqw 1.6cqw 1.45cqw 6.72cqw;
}
.tier:last-child { margin-bottom: 0; }

.tier--1 { width: 51.0cqw; background: #73944f; color: #fffae8; }
.tier--2 { width: 59.9cqw; background: #8eb558; color: #fffae8; }
.tier--3 { width: 71.2cqw; background: rgba(170, 209, 137, 0.80); color: #51792b; }
.tier--4 { width: 81.5cqw; background: rgba(209, 229, 183, 0.84); color: #51792b; }
.tier--5 { width: 89.0cqw; background: rgba(247, 237, 215, 0.86); color: #51792b; }

.tier__badge {
  position: absolute;
  left: 0.9cqw;
  top: 50%;
  width: 4.17cqw;
  height: 2.92cqw;
  transform: translateY(-50%) rotate(-5deg);
  background: #ffc700;
  color: #51792b;
  border-radius: 46% 54% 58% 42% / 52% 46% 54% 48%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35cqw;
  letter-spacing: 0.04em;
}

.tier__head {
  display: grid;
  grid-template-columns: 21.04cqw 1fr;
  align-items: baseline;
}

.tier__name {
  margin: 0;
  color: inherit;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.52cqw;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tier__q {
  margin: 0;
  color: inherit;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.29cqw;
  line-height: 1.3;
}

.tier__d {
  margin: 0.3cqw 0 0;
  color: inherit;
  font-size: 1.286cqw;
  line-height: 1.45;
}

/* ---------- Support page boxes ---------- */

/* Bank transfer block inside support box 01: QR beside the written details,
   so someone can either scan or copy the numbers. */
.bank-row {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 20px;
  flex-wrap: wrap;
}

/* height:auto so the QR keeps its own proportions — the VietQR export is
   taller than it is wide (it carries the VietQR/napas strip underneath), and
   a fixed square box would letterbox it and shrink the code itself. */
.bank-qr {
  width: 190px;
  height: auto;
  flex-shrink: 0;
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 10px;
  box-shadow: var(--shadow-card);
}

.bank-details { margin: 0; }
.bank-details dt {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  margin-top: 12px;
}
.bank-details dt:first-child { margin-top: 0; }
.bank-details dd {
  margin: 2px 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.12rem;
  color: var(--green-deep);
}


/* ---------- Past activities: list + article pages ---------- */

.event-list {
  display: grid;
  gap: 54px;
  margin-top: 40px;
}

.event-card {
  display: grid;
  grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  color: inherit;
}

.event-card__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  transition: transform 0.18s ease;
}
.event-card:hover .event-card__img { transform: translateY(-3px); }

.event-card__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.5vw, 2.1rem);
  line-height: 1.25;
  color: var(--lab-ink);
  margin: 0 0 10px;
}
.event-card:hover .event-card__title { text-decoration: underline; text-underline-offset: 5px; }

.event-card__date {
  color: var(--lab-ink);
  margin: 0 0 14px;
}
.event-card__excerpt {
  color: var(--lab-ink);
  margin: 0 0 24px;
}
.event-card__cta { font-family: var(--font-display); }

/* Article pages (one per event) */
.article { max-width: 880px; }
.article__back {
  display: inline-block;
  font-weight: 600;
  color: var(--green);
  margin-bottom: 26px;
}
.article__back:hover { text-decoration: underline; }

.article__title {
  font-weight: 400;
  font-size: clamp(2rem, 4.7vw, 4.4rem);
  line-height: 1.15;
  margin-bottom: 14px;
}
.article__date {
  color: var(--lab-ink);
  margin-bottom: 28px;
}

.article__body { color: var(--lab-ink); }
.article__body p { margin-bottom: 1.15em; text-align: justify; }
.article__quote { font-style: italic; }
.article__icon { font-style: normal; margin-right: 4px; }
.article__list { margin: 0 0 1.15em; padding-left: 1.3em; }
.article__list li { margin-bottom: 10px; }
.article__list li::marker { color: var(--amber); }

/* Photo carousel at the foot of each article */
.carousel {
  position: relative;
  margin-top: 44px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: rgba(56, 74, 43, 0.12);
}
.carousel__viewport { position: relative; aspect-ratio: 4 / 3; }
.carousel__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.carousel__slide.is-active { opacity: 1; pointer-events: auto; }
.carousel__slide img { width: 100%; height: 100%; object-fit: cover; }

.carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border: none;
  border-radius: 50%;
  background: rgba(247, 241, 222, 0.85);
  color: var(--green-deep);
  font-family: var(--font-display);
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease;
}
.carousel__nav:hover { background: var(--white); }
.carousel__prev { left: 14px; }
.carousel__next { right: 14px; }

.carousel__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.carousel__dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(247, 241, 222, 0.6);
  cursor: pointer;
}
.carousel__dots button.is-active { background: var(--cream-soft); }

@media (max-width: 760px) {
  .event-card { grid-template-columns: 1fr; gap: 18px; }
  .event-list { gap: 42px; }
  .article__body p { text-align: left; }
  .carousel__nav { width: 40px; height: 40px; font-size: 1.5rem; }
}

/* ---------- Utilities ---------- */

.mt-0 { margin-top: 0; }
.text-center { text-align: center; }

/* ---------- Responsive ---------- */

/* Below the design's comfortable range the cqw type would get too small to
   read, so the tree band switches to fixed sizes (the cascade is kept). */
@media (max-width: 1200px) {
  .tree-inner { padding: 44px 20px 46px; }
  .tree-title { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin: 0 0 22px; }
  .tier {
    margin-left: 0;
    margin-bottom: 14px;
    border-radius: 20px;
    padding: 18px 22px 20px 84px;
  }
  .tier--1 { width: 64%; }
  .tier--2 { width: 73%; }
  .tier--3 { width: 82%; }
  .tier--4 { width: 91%; }
  .tier--5 { width: 100%; }
  .tier__badge {
    left: 16px;
    top: 20px;
    width: 54px;
    height: 40px;
    font-size: 1rem;
    transform: rotate(-5deg);
  }
  .tier__head { display: block; }
  .tier__name { font-size: 1.05rem; }
  .tier__q { font-size: 0.95rem; margin-top: 2px; }
  .tier__d { font-size: 0.95rem; margin-top: 8px; }
}

@media (max-width: 760px) {
  .tier--1, .tier--2, .tier--3, .tier--4, .tier--5 { width: 100%; }
  .tier { padding: 16px 18px 18px 72px; }
  .tier__badge { left: 12px; top: 18px; width: 48px; height: 36px; font-size: 0.95rem; }
}


/* The stage stops shrinking at 1180px and is pinned right, so from there down
   the palm is clipped away while the identity statement — positioned against
   the window, not the stage — drifts across the fingers. So the moment
   clipping starts, move it below the hand. The labels stay on the fingers. */
@media (max-width: 1180px) {
  .hero-identity {
    position: static;
    width: auto;
    max-width: 760px;
    transform: none;
    text-align: left;
    padding: 24px 24px 28px;
    font-size: clamp(1rem, 2.2vw, 1.35rem);
    color: var(--cream-soft);
  }
  .hero-identity strong { color: var(--cream-soft); }
  .hero-identity .accent { color: var(--amber); }
}

@media (max-width: 900px) {
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--cream-soft);
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 24px;
    gap: 16px;
    box-shadow: var(--shadow-card);
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-toggle { display: block; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { order: -1; }
  .hero-art img { max-width: 260px; }
  .grid--3 { grid-template-columns: 1fr 1fr; }
  .atlas-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .hero-hand__identity { top: 34%; width: 45%; }
  .hero-hand__label { width: 32%; }
  .course-preview-grid { grid-template-columns: 1fr 1fr; }
  .support-teaser { grid-template-columns: 1fr 1fr; }
  .cascade-card:nth-child(2),
  .cascade-card:nth-child(3) { margin-left: 0; max-width: 100%; }
}

@media (max-width: 560px) {
  /* Stack the QR above the account details rather than squeezing both. */
  .bank-row { gap: 18px; }
  .bank-qr { width: 165px; }
  .cascade-card { padding: 24px 22px; gap: 16px; }
}

@media (max-width: 680px) {
  .grid--3 { grid-template-columns: 1fr; }
  .grid--2 { grid-template-columns: 1fr; }
  .atlas-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .section { padding: 60px 0; }
  /* Too narrow to keep text on the fingers — show the hand, then stack
     the identity statement and the four links underneath it. */
  .hero-hand { display: flex; flex-direction: column; }
  .hero-stage {
    order: 1;
    width: 100%;
    margin-left: 0;
    aspect-ratio: 1640 / 700;
  }
  .hero-stage__img { position: absolute; top: 0; left: 0; }
  .hero-stage__label { display: none; }
  .hero-identity {
    position: static;
    order: 2;
    width: auto;
    transform: none;
    text-align: left;
    padding: 22px 24px 4px;
    font-size: 1.1rem;
    color: var(--cream-soft);
  }
  .hero-identity .accent { color: var(--amber); }
  .hero-links-mobile { order: 3; display: block; padding: 0 24px 28px; }
  .course-preview-grid { grid-template-columns: 1fr; }
  .support-teaser { grid-template-columns: 1fr; gap: 22px; }
  .lab-teaser__lead, .lab-teaser__question { padding-left: 0; }
  .layer-row { flex-direction: column; align-items: flex-start; gap: 8px; width: 100% !important; margin-left: 0 !important; }
}