/* A friendlier field-journal layer over the original earthy theme. */
:root { --outline: #203f30; }
body { overflow-x: hidden; background-color: #fbf4df; }
body::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 105px;
  left: 4%;
  width: 92%;
  height: 510px;
  border-radius: 48% 52% 42% 58% / 52% 45% 55% 48%;
  background: rgba(99, 128, 92, .08);
}
.section-heading h2, .achievement h2, .meshcore-panel h2 {
  font-family: "Trebuchet MS", ui-rounded, system-ui, sans-serif;
  letter-spacing: -.045em;
}
.brand-mark { transform: rotate(-7deg); border: 2px solid var(--outline); box-shadow: 3px 3px 0 var(--gold); }
.hero h1 {
  font-family: "Trebuchet MS", ui-rounded, system-ui, sans-serif;
  letter-spacing: -.065em;
  transform: rotate(-1deg);
  text-shadow: 3px 3px 0 rgba(216, 161, 63, .3);
}
.eyebrow,.field-badge { width: fit-content; padding: 5px 10px; border-radius: 999px; background: #f2dca7; color: #7b492f; }
.weather-card,.field-card,.field-kit,.event-column,.reference-grid article,.project-grid article,.meshcore-panel {
  border: 2px solid var(--outline);
  box-shadow: 7px 7px 0 rgba(32, 63, 48, .16);
}
.weather-card { transform: rotate(1deg); }
.top-landscape {
  position: relative;
  left: 50%;
  width: 100vw;
  aspect-ratio: 1774 / 887;
  height: auto;
  margin: 18px 0 34px;
  transform: translateX(-50%);
  overflow: hidden;
  pointer-events: none;
  background: #fbf4df;
}
.landscape-scene {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 10px 8px rgba(32, 63, 48, .14));
}
.quick-links-section,.contests-section,.events-section,.meshcore-section,.achievement { position: relative; }
.section-mascot {
  position: absolute;
  z-index: 2;
  width: clamp(100px, 12vw, 175px);
  max-height: 230px;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(5px 8px 5px rgba(32,63,48,.18));
}
.mascot-snake { right: -145px; bottom: -105px; transform: rotate(-7deg); }
.mascot-devil { left: -170px; bottom: -105px; transform: rotate(7deg); }
.mascot-koala { right: -165px; top: 125px; transform: rotate(-4deg); }
.mascot-penguin { right: -125px; bottom: -92px; transform: rotate(-5deg); }
.mascot-puggle { left: -155px; bottom: -110px; transform: rotate(7deg); }
.clock-strip { border: 2px solid var(--outline); box-shadow: 7px 7px 0 rgba(181, 95, 55, .22); }
.clock-strip { grid-template-columns: repeat(6, 1fr); }
.field-card.pota { transform: rotate(-.6deg); }
.field-card.sota { transform: rotate(.7deg); }
.field-card:hover { transform: translateY(-5px) rotate(0); }
.contest-list { border: 2px solid var(--outline); box-shadow: 7px 7px 0 rgba(32, 63, 48, .16); }
.achievement { border: 2px solid var(--outline); box-shadow: 8px 8px 0 var(--gold); transform: rotate(-.25deg); }
.playful { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: start; }
.event-doodle { display: grid; place-items: center; width: 40px; height: 40px; background: var(--sand); border: 2px solid var(--outline); border-radius: 50%; font-size: 1.15rem; }
.calendar-button,.primary-button { border: 2px solid var(--outline); box-shadow: 3px 3px 0 var(--gold); }
@media (max-width: 850px) { .clock-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 650px) { .clock-strip { grid-template-columns: repeat(2, 1fr); } body::after { height: 720px; } .top-landscape { width: 100vw; margin: 10px 0 24px; } .section-mascot { width: 82px; max-height: 115px; opacity: .92; } .mascot-snake,.mascot-koala,.mascot-penguin { right: -60px; } .mascot-devil,.mascot-puggle { left: -64px; } }