/* EXCELLENT CODING — shared visual system */
:root{--site-ink:#172820;--site-paper:#f7f5ed;--site-lime:#d6fa63;--site-green:#426b51;--site-muted:#68766d;--site-line:#e2e5d9;--site-card:#fffef9;--site-shadow:0 18px 50px rgba(23,40,32,.09);--site-radius:22px;scroll-behavior:smooth;scroll-padding-top:100px}
body{background:radial-gradient(ellipse at 90% 0%,rgba(214,250,99,.12),transparent 34%),var(--site-paper);color:var(--site-ink);-webkit-font-smoothing:antialiased}
::selection{background:var(--site-lime);color:var(--site-ink)}
a,button,input,select,textarea{ -webkit-tap-highlight-color:transparent }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #9bbd37;outline-offset:4px}
.global-nav{padding-top:12px;padding-bottom:12px;min-height:76px;background:rgba(250,249,243,.88);border-bottom:1px solid rgba(217,221,207,.85);box-shadow:0 5px 24px rgba(28,43,33,.035);transition:box-shadow .25s,background .25s}
.global-nav.is-scrolled{box-shadow:0 12px 35px rgba(28,43,33,.10);background:rgba(250,249,243,.97)}
.global-brand{font-size:15px;letter-spacing:-.35px;gap:11px}.global-brand img{width:39px;height:39px;padding:4px;border-radius:12px;background:#eaf2d8;transition:transform .25s}.global-brand:hover img{transform:rotate(-7deg) scale(1.05)}
.global-links{gap:clamp(9px,1.6vw,24px)}.global-links a{position:relative;padding:10px 0;font-size:13px;transition:color .2s}.global-links a:after{content:"";position:absolute;left:0;right:100%;bottom:3px;height:2px;border-radius:3px;background:#7b9f27;transition:right .22s}.global-links a:hover:after,.global-links a[aria-current=page]:after{right:0}.global-links a[aria-current=page]{color:var(--site-ink)}
.global-menu{cursor:pointer;transition:transform .2s,background .2s}.global-menu:hover{background:var(--site-lime);transform:translateY(-1px)}
/* Common layout polish */
main{isolation:isolate}section{scroll-margin-top:100px}h1,h2,h3{ text-wrap:balance }p{ text-wrap:pretty }
.hero,.page{position:relative}.hero:before{content:"";position:absolute;z-index:-1;right:3%;top:16%;width:clamp(170px,28vw,360px);aspect-ratio:1;border-radius:44% 56% 63% 37% / 43% 38% 62% 57%;background:linear-gradient(145deg,rgba(214,250,99,.22),rgba(66,107,81,.06));filter:blur(1px);pointer-events:none;animation:floatBlob 12s ease-in-out infinite alternate}
.hero h1,.page h1{letter-spacing:-.055em;line-height:.98}.eyebrow{display:inline-flex;align-items:center;gap:9px;padding:8px 12px;border:1px solid rgba(123,159,39,.25);border-radius:999px;background:rgba(214,250,99,.18);letter-spacing:1.1px}
.intro{line-height:1.8}.button,.actions a,.actions button{border-radius:999px;transition:transform .22s,box-shadow .22s,background .22s}.button{padding:14px 21px}.button.primary{box-shadow:0 9px 22px rgba(23,40,32,.13)}.button:hover{transform:translateY(-3px);box-shadow:0 12px 25px rgba(23,40,32,.12),0 0 0 3px rgba(214,250,99,.35)}
.stats{gap:clamp(22px,5vw,72px)}.stats strong{font-size:clamp(25px,3vw,36px)}.stats span{letter-spacing:.3px}
/* Cards, tiles, tables and content panels */
.student-grid{gap:10px;border:0;max-width:1000px}.student{border:1px solid var(--site-line);border-radius:15px;background:rgba(255,254,249,.78);min-height:100px;box-shadow:0 3px 10px rgba(23,40,32,.025);transition:transform .2s,border-color .2s,box-shadow .2s,background .2s}.student:hover{background:#f0f8d9;border-color:#c6dc89;transform:translateY(-3px);box-shadow:0 12px 25px rgba(23,40,32,.07)}
.team-grid{gap:16px}.team-grid article{position:relative;overflow:hidden;border-radius:var(--site-radius);min-height:205px;padding:26px;background:linear-gradient(145deg,#20392c,#355643);box-shadow:var(--site-shadow)}.team-grid article:after{content:"↗";position:absolute;right:22px;top:18px;color:var(--site-lime);font-size:23px;opacity:.85;transition:transform .2s}.team-grid article:hover:after{transform:translate(3px,-3px)}.team-grid article:hover{transform:translateY(-5px);background:linear-gradient(145deg,#263f30,#426b51)}
/* Gentle treatment for common project elements */
.card,.panel,.content-card,.topic-card,.video-card,.member-card,.project-card,.feature-card,.lesson-card,.resource-card,article.card{border-radius:var(--site-radius);border:1px solid rgba(217,221,207,.9);box-shadow:0 8px 28px rgba(23,40,32,.045);transition:transform .22s,box-shadow .22s,border-color .22s}
.card:hover,.panel:hover,.content-card:hover,.topic-card:hover,.video-card:hover,.member-card:hover,.project-card:hover,.feature-card:hover,.lesson-card:hover,.resource-card:hover,article.card:hover{transform:translateY(-4px);box-shadow:var(--site-shadow);border-color:#cbd8b1}
img{max-width:100%}img:not([src$=".svg"]){image-rendering:auto}video{max-width:100%;border-radius:18px;background:#18271f;box-shadow:0 12px 32px rgba(23,40,32,.13)}
input,select,textarea{border-radius:12px;transition:border-color .2s,box-shadow .2s}input:focus,select:focus,textarea:focus{border-color:#8daa3d!important;box-shadow:0 0 0 4px rgba(214,250,99,.23)}
footer{margin-top:30px;background:rgba(255,254,249,.5)}
/* Interaction helpers */
.site-progress{position:fixed;top:0;left:0;width:0;height:3px;background:linear-gradient(90deg,#88a934,#d6fa63);z-index:10001;box-shadow:0 0 12px rgba(136,169,52,.35)}
.back-top{position:fixed;right:22px;bottom:22px;z-index:9998;width:46px;height:46px;border:1px solid rgba(217,221,207,.9);border-radius:50%;background:#fffef8;color:#172820;font-size:20px;box-shadow:0 8px 24px rgba(23,40,32,.12);cursor:pointer;opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .2s,transform .2s,background .2s}.back-top.visible{opacity:1;pointer-events:auto;transform:translateY(0)}.back-top:hover{background:var(--site-lime)}
.js-reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1)}.js-reveal.is-visible{opacity:1;transform:translateY(0)}
@keyframes floatBlob{from{transform:translate3d(0,0,0) rotate(0deg)}to{transform:translate3d(-12px,15px,0) rotate(8deg)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.js-reveal{opacity:1;transform:none}}
@media(max-width:760px){.global-nav{gap:12px}.global-links{padding:10px 0 8px}.global-links a{border-radius:10px;padding:11px 12px}.global-links a[aria-current=page]{background:#edf4dc}.global-links a:after{display:none}.hero:before{right:-6%;top:9%;opacity:.7}.student-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.student-grid,.team-grid{grid-template-columns:1fr}.back-top{right:14px;bottom:14px}.hero h1,.page h1{letter-spacing:-.045em}}

/* Navigation layout fix: one consistent, responsive navbar on every page */
.global-nav {
  position: sticky;
  top: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(14px, 2vw, 30px);
  width: 100%;
  box-sizing: border-box;
  padding: 12px clamp(18px, 5vw, 76px);
  min-height: 76px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.global-brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  color: var(--site-ink);
  text-decoration: none;
  font-weight: 800;
  white-space: nowrap;
}
.global-brand img { display: block; object-fit: contain; flex: 0 0 auto; }
.global-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  min-width: 0;
  margin: 0;
  padding: 0;
}
.global-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  color: #526258;
  text-decoration: none;
  font-weight: 650;
  white-space: nowrap;
}
.global-links a:hover { color: #35563f; }
.global-menu {
  display: none;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--site-line);
  border-radius: 13px;
  background: var(--site-card);
  color: var(--site-ink);
  font-size: 23px;
  line-height: 1;
}
main, section, footer { min-width: 0; }
main { overflow-wrap: anywhere; }
img, video, iframe { max-width: 100%; }

/* Make the learning materials comfortable to read on desktop and tablet */
.materials-section { width: min(1240px, 100%); max-width: 1240px; box-sizing: border-box; padding-right: clamp(22px, 4vw, 54px); padding-left: clamp(22px, 4vw, 54px); }
.materials-layout { grid-template-columns: minmax(220px, 270px) minmax(0, 1fr); gap: clamp(22px, 3vw, 42px); }
.lesson-nav { border-radius: 18px; }
.lesson-link { min-height: 44px; font-size: 13px; }
.lesson-card { padding: clamp(24px, 3vw, 36px); border-radius: 20px; }
.lesson-card h3 { font-size: clamp(23px, 2vw, 29px); line-height: 1.25; }
.lesson-intro { max-width: 760px; font-size: 15px; line-height: 1.85; }
.lesson-detail { gap: clamp(18px, 2.4vw, 32px); }
.lesson-detail h4 { font-size: 14px; }
.lesson-detail p, .compact-list { font-size: 14px; line-height: 1.9; }
.example-box { padding: 17px 19px; border-radius: 0 12px 12px 0; }
.example-label { font-size: 10px; }
.example-box p, .example-box pre { font-size: 13px; }
.practice summary { font-size: 12px; }
.practice p { font-size: 13px; }
.symbol-item { min-height: 120px; border-radius: 12px; }
.symbol-item p { font-size: 11px; }
.symbol-item p strong { font-size: 12px; }

@media (max-width: 980px) {
  .global-nav { padding-right: 22px; padding-left: 22px; gap: 14px; }
  .global-links { gap: 13px; }
  .global-links a { font-size: 12px; }
  .global-brand { font-size: 14px; }
  .global-brand img { width: 34px; height: 34px; }
  .materials-layout { grid-template-columns: minmax(185px, 220px) minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 760px) {
  .global-nav { min-height: 68px; padding: 10px 18px; gap: 12px; }
  .global-menu { display: inline-flex; }
  .global-links {
    position: absolute;
    top: calc(100% + 1px);
    left: 12px;
    right: 12px;
    display: none;
    align-items: stretch;
    justify-content: flex-start;
    flex-direction: column;
    gap: 4px;
    max-height: min(72vh, 440px);
    overflow-y: auto;
    padding: 10px;
    border: 1px solid var(--site-line);
    border-radius: 18px;
    background: rgba(250, 249, 243, .98);
    box-shadow: 0 18px 44px rgba(23, 40, 32, .15);
    backdrop-filter: blur(16px);
  }
  .global-links.open { display: flex; }
  .global-links a { justify-content: flex-start; width: 100%; box-sizing: border-box; padding: 11px 13px; min-height: 44px; border-radius: 11px; font-size: 14px; }
  .global-links a:hover, .global-links a[aria-current="page"] { background: #edf4dc; }
  .global-links a:after { display: none; }
  .materials-section { padding: 58px 20px 70px; }
  .materials-layout { display: block; }
  .lesson-nav { position: static; display: flex; gap: 7px; overflow-x: auto; margin-bottom: 18px; padding: 10px; }
  .lesson-link { flex: 0 0 auto; font-size: 12px; }
  .lesson-card { margin-bottom: 14px; padding: 24px 21px; }
  .lesson-card h3 { font-size: clamp(22px, 4.5vw, 27px); }
  .lesson-intro { font-size: 14px; }
  .lesson-detail p, .compact-list { font-size: 13px; }
}
@media (max-width: 480px) {
  .global-nav { padding: 9px 14px; }
  .global-brand { gap: 8px; font-size: 13px; }
  .global-brand img { width: 32px; height: 32px; }
  .global-links { left: 9px; right: 9px; }
  .materials-section { padding: 46px 14px 58px; }
  .lesson-card { padding: 20px 16px; border-radius: 16px; }
  .lesson-card h3 { font-size: 22px; }
  .lesson-intro, .lesson-detail p, .compact-list { font-size: 13px; }
  .lesson-detail { grid-template-columns: minmax(0, 1fr); }
  .symbol-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .back-top { right: 12px; bottom: 12px; }
}