/* ==========================================================================
   ABUND TERRA ACADEMY · THE FOUR LANDS
   Savannah (About) · Desert (Courses) · Arctic (Community) · Jungle (Students)
   ========================================================================== */
body.land { min-height: 100vh; background: #050804; }
.scene { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.scene-veil { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(5, 8, 4, .1) 0%, rgba(5, 8, 4, .25) 40%, rgba(5, 8, 4, .55) 100%); }

/* ---------- the locked, sticky main navigation ---------- */
.mainnav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: max(10px, env(safe-area-inset-top)) clamp(14px, 3vw, 36px) 10px;
  background: linear-gradient(180deg, rgba(8, 12, 6, .9), rgba(8, 12, 6, .72)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(180, 205, 74, .22); }
.mainnav .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.mainnav .brand img { width: 40px; height: 40px; filter: drop-shadow(0 0 8px rgba(145, 181, 44, .5)); }
.mainnav .brand span { display: flex; flex-direction: column; line-height: 1; }
.mainnav .brand b { font-family: var(--font-script); font-weight: 400; font-size: 1.6rem; color: var(--ivory); }
.mainnav .brand i { font-style: normal; font-family: var(--font-display); font-size: .55rem; letter-spacing: .42em; text-transform: uppercase; color: var(--sunlit); margin-top: 2px; }
.mainnav nav { display: flex; gap: 4px; flex-wrap: wrap; }
.mainnav nav a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 999px; text-decoration: none; font-family: var(--font-display); font-weight: 500; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); transition: color .3s, background .3s; }
.mainnav nav a:hover { color: var(--ivory); background: rgba(145, 181, 44, .14); }
.mainnav nav a[aria-current="page"] { color: #10200a; background: linear-gradient(180deg, #eef5c8, var(--sunlit)); }
.mainnav nav a.lock { border: 1px solid rgba(180, 205, 74, .4); color: var(--sunlit); }
.mainnav nav a.lock[aria-current="page"] { color: #10200a; }
.mainnav nav svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.mainnav .tools { display: flex; gap: 12px; align-items: center; }
@media (max-width: 860px) {
  .mainnav nav { order: 3; width: 100%; justify-content: center; }
  .mainnav nav a { padding: 6px 9px; font-size: .6rem; letter-spacing: .06em; }
  .mainnav .tools .dw-switch { font-size: .6rem; }
}

/* ---------- content over the scenes ---------- */
.land main { position: relative; z-index: 4; }
.land .hero { min-height: calc(86vh - 70px); align-content: center; }
.land .kicker { color: var(--sand); }
.land .h1 { font-family: var(--font-display); font-weight: 600; letter-spacing: .02em; }
.land .h2 { font-family: var(--font-display); font-weight: 600; }
.land .tile h3, .land .icard h3, .land .room h3, .land .dcard h3 { font-family: var(--font-display); font-weight: 600; }
.land .glass { background: rgba(10, 14, 8, .62); border-color: rgba(247, 243, 232, .12); }
.script { font-family: var(--font-script); font-weight: 400; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.1; color: var(--ivory); text-shadow: 0 0 24px rgba(0, 0, 0, .6); }
.biome { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 6px 14px; border-radius: 999px; font-family: var(--font-hud); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ivory); background: rgba(0, 0, 0, .35); border: 1px solid rgba(247, 243, 232, .25); }
.land .lead { color: rgba(247, 243, 232, .86); text-shadow: 0 1px 12px rgba(0, 0, 0, .55); }
.land .hero .lead { max-width: 60ch; }
.path { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: clamp(36px, 5vh, 56px); counter-reset: lvl; }
.path li { position: relative; padding: 24px 20px; border-radius: 20px; background: rgba(10, 14, 8, .62); border: 1px solid rgba(180, 205, 74, .22); counter-increment: lvl; }
.path li::before { content: 'Level ' counter(lvl); display: block; font-family: var(--font-hud); font-size: .64rem; letter-spacing: .26em; text-transform: uppercase; color: var(--sand); margin-bottom: 8px; }
.path h3 { font-family: var(--font-display); font-size: 1.1rem; color: var(--ivory); }
.path p { margin-top: 8px; font-size: .92rem; color: var(--text-dim); }
@media (max-width: 900px) { .path { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .path { grid-template-columns: 1fr; } }
.course { display: flex; flex-direction: column; }
.course .meta-line { margin-top: 6px; font-family: var(--font-hud); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--sand); }
.course p { flex: 1; }
.course .ctas { margin-top: 18px; }
.portal { position: relative; display: grid; place-items: center; text-align: center; padding: clamp(40px, 7vw, 80px) 20px; border-radius: 30px; overflow: hidden; text-decoration: none; color: inherit;
  background: radial-gradient(ellipse at 50% 120%, rgba(120, 200, 255, .35), transparent 60%), rgba(8, 16, 24, .7); border: 1px solid rgba(191, 232, 255, .4); }
.portal::before { content: ''; position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, rgba(191, 232, 255, .35), transparent 30%, rgba(180, 205, 74, .3), transparent 60%); animation: portalSpin 9s linear infinite; filter: blur(18px); }
.portal > * { position: relative; }
.portal svg.fb { width: 64px; height: 64px; color: #bfe8ff; filter: drop-shadow(0 0 16px rgba(191, 232, 255, .7)); }
@keyframes portalSpin { to { transform: rotate(360deg); } }
.dw-calm .portal::before { animation: none; }
.land .foot-social { margin-top: 40px; }
.land .disclaimer, .land .foot { color: rgba(247, 243, 232, .62); }

/* land accents */
body.land-savannah { --sand: #e8b65a; --sand-hi: #fff0c9; --sand-deep: #b87a2a; }
body.land-desert   { --sand: #f0c27a; --sand-hi: #fff2d8; --sand-deep: #c08a3e; }
body.land-arctic   { --sand: #bfe8ff; --sand-hi: #f2fbff; --sand-deep: #6fb4dc; }
body.land-jungle   { --sand: #7fe0c8; --sand-hi: #e3fff6; --sand-deep: #2f9e86; }
body.land .btn { color: #14200c; }

/* ---------- student area & forms ---------- */
.panel { max-width: 460px; margin: 0 auto; }
.panel h1 { font-family: var(--font-display); font-weight: 600; font-size: 1.6rem; color: var(--ivory); text-align: center; }
.panel .sub { margin-top: 6px; text-align: center; color: var(--text-dim); }
.form { margin-top: 22px; display: grid; gap: 14px; }
.form label { display: grid; gap: 6px; font-family: var(--font-hud); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sand); }
.form input, .form textarea, .form select { width: 100%; padding: 13px 15px; border-radius: 12px; font: inherit; font-family: var(--font-body); font-size: 1rem; letter-spacing: 0; text-transform: none; color: var(--ivory);
  background: rgba(0, 0, 0, .45); border: 1px solid rgba(247, 243, 232, .22); outline: none; transition: border-color .3s, box-shadow .3s; }
.form input:focus, .form textarea:focus, .form select:focus { border-color: var(--sand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sand) 25%, transparent); }
.form .btn { justify-content: center; border: 0; cursor: pointer; width: 100%; }
.alert { margin-top: 14px; padding: 12px 16px; border-radius: 12px; font-size: .92rem; }
.alert--err { background: rgba(180, 60, 40, .25); border: 1px solid rgba(255, 140, 110, .45); color: #ffd2c6; }
.alert--ok { background: rgba(80, 160, 60, .22); border: 1px solid rgba(180, 205, 74, .5); color: #e8f5c8; }
.small { font-size: .85rem; color: var(--text-dim); }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; margin-top: 26px; }
.lesson-list { list-style: none; display: grid; gap: 8px; }
.lesson-list a { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; text-decoration: none; color: var(--text); background: rgba(0, 0, 0, .35); border: 1px solid rgba(247, 243, 232, .12); }
.lesson-list a[aria-current="true"] { border-color: var(--sand); background: color-mix(in srgb, var(--sand) 14%, transparent); }
.lesson-list .n { font-family: var(--font-hud); font-size: .7rem; color: var(--sand); }
.player { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #000; border: 1px solid rgba(247, 243, 232, .18); }
.player video, .player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.resources { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.course-layout { display: grid; grid-template-columns: 320px 1fr; gap: 24px; align-items: start; }
@media (max-width: 900px) { .course-layout { grid-template-columns: 1fr; } }
.lesson-body { margin-top: 18px; line-height: 1.8; color: var(--text-dim); }
.lesson-body p + p { margin-top: 12px; }

/* ---------- the Black Journal ---------- */
.journal-launch { position: fixed; right: clamp(14px, 3vw, 30px); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 60; display: flex; align-items: center; gap: 10px;
  padding: 12px 18px 12px 12px; border-radius: 16px; color: var(--ivory); font-family: var(--font-display); font-weight: 500; font-size: .82rem; letter-spacing: .06em;
  background: linear-gradient(160deg, #1a1a1a, #050505); border: 1px solid rgba(227, 196, 106, .55); box-shadow: 0 14px 40px rgba(0, 0, 0, .6), 0 0 26px rgba(227, 196, 106, .2);
  transform: perspective(600px) rotateY(-12deg); transition: transform .4s ease; animation: jFloat 6s ease-in-out infinite; }
.journal-launch:hover { transform: perspective(600px) rotateY(0) translateY(-3px); }
.journal-launch .mini-book { width: 34px; height: 42px; border-radius: 3px 6px 6px 3px; background: linear-gradient(90deg, #0a0a0a 0 12%, #1c1c1c 12% 100%); border: 1px solid #e3c46a; position: relative; }
.journal-launch .mini-book::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -4px; border: 1px solid #e3c46a; border-radius: 50%; }
@keyframes jFloat { 50% { translate: 0 -6px; } }
.dw-calm .journal-launch { animation: none; }
.jbook { position: fixed; inset: 0; z-index: 9200; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); perspective: 1800px; }
.jbook[hidden] { display: none; }
.jbook__book { position: relative; width: min(980px, 100%); height: min(640px, calc(100vh - 32px)); display: grid; grid-template-columns: 1fr 1fr; transform-style: preserve-3d; }
.jbook__cover { position: absolute; inset: 0 0 0 50%; z-index: 3; transform-origin: left center; border-radius: 4px 14px 14px 4px; display: grid; place-items: center; text-align: center;
  background: radial-gradient(circle at 30% 20%, #2a2a2a, #0a0a0a 70%); border: 1px solid #3a3221; box-shadow: inset 0 0 0 10px #0d0d0d, inset 0 0 0 11px rgba(227, 196, 106, .55);
  transition: transform 1.3s cubic-bezier(.6, .05, .25, 1); backface-visibility: hidden; }
.jbook__cover h2 { font-family: var(--font-script); font-weight: 400; font-size: 2.6rem; color: #e3c46a; }
.jbook__cover p { font-family: var(--font-hud); font-size: .64rem; letter-spacing: .3em; text-transform: uppercase; color: rgba(227, 196, 106, .7); margin-top: 6px; }
.jbook.is-open .jbook__cover { transform: rotateY(-180deg); }
.jbook__page { position: relative; padding: 26px 28px; overflow: auto; background: linear-gradient(90deg, #0f0f0f, #141414); color: #ece6d6; border: 1px solid #2b261c; }
.jbook__page--left { border-radius: 14px 4px 4px 14px; box-shadow: inset -20px 0 30px rgba(0, 0, 0, .5); }
.jbook__page--right { border-radius: 4px 14px 14px 4px; box-shadow: inset 20px 0 30px rgba(0, 0, 0, .5); display: flex; flex-direction: column; }
.jbook__page h3 { font-family: var(--font-script); font-weight: 400; font-size: 2rem; color: #e3c46a; }
.jbook__entries { list-style: none; margin-top: 14px; display: grid; gap: 8px; }
.jbook__entries button { width: 100%; text-align: left; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(227, 196, 106, .18); color: #ece6d6; background: rgba(255, 255, 255, .02); }
.jbook__entries button[aria-current="true"] { border-color: #e3c46a; background: rgba(227, 196, 106, .1); }
.jbook__entries small { display: block; font-family: var(--font-hud); font-size: .64rem; color: rgba(227, 196, 106, .8); }
.jbook__page input, .jbook__page textarea, .jbook__page select { width: 100%; padding: 10px 12px; border-radius: 10px; font: inherit; color: #ece6d6; background: transparent; border: 1px solid rgba(227, 196, 106, .25); outline: none; }
.jbook__page textarea { flex: 1; margin-top: 10px; min-height: 200px; resize: none; line-height: 2; font-family: var(--font-body); font-size: 1.02rem;
  background-image: repeating-linear-gradient(180deg, transparent 0 calc(2em - 1px), rgba(227, 196, 106, .14) calc(2em - 1px) 2em); background-attachment: local; }
.jbook__row { display: flex; gap: 10px; margin-top: 10px; }
.jbook__row > * { flex: 1; }
.jbook__actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; align-items: center; }
.jbook__actions button { padding: 10px 16px; border-radius: 999px; font-family: var(--font-display); font-weight: 600; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; }
.jbook__save { background: linear-gradient(180deg, #f3dd9a, #e3c46a); color: #1b1404; }
.jbook__new, .jbook__del, .jbook__close { border: 1px solid rgba(227, 196, 106, .4); color: #ece6d6; }
.jbook__status { font-family: var(--font-hud); font-size: .66rem; color: rgba(227, 196, 106, .8); }
.jbook__privacy { margin-top: 12px; font-size: .74rem; color: rgba(236, 230, 214, .55); }
.jbook__prompt { margin-top: 12px; font-style: italic; color: rgba(236, 230, 214, .7); }
@media (max-width: 760px) {
  .jbook__book { grid-template-columns: 1fr; height: calc(100vh - 32px); }
  .jbook__page--left { display: none; } .jbook__page--right { border-radius: 14px; }
  .jbook__cover { inset: 0; }
}

/* ---------- student bar, progress, journal extras ---------- */
.userbar { position: relative; z-index: 5; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; padding: 10px 16px; margin: 0 auto; width: fit-content; max-width: calc(100% - 32px);
  font-family: var(--font-display); font-size: .82rem; color: var(--text-dim); background: rgba(0, 0, 0, .45); border: 1px solid rgba(127, 224, 200, .22); border-radius: 0 0 16px 16px; }
.userbar a { color: var(--sand); text-decoration: none; } .userbar a:hover { text-decoration: underline; }
.progress { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; margin: 14px 0 6px; }
.progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--sand-deep), var(--sand)); }
.jbook__mobile-list { display: none; margin-top: 0; margin-bottom: 4px; }
.jbook__entries .empty { color: rgba(236, 230, 214, .5); font-style: italic; }
.jbook__page select option { background: #141414; color: #ece6d6; }
.jbook__cover { transition: transform 1.3s cubic-bezier(.6, .05, .25, 1); backface-visibility: hidden; }
.jbook__page--left, .jbook__page--right { opacity: 0; transition: opacity .6s .55s; }
.jbook.is-open .jbook__page--left, .jbook.is-open .jbook__page--right { opacity: 1; }
.jbook__page textarea { background-image: repeating-linear-gradient(transparent 0 calc(2em - 1px), rgba(227, 196, 106, .14) calc(2em - 1px) 2em); background-attachment: local; }
@media (max-width: 760px) { .jbook__mobile-list { display: flex; } .journal-launch span:last-child { display: none; } }
.dw-calm .jbook__cover { transition-duration: .01s; }
.jbook.is-open .jbook__cover { pointer-events: none; }
body.land .btn--ghost { color: var(--ivory); }
.jbook__page textarea { background-position: 0 9px; }
@media (max-width: 760px) { .jbook { padding: 10px; } .jbook__book { height: calc(100dvh - 20px); } .jbook__page { padding: 18px 16px; } }

/* ---------- Back to Earth: always one tap from the spinning globe ---------- */
.earth-home { position: fixed; left: clamp(14px, 3vw, 30px); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 60; display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px 10px 12px; border-radius: 999px; text-decoration: none; font-family: var(--font-display); font-weight: 600; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ivory); background: rgba(5, 10, 6, .62); border: 1px solid color-mix(in srgb, var(--sand, #b4cd4a) 55%, transparent);
  box-shadow: 0 0 22px color-mix(in srgb, var(--sand, #b4cd4a) 28%, transparent), inset 0 0 12px rgba(180, 205, 74, .12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform .3s, box-shadow .3s; }
.earth-home svg { width: 22px; height: 22px; fill: none; stroke: var(--sand, #b4cd4a); stroke-width: 1.4; animation: earthSpin 14s linear infinite; }
.earth-home:hover { transform: translateY(-2px); box-shadow: 0 0 34px color-mix(in srgb, var(--sand, #b4cd4a) 45%, transparent); }
@keyframes earthSpin { to { transform: rotate(360deg); } }
.dw-calm .earth-home svg { animation: none; }
@media (max-width: 520px) { .earth-home { padding: 12px; } .earth-home span { display: none; } }
