/* Appily Seventyseven — Meander Fold tokens (organic minimalism) */
:root {
  --mn-paper: #e6ebe8;
  --mn-foam: #f4f7f5;
  --mn-mist: #c5d0ca;
  --mn-ink: #1a2622;
  --mn-mute: #5a6b64;
  --mn-sage: #4f7a6a;
  --mn-sage-deep: #3a5c50;
  --mn-honey: #c9a24a;
  --mn-dusk: #5a6f8a;
  --mn-clay: #a67c6d;
  --mn-line: rgba(26, 38, 34, 0.12);
  --mn-soft: rgba(79, 122, 106, 0.12);
  --mn-radius: 1.75rem;
  --mn-radius-sm: 1rem;
  --mn-radius-pill: 999px;
  --mn-display: "Fraunces", Georgia, serif;
  --mn-sans: "Sora", "Segoe UI", sans-serif;
  --mn-ease: cubic-bezier(0.33, 1, 0.68, 1);
  --mn-max: 1120px;
  --mn-spine: 5.5rem;
  --mn-shadow: 0 18px 40px rgba(26, 38, 34, 0.08);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body.a77-body {
  margin: 0;
  min-height: 100vh;
  color: var(--mn-ink);
  font-family: var(--mn-sans);
  line-height: 1.55;
  background:
    radial-gradient(ellipse 70% 50% at 8% 0%, rgba(201, 162, 74, 0.12), transparent 55%),
    radial-gradient(ellipse 55% 45% at 100% 20%, rgba(90, 111, 138, 0.1), transparent 50%),
    linear-gradient(168deg, var(--mn-foam) 0%, var(--mn-paper) 45%, #dfe6e2 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.a77-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--mn-spine) minmax(0, 1fr);
  position: relative;
}

.a77-bare-main { min-height: 100vh; }

.a77-mist {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 18% 70%, rgba(79, 122, 106, 0.07), transparent 30%),
    radial-gradient(circle at 78% 40%, rgba(201, 162, 74, 0.06), transparent 28%);
  animation: mn-breathe 14s var(--mn-ease) infinite alternate;
}

.a77-blob {
  pointer-events: none;
  position: fixed;
  z-index: 0;
  border-radius: 60% 40% 55% 45% / 45% 55% 45% 55%;
  filter: blur(2px);
  opacity: 0.45;
}
.a77-blob--a {
  width: min(42vw, 420px);
  height: min(42vw, 420px);
  top: -8%;
  right: -6%;
  background: radial-gradient(circle, rgba(79, 122, 106, 0.18), transparent 70%);
  animation: mn-morph 18s var(--mn-ease) infinite alternate;
}
.a77-blob--b {
  width: min(36vw, 340px);
  height: min(36vw, 340px);
  bottom: 8%;
  left: 10%;
  background: radial-gradient(circle, rgba(90, 111, 138, 0.14), transparent 70%);
  animation: mn-morph 22s var(--mn-ease) infinite alternate-reverse;
}

@keyframes mn-breathe {
  from { opacity: 0.7; transform: scale(1); }
  to { opacity: 1; transform: scale(1.04); }
}
@keyframes mn-morph {
  from { border-radius: 60% 40% 55% 45% / 45% 55% 45% 55%; transform: translate3d(0, 0, 0); }
  to { border-radius: 40% 60% 40% 60% / 55% 40% 60% 45%; transform: translate3d(2%, -2%, 0); }
}

.a77-skip {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--mn-ink);
  color: var(--mn-foam);
  padding: 0.6rem 1rem;
  z-index: 100;
}
.a77-skip:focus { left: 1rem; top: 1rem; }

@media (max-width: 900px) {
  .a77-shell { grid-template-columns: 1fr; }
  :root { --mn-spine: 0; }
}