/* ============================================================
   LEARNING MASTER — canonical stylesheet
   Data-driven personal learning notebook.
   Home and Travel are intentionally untouched.
   ============================================================ */

.learning-page{
  margin:0;
  background:#f4efe5;
  color:#102826;
}
.learning-page *{box-sizing:border-box}

.learning-header{
  position:relative;
  z-index:20;
  height:72px;
  padding:0 4.5vw;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#0c2a26;
  color:#fff;
}
.learning-header .brand{
  color:#fff;
  text-decoration:none;
  font:700 15px/1 Georgia,serif;
  letter-spacing:.12em;
}
.learning-header nav{display:flex;gap:28px}
.learning-header nav a{
  color:rgba(255,255,255,.82);
  text-decoration:none;
  text-transform:uppercase;
  font:700 10px/1 Arial,sans-serif;
  letter-spacing:.08em;
}
.learning-header nav a.active,
.learning-header nav a:hover{color:#efc15f}

.learning-overline{
  color:#0b7a74;
  font:800 11px/1.1 Arial,sans-serif;
  letter-spacing:.16em;
  text-transform:uppercase;
}

/* ---------------- HERO ---------------- */
.learning-hero{
  position:relative;
  height:400px;
  min-height:400px;
  overflow:hidden;
  padding:30px 7vw;
  display:grid;
  grid-template-columns:45% 55%;
  align-items:center;
  background:
    radial-gradient(circle at 72% 34%,rgba(239,193,95,.11),transparent 24%),
    linear-gradient(112deg,#0a2925 0%,#0b302a 53%,#153a32 100%);
  color:#fff;
}
.learning-hero::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:1px;
  background:linear-gradient(90deg,transparent,#efc15f 45%,transparent);
  opacity:.48;
}
.learning-hero-copy{position:relative;z-index:2;max-width:700px}
.learning-hero .learning-overline{color:#efc15f}
.learning-hero h1{
  margin:12px 0 10px;
  font:400 clamp(4rem,6vw,6.2rem)/.86 Georgia,serif;
  letter-spacing:-.055em;
}
.learning-hero-copy p{
  margin:0;
  max-width:590px;
  color:rgba(255,255,255,.74);
  font:400 clamp(1.05rem,1.45vw,1.35rem)/1.45 Georgia,serif;
}

/* multilingual learning mark */
.learning-mark{
  position:relative;
  width:min(330px,27vw);
  aspect-ratio:1;
  justify-self:center;
  isolation:isolate;
}
.learning-mark::before{
  content:"";
  position:absolute;
  inset:2%;
  border-radius:50%;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(
    circle,
    rgba(239,193,95,.16) 0%,
    rgba(214,181,84,.11) 28%,
    rgba(88,143,103,.10) 48%,
    rgba(88,143,103,.045) 64%,
    rgba(88,143,103,0) 78%
  );
  filter:blur(14px);
  transform:scale(1.18);
}
.learning-mark-orbit{
  position:absolute;
  inset:9%;
  border:1px solid rgba(239,193,95,.28);
  border-radius:50%;
  box-shadow:0 0 34px rgba(239,193,95,.07),0 0 58px rgba(96,150,106,.055);
}
.learning-mark-orbit::before,
.learning-mark-orbit::after{
  content:"";
  position:absolute;
  inset:17%;
  border:1px solid rgba(255,255,255,.12);
  border-radius:50%;
}
.learning-mark-orbit::after{inset:36%;border-color:rgba(239,193,95,.38)}
.learning-mark-center{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:72px;height:72px;
  border-radius:50%;
  display:grid;place-items:center;
  background:#efc15f;
  color:#0b302a;
  font:400 48px/1 Georgia,serif;
}
.learning-script{
  position:absolute;
  color:#fff;
  white-space:nowrap;
  text-shadow:0 12px 28px rgba(0,0,0,.18);
}
.learning-script-1{top:5%;left:31%;font:400 34px/1.1 Georgia,serif}
.learning-script-2{top:39%;right:-2%;font:400 42px/1.15 Georgia,serif;direction:rtl}
.learning-script-3{bottom:8%;left:30%;font:400 34px/1.1 Georgia,serif}
.learning-script-4{top:43%;left:-4%;font:700 15px/1 Arial,sans-serif;letter-spacing:.18em;color:#efc15f}

/* ---------------- LANGUAGES: QUIET STRIP ---------------- */
.learning-language-strip{
  padding:32px 7vw 30px;
  display:grid;
  grid-template-columns:minmax(240px,.72fr) 1.8fr;
  gap:54px;
  align-items:start;
  background:#f7f2e9;
  border-bottom:1px solid rgba(16,40,38,.10);
}
.learning-language-strip-title p{
  margin:12px 0 0;
  max-width:390px;
  color:#66706b;
  font:400 14px/1.55 Arial,sans-serif;
}
.language-note-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  border-top:1px solid rgba(16,40,38,.18);
}
.language-note-row{
  min-width:0;
  padding:5px 28px 20px 0;
  color:#102826;
  text-decoration:none;
  border-bottom:1px solid rgba(16,40,38,.18);
}
.language-note-row + .language-note-row{
  padding-left:28px;
  border-left:1px solid rgba(16,40,38,.13);
}
.language-note-name{
  display:flex;
  align-items:baseline;
  gap:14px;
  margin:17px 0 7px;
}
.language-note-name strong{font:400 28px/1 Georgia,serif}
.language-note-native{color:#0b7a74;font-size:22px;opacity:.82}
.language-note-row p{
  margin:0 0 11px;
  color:#68716c;
  font:400 13px/1.5 Arial,sans-serif;
}
.language-note-link{
  color:#b9851f;
  font:800 10px/1 Arial,sans-serif;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.language-note-row:hover .language-note-link{color:#0b7a74}

/* ---------------- RABBIT HOLES ---------------- */
.learning-section{padding:54px 7vw 58px}
.learning-rabbits{
  display:grid;
  grid-template-columns:30% 70%;
  min-height:350px;
  padding-top:0;
  padding-bottom:0;
  background:#0b2d28;
  color:#fff;
}
.rabbit-copy{
  padding:52px 4vw 52px 0;
  align-self:center;
}
.rabbit-copy .learning-overline{color:#efc15f}
.rabbit-copy h2{
  margin:10px 0 12px;
  color:#fff;
  font:400 clamp(2.8rem,4.4vw,4.8rem)/.96 Georgia,serif;
  letter-spacing:-.035em;
}
.rabbit-copy p{
  margin:0;
  color:rgba(255,255,255,.62);
  font:400 16px/1.55 Arial,sans-serif;
}
.rabbit-cloud{
  min-height:350px;
  padding:38px 6% 34px;
  border-left:1px solid rgba(255,255,255,.13);
  display:flex;
  flex-wrap:wrap;
  align-content:center;
  align-items:center;
  justify-content:space-around;
  gap:24px 34px;
}
.rabbit-item{
  display:inline-block;
  flex:0 1 auto;
  max-width:44%;
  text-decoration:none;
  color:#fff;
  font-family:Georgia,serif;
  line-height:.98;
  text-align:center;
  transform:none;
  transition:color .2s ease,transform .2s ease;
}
.rabbit-item:hover{
  color:#efc15f;
  transform:scale(1.035);
}
.rabbit-item-title{display:block}
.rabbit-item-subtitle{
  display:block;
  margin-top:10px;
  color:#efc15f;
  font:700 clamp(.72rem,.9vw,.9rem)/1.3 Arial,sans-serif;
  letter-spacing:.03em;
}
.rabbit-large{font-size:clamp(2rem,3.15vw,3.7rem)}
.rabbit-medium{font-size:clamp(1.35rem,2.05vw,2.35rem)}
.rabbit-small{font-size:clamp(1rem,1.4vw,1.6rem);color:#efc15f}

/* ---------------- TEXTS / PERSONAL LIBRARY ---------------- */
.learning-texts{background:#e9dfce}
.learning-section-heading{
  max-width:580px;
  margin-bottom:28px;
}
.learning-section-heading-wide{
  max-width:none;
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:80px;
  align-items:end;
}
.learning-section-heading h2{
  margin:10px 0 12px;
  color:#0c2b27;
  font:400 var(--type-section)/1.04 Georgia,serif;
  letter-spacing:-.035em;
}
.learning-section-heading-wide > p{
  margin:0;
  padding-bottom:8px;
  max-width:500px;
  color:#102826;
  font:700 14px/1.55 Georgia,serif;
}
.text-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:10px;
}
.text-card{
  grid-column:span var(--text-span,4);
  min-height:158px;
  padding:20px 23px 18px;
  display:flex;
  flex-direction:column;
  text-decoration:none;
  background:#f8f3e9;
  color:#102826;
  border-top:3px solid #0b7a74;
  transition:background .2s ease,transform .2s ease;
}
.text-card:hover{background:#fffaf0;transform:translateY(-3px)}
.text-card h3{
  margin:13px 0 7px;
  font:400 clamp(1.5rem,1.9vw,2.15rem)/1 Georgia,serif;
}
.text-card p{
  margin:0 0 12px;
  max-width:95%;
  color:#56615b;
  font:400 13px/1.42 Arial,sans-serif;
}
.text-card > span:last-child{
  margin-top:auto;
  color:#d47855;
  font:800 10px/1 Arial,sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
}

/* Middle row accent: About-inspired muted plum; outer rows retain original cards. */
.text-card:nth-child(n+4):nth-child(-n+6){
  background:#59434e;
  color:#f8f2e7;
  border-top-color:#c79647;
}
.text-card:nth-child(n+4):nth-child(-n+6):hover{
  background:#634c58;
  transform:translateY(-3px);
}
.text-card:nth-child(n+4):nth-child(-n+6) .learning-overline{color:#e6b25c}
.text-card:nth-child(n+4):nth-child(-n+6) h3{color:#fffaf2}
.text-card:nth-child(n+4):nth-child(-n+6) p{color:rgba(255,255,255,.76)}
.text-card:nth-child(n+4):nth-child(-n+6) > span:last-child{color:#f0c27a}

/* ---------------- TOPIC SUBPAGES ---------------- */
.topic-hero{
  height:400px;
  min-height:400px;
  padding:72px 7vw;
  background:#0b2d28;
  color:#fff;
}
.topic-back{
  display:inline-block;
  margin-bottom:56px;
  color:#efc15f;
  text-decoration:none;
  font:800 10px/1 Arial,sans-serif;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.topic-native{
  float:right;
  margin:-10px 6vw 0 60px;
  color:rgba(255,255,255,.15);
  font:400 clamp(5rem,10vw,10rem)/.8 Georgia,serif;
}
.topic-hero h1{
  margin:12px 0;
  font:400 clamp(2.35rem,3.65vw,4.45rem)/1 Georgia,serif;
}
.topic-hero p{
  max-width:720px;
  color:rgba(255,255,255,.7);
  font:400 18px/1.55 Georgia,serif;
}
.topic-notes{padding:72px 7vw 100px;background:#f6f0e5}
.topic-note-grid{
  margin-top:28px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1px;
  background:rgba(16,40,38,.14);
}
.topic-note-grid article{min-height:220px;padding:30px;background:#f6f0e5}
.topic-note-grid span{color:#d47855;font:800 10px/1 Arial,sans-serif}
.topic-note-grid h2{margin:24px 0 10px;font:400 2rem/1 Georgia,serif}
.topic-note-grid p{color:#5e6762;font:400 14px/1.5 Arial,sans-serif}

/* ---------------- RESPONSIVE ---------------- */
@media(max-width:850px){
  .learning-header{height:64px;padding:0 22px}
  .learning-header nav{display:none}

  .learning-hero{
    height:auto;
    min-height:540px;
    padding:48px 24px 34px;
    display:block;
  }
  .learning-hero h1{font-size:4.4rem}
  .learning-mark{width:min(78vw,350px);margin:34px auto 0}

  .learning-language-strip{grid-template-columns:1fr;gap:22px;padding:34px 22px}
  .language-note-list{grid-template-columns:1fr}
  .language-note-row + .language-note-row{padding-left:0;border-left:0}

  .learning-rabbits{display:block;padding:46px 22px}
  .rabbit-copy{padding:0 0 28px}
  .rabbit-cloud{
    min-height:0;
    padding:30px 0 0;
    border-left:0;
    border-top:1px solid rgba(255,255,255,.13);
    gap:22px;
  }
  .rabbit-item{max-width:100%;transform:none}
  .rabbit-large{font-size:2.3rem}
  .rabbit-medium{font-size:1.65rem}

  .learning-section{padding:48px 22px}
  .learning-section-heading-wide{grid-template-columns:1fr;gap:10px}
  .text-grid{grid-template-columns:1fr}
  .text-card{grid-column:1/-1 !important;min-height:145px}

  .topic-hero{height:auto;min-height:0;padding:50px 22px}
  .topic-native{float:none;margin:20px 0;opacity:.3}
  .topic-note-grid{grid-template-columns:1fr}
}

/* ============================================================
   v220 BEAUTIFICATION — Learning landing page
   Visual refinement only: calmer hierarchy, quieter type,
   cleaner rhythm, unified paper palette.
   ============================================================ */

/* Keep the hero authoritative without letting the title dominate the page. */
.learning-hero h1{
  font-size:clamp(3.7rem,5.25vw,5.45rem);
  line-height:.9;
}
.learning-hero-copy p{
  font-size:clamp(1rem,1.25vw,1.22rem);
}

/* A slightly leaner language strip creates a quieter bridge from the hero. */
.learning-language-strip{
  padding-top:27px;
  padding-bottom:26px;
  gap:48px;
}
.language-note-name strong{font-size:26px}
.language-note-native{font-size:20px}

/* Rabbit holes: retain the constellation idea, but lower the volume. */
.learning-rabbits{
  grid-template-columns:32% 68%;
  min-height:285px;
}
.rabbit-copy{
  padding-top:42px;
  padding-bottom:42px;
}
.rabbit-copy h2{
  margin-top:9px;
  margin-bottom:10px;
  font-size:clamp(2.35rem,3.35vw,3.45rem);
  line-height:1;
}
.rabbit-copy p{
  max-width:360px;
  font-size:14px;
  line-height:1.5;
}
.rabbit-cloud{
  min-height:285px;
  padding:34px 7% 30px;
  justify-content:center;
  gap:24px 52px;
}
.rabbit-item{
  max-width:42%;
  line-height:1.05;
}
.rabbit-large{font-size:clamp(1.65rem,2.25vw,2.65rem)}
.rabbit-medium{font-size:clamp(1.18rem,1.55vw,1.75rem)}
.rabbit-small{font-size:clamp(.96rem,1.15vw,1.28rem)}
.rabbit-item-subtitle{
  margin-top:7px;
  font-size:clamp(.64rem,.72vw,.76rem);
}

/* Personal library: one calm editorial family instead of three visual bands. */
.learning-texts{
  background:#f7f2e9;
  padding-top:43px;
  padding-bottom:50px;
}
.learning-section-heading{
  margin-bottom:23px;
}
.learning-section-heading-wide{
  grid-template-columns:1.25fr .75fr;
  gap:64px;
}
.learning-section-heading h2{
  margin-top:8px;
  margin-bottom:8px;
  font-size:clamp(2rem,2.55vw,2.65rem);
  line-height:1.04;
}
.learning-section-heading-wide > p{
  padding-bottom:3px;
  max-width:430px;
  color:#4d5b55;
  font:400 13px/1.5 Georgia,serif;
}
.text-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
}
.text-card{
  grid-column:auto !important;
  min-height:132px;
  padding:17px 20px 16px;
  background:#fbf8f1;
  border-top:2px solid #0b7a74;
  box-shadow:inset 0 0 0 1px rgba(16,40,38,.035);
}
.text-card:hover{
  background:#fffdf8;
  transform:translateY(-2px);
}
.text-card h3{
  margin:10px 0 6px;
  font-size:clamp(1.35rem,1.55vw,1.7rem);
  line-height:1.04;
}
.text-card p{
  margin-bottom:10px;
  max-width:96%;
  font-size:12px;
  line-height:1.4;
}

/* Remove the former plum middle row; distinction now comes from content, not blocks of color. */
.text-card:nth-child(n+4):nth-child(-n+6),
.text-card:nth-child(n+4):nth-child(-n+6):hover{
  background:#fbf8f1;
  color:#102826;
  border-top-color:#0b7a74;
}
.text-card:nth-child(n+4):nth-child(-n+6):hover{
  background:#fffdf8;
}
.text-card:nth-child(n+4):nth-child(-n+6) .learning-overline{color:#0b7a74}
.text-card:nth-child(n+4):nth-child(-n+6) h3{color:#102826}
.text-card:nth-child(n+4):nth-child(-n+6) p{color:#56615b}
.text-card:nth-child(n+4):nth-child(-n+6) > span:last-child{color:#d47855}

@media (max-width:900px){
  .text-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .text-grid{grid-template-columns:1fr}
}

/* v221 beautification: fold active languages into the hero and sharpen the page rhythm. */
.hero-language-links{
  display:flex;
  align-items:center;
  gap:26px;
  margin-top:24px;
}
.hero-language-link{
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  color:rgba(255,255,255,.88);
  text-decoration:none;
  white-space:nowrap;
}
.hero-language-link + .hero-language-link{
  position:relative;
  padding-left:26px;
}
.hero-language-link + .hero-language-link::before{
  content:"";
  position:absolute;
  left:0; top:2px; bottom:1px;
  width:1px;
  background:rgba(239,193,95,.28);
}
.hero-language-name{font:400 17px/1 Georgia,serif}
.hero-language-native{font:400 15px/1.1 Georgia,serif;color:#7fc0b8}
.hero-language-urdu .hero-language-native{color:#efc15f}
.hero-language-notes{
  margin-left:3px;
  color:#efc15f;
  font:800 8px/1 Arial,sans-serif;
  letter-spacing:.13em;
  text-transform:uppercase;
  opacity:.9;
}
.hero-language-link:hover .hero-language-name,
.hero-language-link:hover .hero-language-native{color:#fff}

/* Rabbit holes: spend less vertical space, but make the constellation deliberate. */
.learning-rabbits{
  grid-template-columns:28% 72%;
  min-height:245px;
}
.rabbit-copy{padding:34px 4vw 34px 0}
.rabbit-copy h2{font-size:clamp(2.25rem,3vw,3.15rem)}
.rabbit-cloud{
  min-height:245px;
  padding:27px 5.5% 25px;
  display:grid;
  grid-template-columns:1.25fr 1fr 1fr;
  grid-template-rows:auto auto;
  align-content:center;
  align-items:center;
  justify-items:center;
  gap:20px 30px;
}
.rabbit-item{max-width:100%;width:auto}
.rabbit-item:nth-child(1){grid-column:1;grid-row:1 / span 2}
.rabbit-item:nth-child(2){grid-column:2;grid-row:1}
.rabbit-item:nth-child(3){grid-column:3;grid-row:1}
.rabbit-item:nth-child(4){grid-column:3;grid-row:2}
.rabbit-item:nth-child(5){grid-column:2;grid-row:2}
.rabbit-large{font-size:clamp(1.75rem,2.35vw,2.7rem)}
.rabbit-medium{font-size:clamp(1.12rem,1.45vw,1.6rem)}
.rabbit-small{font-size:clamp(.9rem,1.05vw,1.15rem)}

/* Library: compact, crisp, and typographically led. */
.learning-texts{padding-top:36px;padding-bottom:42px}
.learning-section-heading{margin-bottom:18px}
.learning-section-heading h2{font-size:clamp(1.9rem,2.3vw,2.4rem)}
.text-grid{gap:7px}
.text-card{min-height:116px;padding:14px 18px 13px;border-top-width:2px}
.text-card h3{margin:8px 0 5px;font-size:clamp(1.25rem,1.42vw,1.55rem)}
.text-card p{margin-bottom:8px;font-size:11px;line-height:1.38}
.text-card > span:last-child{font-size:9px}

@media (max-width:900px){
  .hero-language-links{flex-wrap:wrap;gap:14px 20px}
  .learning-rabbits{grid-template-columns:1fr}
  .rabbit-copy{padding:32px 0 22px}
  .rabbit-cloud{border-left:0;border-top:1px solid rgba(255,255,255,.13);grid-template-columns:repeat(2,1fr);grid-template-rows:auto;min-height:0}
  .rabbit-item:nth-child(n){grid-column:auto;grid-row:auto}
}
@media (max-width:620px){
  .hero-language-links{align-items:flex-start;flex-direction:column}
  .hero-language-link + .hero-language-link{padding-left:0}
  .hero-language-link + .hero-language-link::before{display:none}
  .rabbit-cloud{grid-template-columns:1fr}
}


/* ============================================================
   v222 visual refinement
   Languages orbit the hero mark; Rabbits return to ivory;
   the personal library becomes the dark, image-fused anchor.
   ============================================================ */

/* Hero language links become quiet satellites of the learning mark. */
.hero-language-links{
  position:absolute;
  inset:0;
  margin:0;
  display:block;
  pointer-events:none;
  z-index:4;
}
.hero-language-link{
  position:absolute;
  display:block;
  min-width:122px;
  padding:0;
  color:rgba(255,255,255,.92);
  text-decoration:none;
  white-space:nowrap;
  pointer-events:auto;
  text-align:left;
}
.hero-language-link + .hero-language-link{padding-left:0}
.hero-language-link + .hero-language-link::before{display:none}
.hero-language-sanskrit{left:-23%;top:20%}
.hero-language-urdu{right:-25%;top:20%;text-align:right}
.hero-language-name{
  display:inline-block;
  margin-right:6px;
  font:400 15px/1 Georgia,serif;
}
.hero-language-native{
  display:inline-block;
  font:400 14px/1.1 Georgia,serif;
  color:#7fc0b8;
}
.hero-language-urdu .hero-language-native{color:#efc15f}
.hero-language-notes{
  display:block;
  margin:6px 0 0;
  color:#efc15f;
  font:800 7px/1 Arial,sans-serif;
  letter-spacing:.15em;
  text-transform:uppercase;
  opacity:.9;
}
.hero-language-link:hover .hero-language-name,
.hero-language-link:hover .hero-language-native{color:#fff}

/* Rabbit holes: light editorial bridge, distinct from the hero. */
.learning-rabbits{
  position:relative;
  grid-template-columns:25% 75%;
  min-height:205px;
  background:#f7f2e9;
  color:#102826;
  border-bottom:1px solid rgba(16,40,38,.08);
}
.rabbit-copy{
  padding:30px 3.5vw 30px 0;
}
.rabbit-copy .learning-overline{color:#b9851f}
.rabbit-copy h2{
  color:#102826;
  font-size:clamp(2.05rem,2.65vw,2.75rem);
}
.rabbit-copy p{
  max-width:320px;
  color:#65706a;
  font-size:13px;
}
.rabbit-cloud{
  min-height:205px;
  padding:24px 3.5% 22px;
  border-left:1px solid rgba(16,40,38,.13);
  grid-template-columns:1.2fr .95fr 1fr;
  gap:14px 24px;
}
.rabbit-item{
  color:#102826;
}
.rabbit-item:hover{color:#b9851f}
.rabbit-item-subtitle{color:#b9851f}
.rabbit-small{color:#b9851f}
.rabbit-large{font-size:clamp(1.6rem,2.05vw,2.25rem)}
.rabbit-medium{font-size:clamp(1.08rem,1.35vw,1.45rem)}
.rabbit-small{font-size:clamp(.88rem,1vw,1.06rem)}

/* Personal library: dark anchor with one softly fused book image at right. */
.learning-texts{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:#0b2d28;
  color:#fff;
  padding-top:34px;
  padding-bottom:38px;
}
.learning-texts::before{
  content:"";
  position:absolute;
  z-index:-2;
  top:0;right:0;bottom:0;
  width:34%;
  background:
    linear-gradient(90deg,#0b2d28 0%,rgba(11,45,40,.92) 16%,rgba(11,45,40,.56) 55%,rgba(11,45,40,.30) 100%),
    url("../images/learning/osho-poster/04-books.webp") 64% center/cover no-repeat;
  opacity:.72;
}
.learning-texts::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.012),rgba(0,0,0,.045));
  pointer-events:none;
}
.learning-texts .learning-overline{color:#efc15f}
.learning-texts .learning-section-heading{
  position:relative;
  z-index:1;
  width:76%;
  margin-bottom:16px;
}
.learning-texts .learning-section-heading h2{color:#fff}
.learning-texts .learning-section-heading-wide > p{
  color:rgba(255,255,255,.72);
  font-weight:400;
}
.text-grid{
  position:relative;
  z-index:1;
  width:76%;
  gap:5px;
}
.text-card{
  min-height:108px;
  padding:13px 17px 12px;
  background:rgba(250,246,237,.97);
  border-top:2px solid #c79647;
  box-shadow:none;
}
.text-card:hover{background:#fffaf0}
.text-card h3{
  margin:7px 0 4px;
  font-size:clamp(1.17rem,1.32vw,1.42rem);
}
.text-card p{
  margin-bottom:7px;
  font-size:10.5px;
  line-height:1.34;
}
.text-card .learning-overline{color:#0b7a74}
.text-card > span:last-child{font-size:8px}
.text-card:nth-child(n+4):nth-child(-n+6),
.text-card:nth-child(n+4):nth-child(-n+6):hover{
  background:rgba(250,246,237,.97);
  color:#102826;
  border-top-color:#c79647;
}
.text-card:nth-child(n+4):nth-child(-n+6):hover{background:#fffaf0}
.text-card:nth-child(n+4):nth-child(-n+6) .learning-overline{color:#0b7a74}
.text-card:nth-child(n+4):nth-child(-n+6) h3{color:#102826}
.text-card:nth-child(n+4):nth-child(-n+6) p{color:#56615b}
.text-card:nth-child(n+4):nth-child(-n+6) > span:last-child{color:#d47855}

@media (max-width:1100px){
  .hero-language-sanskrit{left:-12%;top:14%}
  .hero-language-urdu{right:-14%;top:14%}
  .learning-texts .learning-section-heading,
  .text-grid{width:82%}
  .learning-texts::before{width:28%}
}

@media (max-width:900px){
  .hero-language-links{position:static;display:flex;margin-top:18px;gap:18px;justify-content:center}
  .hero-language-link{position:static;min-width:0;text-align:left}
  .hero-language-notes{display:inline-block;margin-left:5px}
  .learning-rabbits{grid-template-columns:1fr;padding:34px 22px}
  .rabbit-copy{padding:0 0 22px}
  .rabbit-cloud{
    border-left:0;
    border-top:1px solid rgba(16,40,38,.12);
    min-height:0;
    padding:24px 0 0;
    grid-template-columns:repeat(2,1fr);
  }
  .learning-texts .learning-section-heading,
  .text-grid{width:100%}
  .learning-texts::before{width:100%;opacity:.22}
}

@media (max-width:620px){
  .hero-language-links{align-items:center;flex-direction:row;flex-wrap:wrap}
  .hero-language-link + .hero-language-link{padding-left:0}
  .rabbit-cloud{grid-template-columns:1fr}
}

/* v223 — Rabbit holes final polish: more air, richer restrained ink colours. */
@media (min-width: 901px){
  .learning-rabbits{
    grid-template-columns:28% 72%;
    min-height:190px;
  }
  .rabbit-copy{
    padding:28px 3.5vw 28px 0;
  }
  .rabbit-cloud{
    min-height:190px;
    padding:24px 2.5% 22px;
    display:grid;
    grid-template-columns:1.18fr .92fr 1.22fr .98fr 1fr;
    grid-template-rows:1fr;
    align-items:center;
    gap:0;
  }
  .rabbit-item,
  .rabbit-item:nth-child(n){
    grid-column:auto;
    grid-row:auto;
    width:100%;
    max-width:none;
    padding:0 18px;
    text-align:center;
    color:#173d37;
    transform:none;
    line-height:1.08;
  }
  .rabbit-item + .rabbit-item{
    border-left:1px solid rgba(23,61,55,.14);
  }
  .rabbit-item:nth-child(3){
    color:#946419;
  }
  .rabbit-item:nth-child(3):hover{color:#765010}
  .rabbit-item:nth-child(1),
  .rabbit-item:nth-child(2),
  .rabbit-item:nth-child(4),
  .rabbit-item:nth-child(5){
    color:#173d37;
  }
  .rabbit-item:hover{color:#946419}
  .rabbit-large{font-size:clamp(1.45rem,1.75vw,1.95rem)}
  .rabbit-medium{font-size:clamp(1.02rem,1.18vw,1.3rem)}
  .rabbit-small{font-size:clamp(.94rem,1.06vw,1.15rem)}
  .rabbit-item:nth-child(5){font-size:clamp(.98rem,1.12vw,1.22rem)}
  .rabbit-item-subtitle{
    margin-top:7px;
    color:#946419;
    font-size:clamp(.56rem,.64vw,.7rem);
    line-height:1.15;
  }
}

@media (max-width: 900px){
  .rabbit-cloud{
    border-top:1px solid rgba(16,40,38,.12);
  }
  .rabbit-item{color:#173d37}
  .rabbit-item:nth-child(3){color:#946419}
}

/* v224 — Rabbit holes atmosphere: faint, background-free line artwork. */
@media (min-width: 901px){
  .learning-rabbits{
    overflow:hidden;
    isolation:isolate;
  }
  .learning-rabbits::before,
  .learning-rabbits::after{
    content:"";
    position:absolute;
    z-index:0;
    pointer-events:none;
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
    opacity:.085;
    filter:blur(.1px);
  }
  .learning-rabbits::before{
    width:170px;
    height:170px;
    left:31%;
    top:50%;
    transform:translate(-50%,-50%) rotate(-7deg);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%23173d37' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M39 142c20-44 49-69 87-73 28-3 47 8 55 26 8 18 1 37-17 49-16 11-41 16-67 8-22-7-35-25-29-42 6-18 27-27 46-22 15 4 23 17 18 29-4 10-16 15-27 12-8-2-13-9-11-16'/%3E%3Cpath d='M42 144c12 5 25 12 34 22M37 145c7-1 17-1 27 2M145 54c9-12 17-20 27-28M151 66c16-5 29-6 42-4'/%3E%3Ccircle cx='104' cy='113' r='2.7'/%3E%3C/g%3E%3C/svg%3E");
  }
  .learning-rabbits::after{
    width:190px;
    height:150px;
    right:2.5%;
    bottom:-18px;
    transform:rotate(5deg);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 180'%3E%3Cg fill='none' stroke='%23946419' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M35 131c31-18 60-28 87-27 28 2 48 12 67 31M35 131c20 8 42 18 63 31M122 104c-5-29 4-51 27-66M122 104c16-24 37-39 64-44M122 104c28-8 53-8 77 1M149 38c8 13 9 27 3 42M186 60c-5 13-14 25-28 35M200 105c-16 3-31 10-45 22'/%3E%3Cpath d='M70 125c6-13 14-22 25-28M83 145c7-13 16-23 28-30M150 134c14-13 29-20 47-22'/%3E%3C/g%3E%3C/svg%3E");
  }
  .learning-rabbits > *{
    position:relative;
    z-index:1;
  }
}

@media (max-width:900px){
  .learning-rabbits::before,
  .learning-rabbits::after{display:none}
}

/* v225 — Rabbit holes: real destination hero fragments, softly fused like Family. */
@media (min-width:901px){
  .learning-rabbits::before,
  .learning-rabbits::after{display:none}
  .rabbit-cloud{position:relative;isolation:isolate;overflow:hidden}
  .rabbit-cloud::before,
  .rabbit-cloud::after{
    content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
    background-repeat:no-repeat;
  }
  .rabbit-cloud::before{
    background-image:
      url('../images/dharma-context-hero-v1.webp'),
      url('../images/nishkama-karma-hero-v1.webp');
    background-size:31% auto,27% auto;
    background-position:5% 51%,39% 53%;
    opacity:.20;
    filter:saturate(.68) contrast(.88);
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 47%,transparent 57%);
    mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 47%,transparent 57%);
  }
  .rabbit-cloud::after{
    background-image:
      url('../images/fandom-andh-bhakti-hero-v1.webp'),
      url('../images/labels-hero-v1.webp');
    background-size:30% auto,25% auto;
    background-position:67% 53%,98% 50%;
    opacity:.15;
    filter:saturate(.68) contrast(.88);
    -webkit-mask-image:linear-gradient(90deg,transparent 43%,#000 53%,#000 94%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 43%,#000 53%,#000 94%,transparent 100%);
  }
  .rabbit-item{position:relative;z-index:2;text-shadow:0 1px 0 rgba(247,242,232,.92)}
}

/* v234 — Rabbit holes: one clean image per topic, no shared/overlapping artwork. */
@media (min-width:901px){
  .learning-rabbits{
    grid-template-columns:28% 72%;
    min-height:198px;
  }
  .rabbit-cloud{
    position:relative;
    isolation:auto;
    overflow:visible;
    min-height:198px;
    padding:10px 2.2% 10px;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    grid-template-rows:1fr;
    gap:6px;
    border-left:1px solid rgba(16,40,38,.13);
  }
  .rabbit-cloud::before,
  .rabbit-cloud::after{display:none!important;content:none!important}
  .rabbit-item,
  .rabbit-item:nth-child(n){
    position:relative;
    z-index:1;
    width:100%;
    min-width:0;
    height:178px;
    padding:0 14px 14px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    align-items:center;
    text-align:center;
    border:0!important;
    border-left:0!important;
    overflow:hidden;
    color:#173d37;
    text-shadow:0 1px 0 rgba(247,242,232,.95),0 0 10px rgba(247,242,232,.85);
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
    box-shadow:inset 0 0 0 1px rgba(23,61,55,.055);
  }
  .rabbit-item::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:linear-gradient(180deg,rgba(247,242,233,.22) 0%,rgba(247,242,233,.46) 48%,rgba(247,242,233,.88) 100%);
    pointer-events:none;
  }
  .rabbit-item:nth-child(1){background-image:url('../images/dharma-context-hero-v1.webp');background-position:center 44%}
  .rabbit-item:nth-child(2){background-image:url('../images/nishkama-karma-hero-v1.webp');background-position:center 46%}
  .rabbit-item:nth-child(3){background-image:url('../images/learning/meanwhile-on-whatsapp-hero.webp');background-position:center 48%;color:#946419}
  .rabbit-item:nth-child(4){background-image:url('../images/labels-hero-v1.webp');background-position:center 50%}
  .rabbit-item:nth-child(5){background-image:url('../images/fandom-andh-bhakti-hero-v1.webp');background-position:center 43%}
  .rabbit-item:hover{color:#946419;transform:translateY(-1px)}
  .rabbit-large,
  .rabbit-medium,
  .rabbit-small,
  .rabbit-item:nth-child(5){font-size:clamp(1.02rem,1.18vw,1.3rem)}
  .rabbit-item-title{max-width:100%;line-height:1.05}
  .rabbit-item-subtitle{
    margin-top:7px;
    max-width:95%;
    color:#946419;
    font-size:clamp(.55rem,.62vw,.68rem);
    line-height:1.15;
    text-shadow:0 1px 0 rgba(247,242,232,.98),0 0 8px rgba(247,242,232,.9);
  }
}

@media (max-width:900px){
  .rabbit-cloud::before,
  .rabbit-cloud::after{display:none!important;content:none!important}
}

/* v235 — Rabbit holes: individual hero art, visually fused into one continuous editorial strip. */
@media (min-width:901px){
  .rabbit-cloud{
    gap:0;
    padding:10px 2.2% 10px;
    overflow:hidden;
    isolation:isolate;
  }
  .rabbit-item,
  .rabbit-item:nth-child(n){
    background-image:none!important;
    box-shadow:none!important;
    overflow:hidden;
    isolation:isolate;
    padding:0 14px 14px;
  }
  .rabbit-item::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:
      linear-gradient(180deg,
        rgba(247,242,233,.16) 0%,
        rgba(247,242,233,.28) 42%,
        rgba(247,242,233,.82) 100%);
  }
  .rabbit-item::after{
    content:"";
    position:absolute;
    inset:-2px -10px;
    z-index:-2;
    pointer-events:none;
    background-image:var(--rabbit-art);
    background-repeat:no-repeat;
    background-size:cover;
    background-position:var(--rabbit-pos,center center);
    opacity:.78;
    filter:saturate(.78) contrast(.93) brightness(1.02);
    -webkit-mask-image:linear-gradient(90deg,
      transparent 0%,
      rgba(0,0,0,.58) 6%,
      #000 15%,
      #000 85%,
      rgba(0,0,0,.58) 94%,
      transparent 100%);
    mask-image:linear-gradient(90deg,
      transparent 0%,
      rgba(0,0,0,.58) 6%,
      #000 15%,
      #000 85%,
      rgba(0,0,0,.58) 94%,
      transparent 100%);
  }
  .rabbit-item:nth-child(1){--rabbit-art:url('../images/dharma-context-hero-v1.webp');--rabbit-pos:center 44%}
  .rabbit-item:nth-child(2){--rabbit-art:url('../images/nishkama-karma-hero-v1.webp');--rabbit-pos:center 46%}
  .rabbit-item:nth-child(3){--rabbit-art:url('../images/learning/meanwhile-on-whatsapp-hero.webp');--rabbit-pos:center 48%}
  .rabbit-item:nth-child(4){--rabbit-art:url('../images/labels-hero-v1.webp');--rabbit-pos:center 50%}
  .rabbit-item:nth-child(5){--rabbit-art:url('../images/fandom-andh-bhakti-hero-v1.webp');--rabbit-pos:center 43%}

  /* Outer ends dissolve more strongly into the ivory section. */
  .rabbit-item:first-child::after{
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 14%,#000 86%,rgba(0,0,0,.55) 95%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0%,#000 14%,#000 86%,rgba(0,0,0,.55) 95%,transparent 100%);
  }
  .rabbit-item:last-child::after{
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 5%,#000 14%,#000 86%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 5%,#000 14%,#000 86%,transparent 100%);
  }
}
