:root {
  /* Design typography parser tokens: details. Use contour lines sparingly for ear-tag serial numbers. */
  --clover: #3F6F4A;
  --cream: #F6E8C8;
  --umber: #6A3F2B;
  --fog: #B8D8D8;
  --night: #18251E;
  --coral: #E56F5C;
  --yellow: #F2C94C;
  --display: Fraunces, Georgia, 'Times New Roman', serif;
  --body: 'Nunito Sans', Inter, ui-rounded, system-ui, sans-serif;
  --mono: 'Space Mono', 'SFMono-Regular', Consolas, monospace;
  --scroll: 0;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--cream); }
body {
  margin: 0;
  color: var(--night);
  font-family: var(--body);
  background: linear-gradient(180deg, var(--cream) 0%, #f7edcf 31%, var(--fog) 58%, var(--night) 100%);
  overflow-x: hidden;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .22;
  background-image: radial-gradient(circle at 20% 10%, rgba(106,63,43,.18) 0 1px, transparent 1.5px), radial-gradient(circle at 70% 80%, rgba(63,111,74,.16) 0 1px, transparent 1.7px);
  background-size: 23px 29px, 31px 37px;
  mix-blend-mode: multiply;
}

.pasture-nav {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: grid;
  gap: 12px;
}
.nav-rivet {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  color: var(--umber);
  text-decoration: none;
  font: 700 10px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .72;
  transition: transform .35s ease, opacity .35s ease, color .35s ease;
}
.nav-rivet span {
  order: 2;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 27%, #fff6d7 0 14%, var(--yellow) 16% 58%, #c89621 100%);
  box-shadow: inset -3px -4px 6px rgba(106,63,43,.22), 0 4px 10px rgba(24,37,30,.16);
}
.nav-rivet.active { color: var(--coral); opacity: 1; transform: translateX(-7px); }

.scene {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(36px, 6vw, 90px);
}
.kicker, .scene-label {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--coral);
}
h1, h2 { font-family: var(--display); margin: 0; font-weight: 850; letter-spacing: -.05em; }
p { font-size: clamp(16px, 1.45vw, 22px); line-height: 1.55; }

