/* V2.2 — paper, light, and abstract geometry. All decoration is CSS-only. */
:root {
  --paper-weave: repeating-linear-gradient(0deg, #80634205 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, #80634204 0 1px, transparent 1px 5px);
}

body {
  background-color: #faf7ef;
  background-image: var(--paper-weave);
}

/* Gentle color gathers at the margins, leaving a light reading surface. */
#main, #reading {
  background-image:
    radial-gradient(ellipse 420px 720px at 100% 100px, #aac6ac40, transparent 100%),
    radial-gradient(ellipse 370px 590px at 0 700px, #dec49238, transparent 100%);
  background-repeat: no-repeat;
}

.header {
  background: #faf7eff5;
  border-bottom-color: #b8bf9c48;
}

/* The opening spread: amber light, a jade wash, and oversized engraved arcs. */
.v2-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 8% 35%, #e7c58650, transparent 53%),
    radial-gradient(ellipse at 94% 18%, #aac4a778, transparent 57%),
    linear-gradient(115deg, #fbf7edb3 25%, #f3f0dd75 72%, #e4ecdc96);
  border-bottom: 1px solid #b7b88e38;
}

.v2-hero::before, .v2-hero::after,
.v2-hero-art::before, .v2-hero-art::after,
.v2-page::before, .v2-closing::before,
.v2-random::before, .footer::before {
  content: "";
  position: absolute;
  pointer-events: none;
}

.v2-hero::before {
  width: 650px;
  height: 650px;
  top: -300px;
  right: -100px;
  border: 1px solid #879f715e;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 36px, #718b5940 37px 38px, transparent 39px 64px);
  opacity: .65;
  z-index: -1;
}

.v2-hero::after {
  width: 410px;
  height: 410px;
  left: -250px;
  bottom: -275px;
  border: 1px solid #b3955145;
  border-radius: 50%;
  box-shadow: 0 0 0 22px #d6b16c0c, 0 0 0 23px #b3955130,
    0 0 0 47px #d6b16c08, 0 0 0 48px #b3955128,
    0 0 0 73px #d6b16c05, 0 0 0 74px #b3955120;
  z-index: -1;
}

.v2-hero-art { isolation: isolate; }
.v2-hero-art > img { box-shadow: 0 18px 45px #34452f1f; }
.v2-hero-art::before {
  inset: -16px 18px 18px -16px;
  border: 1px solid #927a4366;
  border-radius: 124px 10px 10px 10px;
  z-index: -1;
}
.v2-hero-art::after {
  width: 82px;
  height: 82px;
  right: -22px;
  bottom: -22px;
  background: repeating-linear-gradient(135deg, #748b5566 0 1px, transparent 1px 8px);
  border-radius: 0 0 22px 0;
  z-index: -1;
}
.v2-hero .btn--ghost { background-color: #fffcf18c; }
.v2-hero .v2-micro { color: #4f5d50; }
.v2-topicbar { border-top: 0; }

/* Alternate broad washes make the long homepage feel like separate chapters. */
.v2-home > .v2-section:nth-of-type(even) {
  background-image: radial-gradient(ellipse at 0 30%, #d5dfc33d, transparent 62%);
}
.v2-home > .v2-section.v2-gallery-preview {
  background:
    radial-gradient(ellipse at 100% 100%, #e1c3a340, transparent 65%),
    linear-gradient(125deg, #ebefdf80, #faf7ef66 55%, #f4e8d680);
  border-block: 1px solid #b9c19f38;
  margin-bottom: 45px;
}
.v2-daily-feature {
  background: radial-gradient(ellipse at 100% 0, #e2cf9766, transparent 65%),
    linear-gradient(140deg, #edf1e7, #e7eddd);
  box-shadow: 0 8px 25px #354b3410;
}
.v2-course {
  background: radial-gradient(ellipse at 0 100%, #c4d2ac70, transparent 58%),
    linear-gradient(120deg, #edf0e1, #f5edda);
  border: 1px solid #b7bd972e;
}
.v2-founder {
  background: radial-gradient(ellipse at 100% 0, #e4ca986b, transparent 65%),
    linear-gradient(110deg, #edf1e5, #f7f2e1);
}
.v2-calendar-strip { background-image: linear-gradient(110deg, #e2c78b24, #fcf8ec00); }

/* Richer jade panels, with the geometry behind every interactive element. */
.v2-random {
  isolation: isolate;
  background: radial-gradient(ellipse at 100% 0, #5d7952, transparent 75%),
    linear-gradient(120deg, #1f473a, #315c45);
  background-color: #244d3d;
  box-shadow: 0 9px 25px #203d2914;
}
.v2-random::before {
  width: 370px;
  height: 370px;
  right: -90px;
  top: -140px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 27px, #dfcb8d24 28px 29px, transparent 30px 49px);
  z-index: -1;
}
.v2-random::after { content: none; }

/* Interior headers get a small geometric signature; articles stay calm. */
.v2-page {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.v2-page::before {
  width: 330px;
  height: 330px;
  right: -180px;
  top: -125px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 25px, #8b9b6630 26px 27px, transparent 28px 45px);
  z-index: -1;
}
.v2-lesson-panel, .v2-regiondetail { box-shadow: 0 8px 30px #35482d0c; }
.v2-map {
  background-image: linear-gradient(#7389660b 1px, transparent 1px),
    linear-gradient(90deg, #7389660b 1px, transparent 1px),
    radial-gradient(ellipse at 75% 15%, #fff8dfb3, #e8eee000 80%);
  background-size: 28px 28px, 28px 28px, auto;
}
.section--jade {
  background: radial-gradient(ellipse at 100% 0, #d8e1bd80, transparent 60%),
    linear-gradient(135deg, #f0f5f1, #e9efdf);
}
.section--cream2 {
  background: radial-gradient(ellipse at 0 0, #ebd4a259, transparent 65%), #f6f1e7;
}

.v2-closing { position: relative; isolation: isolate; overflow: hidden; }
.v2-closing::before {
  width: 390px;
  height: 390px;
  left: calc(50% - 195px);
  top: 5px;
  border: 1px solid #bda16830;
  border-radius: 50%;
  background: radial-gradient(circle, #eadbb440, transparent 68%);
  box-shadow: 0 0 0 25px #bda16806, 0 0 0 26px #bda1681c,
    0 0 0 51px #bda16804, 0 0 0 52px #bda16812;
  z-index: -1;
}
.footer {
  --gold: #f6dfad;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: radial-gradient(ellipse at 0 0, #486848, transparent 70%),
    linear-gradient(120deg, #254c3d, #183b30);
  background-color: #203f33;
  border-top: 3px solid #b4a06b;
}
.footer .brand-sub, .footer .foot-h, .footer .foot-bottom { color: #cfe0d6; }
.footer::before {
  width: 610px;
  height: 610px;
  right: -210px;
  bottom: -300px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 32px, #decc9430 33px 34px, transparent 35px 62px);
  z-index: -1;
}

@media (max-width: 700px) {
  .v2-hero::before { width: 430px; height: 430px; right: -220px; top: -225px; opacity: .5; }
  .v2-hero::after { opacity: .5; }
  .v2-hero-art::before { inset: -10px 12px 12px -10px; border-top-left-radius: 85px; }
  .v2-hero-art::after { width: 56px; height: 56px; right: -12px; bottom: -14px; }
  .v2-gallery-preview { margin-bottom: 30px; }
  .v2-page::before { right: -230px; opacity: .5; }
  .v2-random::before { right: -220px; opacity: .7; }
  .footer::before { right: -350px; opacity: .65; }
}

@media (prefers-contrast: more) {
  body, #main, #reading, .v2-hero, .v2-home > .v2-section, .v2-page,
  .v2-daily-feature, .v2-course, .v2-founder, .v2-calendar-strip, .v2-map,
  .section--jade, .section--cream2, .v2-random, .footer { background-image: none !important; }
  .v2-hero::before, .v2-hero::after, .v2-hero-art::before, .v2-hero-art::after,
  .v2-page::before, .v2-closing::before, .v2-random::before, .footer::before { display: none; }
}
@media print {
  body, #main, #reading, .v2-hero, .v2-home > .v2-section, .v2-page,
  .v2-daily-feature, .v2-course, .v2-founder, .v2-map, .footer { background-image: none !important; }
  .v2-hero::before, .v2-hero::after, .v2-hero-art::before, .v2-hero-art::after,
  .v2-page::before, .v2-closing::before, .v2-random::before, .footer::before { display: none; }
}