.dawn-gate {
  min-height: 112vh;
  background: radial-gradient(circle at 66% 12%, rgba(242,201,76,.55), transparent 24%), linear-gradient(180deg, #fff3d0 0%, var(--cream) 43%, var(--fog) 100%);
}
.sun-wash {
  position: absolute;
  width: 44vw;
  height: 44vw;
  border-radius: 50%;
  right: 3vw;
  top: -18vw;
  background: radial-gradient(circle, rgba(242,201,76,.55), rgba(242,201,76,.08) 62%, transparent 70%);
  filter: blur(4px);
}
.mist { position: absolute; height: 18vh; left: -10vw; right: -10vw; border-radius: 50%; background: rgba(184,216,216,.45); filter: blur(22px); animation: mistDrift 19s ease-in-out infinite alternate; }
.mist-one { top: 16vh; }
.mist-two { top: 46vh; opacity: .54; animation-duration: 25s; }
.horizon-band { position: absolute; left: -8vw; right: -8vw; bottom: -5vh; border-radius: 52% 48% 0 0 / 100% 100% 0 0; }
.band-back { height: 42vh; bottom: 6vh; background: #B8D8D8; opacity: .82; }
.band-mid { height: 34vh; bottom: 0; background: #77a56d; }
.band-front { height: 24vh; bottom: -3vh; background: var(--clover); box-shadow: inset 0 26px 60px rgba(246,232,200,.18); }
.hero-copy { position: absolute; left: 5vw; right: 8vw; bottom: 10vh; z-index: 2; }
.wordmark {
  display: flex;
  align-items: baseline;
  width: 100%;
  color: var(--clover);
  text-shadow: 0 7px 0 rgba(246,232,200,.9), 0 22px 34px rgba(24,37,30,.22);
  font-size: clamp(72px, 15.2vw, 242px);
  line-height: .75;
}
.inflated-letter {
  display: inline-block;
  transform: translateY(calc(sin(var(--scroll) * 1deg) * 1px));
  animation: breathe 5.8s ease-in-out infinite;
  filter: drop-shadow(0 14px 12px rgba(106,63,43,.16));
}
.inflated-letter:nth-child(2n) { animation-delay: -1.2s; }
.horn-letter { color: var(--clover); }
.fence-letter { color: var(--umber); }
.bell-letter { color: var(--yellow); text-shadow: 0 7px 0 rgba(106,63,43,.28), 0 22px 34px rgba(24,37,30,.2); }
.dot-com { font-size: .26em; letter-spacing: -.02em; color: var(--coral); margin-left: .06em; font-family: var(--mono); text-shadow: none; }
.opening-note { width: min(560px, 82vw); color: var(--night); margin: 28px 0 0 1vw; }
.horn-gate { position: absolute; width: 18vw; height: 28vw; border: 23px solid var(--clover); border-right-color: transparent; border-bottom-color: transparent; border-radius: 50% 0 0 0; opacity: .25; z-index: 1; }
.gate-left { left: -4vw; top: 13vh; transform: rotate(-18deg); }
.gate-right { right: 14vw; top: 23vh; transform: scaleX(-1) rotate(-8deg); }

.hoof-trail { position: absolute; z-index: 2; fill: none; pointer-events: none; }
.dawn-trail { width: 68vw; right: 3vw; top: 16vh; opacity: .72; }
.trail-line { stroke: rgba(106,63,43,.34); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 8 15; }
.hoofprints { fill: var(--umber); opacity: calc(.18 + var(--scroll) * .0014); }
.floating-tag, .enamel-tag {
  border-radius: 34% 34% 43% 43% / 24% 24% 48% 48%;
  box-shadow: inset -10px -14px 22px rgba(106,63,43,.12), inset 8px 8px 16px rgba(255,255,255,.34), 0 18px 38px rgba(24,37,30,.18);
}
.floating-tag {
  position: absolute;
  z-index: 5;
  width: 96px;
  height: 122px;
  display: grid;
  place-items: center;
  padding-top: 20px;
  background: var(--coral);
  color: var(--cream);
  font: 900 54px/.8 var(--display);
  animation: tagWobble 4.8s ease-in-out infinite;
  cursor: pointer;
}
.floating-tag:before, .enamel-tag:before { content: ''; position: absolute; top: 12px; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 25%, #fff8d8 0 18%, var(--yellow) 20% 65%, #b68620 100%); }
.floating-tag span { position: absolute; bottom: 18px; font: 700 10px/1 var(--mono); letter-spacing: .08em; }
.tag-c { left: 21vw; top: 14vh; }
.tag-t { right: 20vw; top: 31vh; background: var(--yellow); color: var(--umber); animation-delay: -1.4s; }
.tag-l { right: 38vw; top: 9vh; background: var(--fog); color: var(--clover); animation-delay: -2.8s; }

.tag-archive { background: linear-gradient(157deg, var(--cream) 0%, #f8dfb9 45%, var(--fog) 100%); min-height: 112vh; }
.scene-label { position: absolute; top: 9vh; left: 7vw; }
.archive-orbit { position: absolute; inset: 14vh 12vw 14vh 7vw; }
.enamel-tag {
  position: absolute;
  width: clamp(132px, 15vw, 210px);
  height: clamp(164px, 18vw, 255px);
  display: grid;
  place-items: center;
  padding: 44px 18px 22px;
  text-align: center;
  cursor: pointer;
  transform: rotate(var(--r));
  transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease;
}
.enamel-tag:hover { transform: translateY(-18px) rotate(calc(var(--r) * .5)); box-shadow: inset -12px -18px 24px rgba(106,63,43,.1), inset 10px 9px 20px rgba(255,255,255,.38), 0 30px 54px rgba(24,37,30,.23); }
.enamel-tag b { font: 900 clamp(62px, 7vw, 118px)/.75 var(--display); }
.enamel-tag small { font: 700 11px/1.3 var(--mono); letter-spacing: .08em; }
.enamel-tag:nth-child(1) { left: 2%; top: 34%; --r: -11deg; }
.enamel-tag:nth-child(2) { left: 18%; top: 10%; --r: 7deg; }
.enamel-tag:nth-child(3) { left: 38%; top: 39%; --r: -5deg; }
.enamel-tag:nth-child(4) { right: 29%; top: 4%; --r: 12deg; }
.enamel-tag:nth-child(5) { right: 10%; top: 34%; --r: -8deg; }
.enamel-tag:nth-child(6) { right: 1%; bottom: 2%; --r: 6deg; }
.coral { background: var(--coral); color: var(--cream); }
.cream { background: var(--cream); color: var(--clover); }
.blue { background: var(--fog); color: var(--night); }
.yellow { background: var(--yellow); color: var(--umber); }
.green { background: var(--clover); color: var(--cream); }
.umber { background: var(--umber); color: var(--cream); }
.note-card { position: absolute; right: 9vw; top: 17vh; width: min(310px, 38vw); padding: 22px; border-radius: 28px; background: rgba(246,232,200,.72); color: var(--night); box-shadow: inset 0 0 0 2px rgba(106,63,43,.13), 0 18px 42px rgba(24,37,30,.13); backdrop-filter: blur(8px); }
.note-card span { font: 700 11px/1 var(--mono); letter-spacing: .16em; color: var(--coral); }
.note-card p { margin-bottom: 0; }
.twine-path { position: absolute; width: 100vw; height: 44vh; left: 0; bottom: 6vh; fill: none; stroke: var(--umber); stroke-width: 5; stroke-dasharray: 12 18; opacity: .28; }

.bell-meadow { display: grid; grid-template-columns: minmax(280px, .82fr) 1fr; align-items: center; gap: 5vw; background: radial-gradient(circle at 15% 30%, rgba(242,201,76,.24), transparent 33%), linear-gradient(180deg, var(--fog), #d7e3c7 52%, var(--clover)); }
.large-bell { position: relative; justify-self: center; width: min(38vw, 430px); height: min(58vw, 620px); transform-origin: 50% 0; animation: bellSway 5.5s ease-in-out infinite; }
.bell-strap { position: absolute; left: 47%; top: 0; width: 6%; height: 34%; border-radius: 20px; background: var(--umber); box-shadow: inset -5px 0 8px rgba(24,37,30,.22); }
.bell-body { position: absolute; left: 12%; right: 12%; top: 27%; bottom: 8%; border-radius: 48% 48% 35% 35% / 40% 40% 25% 25%; background: radial-gradient(circle at 33% 22%, #fff0a5 0 10%, transparent 24%), linear-gradient(145deg, #f7d56a, var(--yellow) 46%, #b88420); box-shadow: inset -25px -33px 34px rgba(106,63,43,.24), 0 35px 60px rgba(24,37,30,.24); }
.bell-clapper { position: absolute; left: 42%; bottom: 0; width: 16%; height: 16%; border-radius: 50%; background: var(--umber); box-shadow: 0 16px 26px rgba(24,37,30,.28); }
.bell-copy { color: var(--cream); max-width: 650px; z-index: 2; }
.bell-copy .kicker { color: var(--yellow); }
.bell-copy h2 { font-size: clamp(44px, 6vw, 96px); line-height: .91; text-shadow: 0 6px 0 rgba(24,37,30,.14); }
.shadow-flank { position: absolute; right: -11vw; bottom: 10vh; width: 48vw; height: 25vh; border-radius: 60% 0 0 60%; background: rgba(24,37,30,.34); filter: blur(2px); animation: graze 12s ease-in-out infinite alternate; }
.mini-bells { position: absolute; right: 9vw; top: 10vh; display: flex; gap: 23px; }
.mini-bells span { width: 32px; height: 38px; border-radius: 50% 50% 35% 35%; background: var(--yellow); box-shadow: inset -7px -8px 10px rgba(106,63,43,.22); animation: bellSway 3.8s ease-in-out infinite; transform-origin: 50% -25px; }
.mini-bells span:nth-child(2n) { animation-delay: -1.1s; }

.clover-ledger { min-height: 110vh; background: linear-gradient(180deg, #e8dbb9, var(--cream)); color: var(--night); }
.ledger-sheet { width: min(680px, 82vw); margin: 8vh 0 0 7vw; padding: clamp(28px, 5vw, 58px); background: rgba(246,232,200,.9); border-radius: 42px 28px 52px 34px; box-shadow: 0 22px 50px rgba(106,63,43,.18), inset 0 0 0 2px rgba(106,63,43,.12); transform: rotate(-2deg); }
.ledger-sheet h2 { font-size: clamp(42px, 6vw, 84px); line-height: .9; color: var(--clover); }
.ledger-lines { margin-top: 30px; display: grid; gap: 10px; font-family: var(--mono); font-size: 13px; }
.ledger-lines div { display: grid; grid-template-columns: 110px 1fr; gap: 18px; border-bottom: 2px dashed rgba(106,63,43,.25); padding: 12px 0; }
.ledger-lines span { color: var(--coral); }
.clover-cluster { position: absolute; right: 14vw; top: 24vh; width: 260px; height: 260px; border: 0; background: transparent; cursor: pointer; color: var(--cream); font: 800 12px/1 var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.clover-cluster span { position: absolute; width: 118px; height: 118px; border-radius: 72% 28% 72% 28%; background: radial-gradient(circle at 30% 28%, #8cc277, var(--clover)); box-shadow: inset -12px -14px 20px rgba(24,37,30,.2), 0 14px 24px rgba(24,37,30,.15); transition: transform .6s cubic-bezier(.2,1,.2,1); }
.clover-cluster span:nth-child(1) { left: 20px; top: 20px; }
.clover-cluster span:nth-child(2) { right: 20px; top: 20px; transform: rotate(90deg); }
.clover-cluster span:nth-child(3) { left: 20px; bottom: 20px; transform: rotate(-90deg); }
.clover-cluster span:nth-child(4) { right: 20px; bottom: 20px; transform: rotate(180deg); }
.clover-cluster.open span:nth-child(1) { transform: translate(-24px,-24px) rotate(-12deg); }
.clover-cluster.open span:nth-child(2) { transform: translate(24px,-24px) rotate(103deg); }
.clover-cluster.open span:nth-child(3) { transform: translate(-24px,24px) rotate(-103deg); }
.clover-cluster.open span:nth-child(4) { transform: translate(24px,24px) rotate(194deg); }
.clover-cluster em { position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; font-style: normal; text-shadow: 0 2px 7px rgba(24,37,30,.45); }
.feed-sack { position: absolute; right: 9vw; bottom: 12vh; padding: 33px 45px; border-radius: 18px 18px 44px 20px; background: #efe0ba; color: var(--umber); font: 900 clamp(25px, 3.2vw, 48px)/.95 var(--display); letter-spacing: -.03em; box-shadow: inset 0 0 0 3px rgba(106,63,43,.15), 0 20px 34px rgba(106,63,43,.15); transform: rotate(4deg); }
.feed-sack small { font: 700 11px/1 var(--mono); color: var(--coral); letter-spacing: .15em; }

.night-barn { min-height: 115vh; background: radial-gradient(circle at 20% 18%, rgba(184,216,216,.2), transparent 27%), linear-gradient(180deg, #314937 0%, var(--night) 56%); color: var(--cream); }
.moon { position: absolute; right: 13vw; top: 11vh; width: 118px; height: 118px; border-radius: 50%; background: var(--cream); box-shadow: 0 0 44px rgba(246,232,200,.6); }
.moon:after { content: ''; position: absolute; width: 104px; height: 104px; border-radius: 50%; right: -28px; top: -5px; background: #314937; }
.barn-silhouette { position: absolute; left: 8vw; bottom: 0; width: min(560px, 58vw); height: 50vh; }
.barn-roof { position: absolute; left: 0; right: 0; top: 0; height: 44%; background: var(--umber); clip-path: polygon(50% 0, 100% 70%, 91% 100%, 9% 100%, 0 70%); box-shadow: inset -25px -25px 30px rgba(24,37,30,.25); }
.barn-face { position: absolute; left: 10%; right: 10%; bottom: 0; height: 67%; border-radius: 24px 24px 0 0; background: #24362b; display: grid; place-items: center; box-shadow: inset 0 0 0 3px rgba(246,232,200,.08); }
.barn-face span { font: 900 clamp(44px, 8vw, 104px)/1 var(--display); color: var(--yellow); text-shadow: 0 8px 0 rgba(106,63,43,.5); letter-spacing: -.07em; }
.final-copy { position: absolute; right: 8vw; bottom: 17vh; width: min(550px, 45vw); }
.final-copy .kicker { color: var(--yellow); }
.final-copy h2 { font-size: clamp(42px, 5.7vw, 88px); line-height: .91; }
.gate-action { display: inline-block; margin-top: 14px; color: var(--night); background: var(--cream); text-decoration: none; padding: 17px 25px; border-radius: 999px; font: 900 13px/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; box-shadow: 0 12px 24px rgba(0,0,0,.22), inset -5px -6px 10px rgba(106,63,43,.12); }
.fireflies i { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 18px var(--yellow); animation: firefly 4s ease-in-out infinite alternate; }
.fireflies i:nth-child(1) { left: 54%; top: 24%; }
.fireflies i:nth-child(2) { left: 68%; top: 37%; animation-delay: -.8s; }
.fireflies i:nth-child(3) { left: 78%; top: 63%; animation-delay: -1.6s; }
.fireflies i:nth-child(4) { left: 38%; top: 48%; animation-delay: -2.1s; }
.fireflies i:nth-child(5) { left: 88%; top: 22%; animation-delay: -2.8s; }
.fireflies i:nth-child(6) { left: 29%; top: 30%; animation-delay: -1.2s; }
.fireflies i:nth-child(7) { left: 16%; top: 18%; animation-delay: -3.2s; }
.fireflies i:nth-child(8) { left: 62%; top: 76%; animation-delay: -2.5s; }

@keyframes breathe { 0%,100% { transform: scale(1) translateY(0); } 50% { transform: scale(1.025, .985) translateY(-3px); } }
@keyframes tagWobble { 0%,100% { transform: rotate(-4deg) translateY(0); } 50% { transform: rotate(5deg) translateY(-9px); } }
@keyframes bellSway { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(4deg); } }
@keyframes mistDrift { from { transform: translateX(-6vw); } to { transform: translateX(8vw); } }
@keyframes graze { from { transform: translateX(0) scaleX(1); opacity: .2; } to { transform: translateX(-18vw) scaleX(1.12); opacity: .38; } }
@keyframes firefly { from { transform: translate(0,0) scale(.7); opacity: .35; } to { transform: translate(18px,-24px) scale(1.25); opacity: 1; } }

@media (max-width: 820px) {
  .pasture-nav { right: 10px; }
  .nav-rivet { font-size: 0; }
  .wordmark { font-size: clamp(58px, 17vw, 120px); flex-wrap: wrap; }
  .floating-tag { width: 74px; height: 94px; font-size: 38px; }
  .archive-orbit { position: relative; inset: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 80px; }
  .enamel-tag { position: relative; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; width: auto; height: 172px; }
  .note-card { position: relative; right: auto; top: auto; width: auto; margin: 28px 0; }
  .bell-meadow { grid-template-columns: 1fr; }
  .large-bell { width: 70vw; height: 86vw; }
  .clover-cluster { position: relative; right: auto; top: auto; margin: 40px auto; display: block; }
  .feed-sack, .final-copy { position: relative; right: auto; bottom: auto; width: auto; margin: 34px 0; }
  .barn-silhouette { width: 85vw; opacity: .48; }
}