* { box-sizing: border-box; }
:root { color-scheme: dark; --art: url('/assets/farm-artwork.png'); }
html, body { margin: 0; min-width: 320px; min-height: 100%; background: #302015; }
body { overflow-x: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.world { position: absolute; width: 1672px; height: 881px; transform-origin: top left; transform: scale(var(--scale-x, 1), var(--scale-y, 1)); background: var(--art) 0 0 / 1672px 941px no-repeat; }
.navigation { position: absolute; left: 257px; top: 0; width: 1220px; height: 63px; }
.brand { position: absolute; left: 46px; top: 13px; width: 240px; height: 31px; }
.home { position: absolute; left: 350px; top: 12px; width: 78px; height: 35px; }
a { display: block; position: absolute; border-radius: 6px; -webkit-tap-highlight-color: transparent; transition: background-color .15s, box-shadow .15s; }
a:hover { background-color: #ffd87020; box-shadow: 0 0 14px #ffc84b35; }
a:active { background-color: #28130235; }
a:focus-visible { outline: 3px solid #fff3b2; outline-offset: 4px; }
.x-link { left: 982px; top: 12px; width: 37px; height: 35px; }
.nav-join { left: 1040px; top: 8px; width: 145px; height: 43px; }
.hero { position: absolute; left: 525px; top: 65px; width: 630px; height: 270px; }
.quest { position: absolute; left: 575px; top: 340px; width: 525px; height: 250px; }
.unit { position: absolute; top: 56px; width: 70px; height: 39px; background: var(--art) -445px -672px / 1672px 941px; text-align: center; color: #110e08; }
.days { left: 67px; }.hours { left: 172px; }.minutes { left: 278px; }.seconds { left: 382px; }
.number { display: block; font: 900 35px/39px 'Arial Narrow', 'Liberation Sans Narrow', Arial, sans-serif; font-stretch: condensed; letter-spacing: -1.5px; transform: scaleX(.87); }
.main-join { left: 80px; top: 149px; width: 360px; height: 65px; }
.cards { position: absolute; left: 421px; top: 630px; display: flex; gap: 13px; }
.card { position: relative; width: 267px; height: 212px; }
.footer { position: absolute; bottom: 0; left: 0; width: 100%; height: var(--footer-height, 6.376vh); background: var(--art) center bottom / 100vw 100vh no-repeat; }
@media (max-width: 700px) {
  body { background: #302015; }
  .world { position: relative; width: 100%; height: auto; min-height: calc(100svh - 45px); padding: 72px 0 25px; transform: none; background-size: auto 100%; background-position: 18% top; }
  .world::before { content: ''; position: absolute; inset: 0; background: #1d190f55; pointer-events: none; }
  .navigation { left: 0; top: 0; width: 100%; height: 62px; background: var(--art) 50% 0 / auto 941px; box-shadow: 0 2px 5px #100a05; }
  .brand { left: 10px; top: 12px; width: 175px; height: 26px; background: var(--art) -223px -10px / 1225px 689px; }
  .home { left: auto; right: 135px; top: 18px; width: 43px; height: 23px; background: var(--art) -336px -6px / 926px 521px; }
  .x-link { left: auto; right: 107px; top: 17px; width: 23px; height: 25px; background: var(--art) -870px -10px / 1170px 659px; }
  .nav-join { left: auto; right: 7px; top: 15px; width: 95px; height: 30px; background: var(--art) -854px -5px / 1100px 619px; }
  main { position: relative; }
  .hero { position: relative; left: auto; top: auto; margin: 0 auto; width: 630px; height: 270px; background: var(--art) -525px -65px / 1672px 941px; zoom: var(--mobile-scale, .58); }
  .quest { position: relative; left: auto; top: auto; margin: 4px auto 17px; background: var(--art) -575px -340px / 1672px 941px; zoom: var(--mobile-scale, .58); }
  .cards { position: relative; top: auto; left: auto; flex-direction: column; align-items: center; gap: 13px; }
  .card { background-image: var(--art); background-size: 1672px 941px; }
  .roadmap { background-position: -421px -630px; }
  .utility { background-position: -701px -630px; }
  .community { background-position: -981px -630px; }
  .footer { position: relative; height: 45px; background-size: auto 706px; background-position: left bottom; }
}
@media (prefers-reduced-motion: reduce) { a { transition: none; } }
/* Reuse the empty parchment strip above the original numerals. */
.unit { background: none; }
.unit::before { content: ''; position: absolute; left: 0; top: 0; width: 70px; height: 8px; background: var(--art) -646px -390px / 1672px 941px; transform: scaleY(4.875); transform-origin: top; }
.number { position: relative; font-family: Arial, sans-serif; font-weight: 800; }
@media (max-width: 700px) {
  .world { background-size: auto 1800px; background-position: left top; }
  .navigation { background-position: -800px 0; background-size: 1672px 941px; }
  .footer { min-height: 58px; height: auto; padding: 13px 18px; background-size: 1672px 941px; background-position: center bottom; }
  .footer::before { content: ''; position: absolute; inset: 0; background: #302015ed; }
  .footer .sr-only { position: relative; display: block; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; white-space: normal; text-align: center; color: #bdb6a6; font: 10px/1.7 Arial, sans-serif; letter-spacing: 1px; text-transform: uppercase; }
}
@media (max-width: 360px) { .brand { transform: scale(.8); transform-origin: left center; } }
/* Paint at the actual viewport resolution, rather than magnifying a composited layer.
   Coordinates are the original approved art coordinates; the layout is unchanged. */
.render-filters { position: absolute; pointer-events: none; }
.scene-image { display: none; }
@media (min-width: 701px) {
  :root { --x: calc(100vw / 1672); --y: calc(100vh / 941); }
  .world { width: 100%; height: calc(881 * var(--y)); transform: none; background: none; overflow: hidden; }
  .scene-image { display: block; position: absolute; inset: 0; width: 100%; height: 100vh; object-fit: fill; filter: url('#art-clarity'); pointer-events: none; }
  .navigation { left: calc(257 * var(--x)); width: calc(1220 * var(--x)); height: calc(63 * var(--y)); }
  .brand { left: calc(46 * var(--x)); top: calc(13 * var(--y)); width: calc(240 * var(--x)); height: calc(31 * var(--y)); }
  .home { left: calc(350 * var(--x)); top: calc(12 * var(--y)); width: calc(78 * var(--x)); height: calc(35 * var(--y)); }
  .x-link { left: calc(982 * var(--x)); top: calc(12 * var(--y)); width: calc(37 * var(--x)); height: calc(35 * var(--y)); }
  .nav-join { left: calc(1040 * var(--x)); top: calc(8 * var(--y)); width: calc(145 * var(--x)); height: calc(43 * var(--y)); }
  .hero { left: calc(525 * var(--x)); top: calc(65 * var(--y)); width: calc(630 * var(--x)); height: calc(270 * var(--y)); }
  .quest { left: calc(575 * var(--x)); top: calc(340 * var(--y)); width: calc(525 * var(--x)); height: calc(250 * var(--y)); }
  .unit { top: calc(56 * var(--y)); width: calc(70 * var(--x)); height: calc(39 * var(--y)); }
  .days { left: calc(67 * var(--x)); }.hours { left: calc(172 * var(--x)); }.minutes { left: calc(278 * var(--x)); }.seconds { left: calc(382 * var(--x)); }
  .unit::before { width: 100%; height: 100%; transform: none; background-position: calc(-646 * var(--x)) calc(-1901.25 * var(--y)); background-size: 100vw calc(4587.375 * var(--y)); }
  .number { font-size: calc(35 * var(--y)); line-height: calc(39 * var(--y)); letter-spacing: calc(-1.5 * var(--x)); }
  .main-join { left: calc(80 * var(--x)); top: calc(149 * var(--y)); width: calc(360 * var(--x)); height: calc(65 * var(--y)); }
  .cards { left: calc(421 * var(--x)); top: calc(630 * var(--y)); gap: calc(13 * var(--x)); }
  .card { width: calc(267 * var(--x)); height: calc(212 * var(--y)); }
}
/* Feather the parchment repair so there is no hard rectangular seam. */
.unit::before { mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent), linear-gradient(to bottom, transparent, black 12%, black 88%, transparent); mask-composite: intersect; }
/* Mobile-only finish. The approved desktop rules above remain locked. */
@media (max-width: 700px) {
  .world { padding-top: 78px; padding-bottom: 26px; }
  .world::before { background: linear-gradient(180deg, #17120d70 0%, #17120d99 42%, #17120db8 100%); }
  .navigation { height: 64px; border-bottom: 1px solid #bb852c88; box-shadow: 0 3px 14px #100a0577; }
  .brand { top: 16px; }
  .home { top: 21px; }
  .x-link { top: 20px; }
  .nav-join { top: 18px; }
  .hero {
    /* Follow the silhouette of the existing crown, title, and wooden sign. */
    clip-path: polygon(46% 0, 52% 0, 52% 6%, 57% 5%, 58% 13%, 56% 27%, 73% 29%, 93% 35%, 98% 42%, 100% 62%, 91% 63%, 91% 97%, 9% 100%, 8% 65%, 0 65%, 2% 39%, 22% 31%, 43% 27%, 41% 11%, 42% 5%, 47% 8%);
  }
  .quest { margin-top: 8px; margin-bottom: 18px; height: 226px; clip-path: polygon(4% 0, 96% 0, 100% 9%, 100% 63%, 94% 70%, 86% 70%, 86% 93%, 80% 98%, 18% 98%, 14% 93%, 14% 70%, 5% 70%, 0 63%, 0 9%); }
  .cards { gap: 16px; padding-inline: 16px; }
  .card { clip-path: inset(0 0 2px 0 round 4px); filter: drop-shadow(0 5px 5px #09070366); }
  .footer { padding-block: 16px; border-top: 1px solid #a97f3e66; }
  .footer .sr-only { max-width: 340px; margin-inline: auto; line-height: 1.9; }
}
@media (max-width: 380px) {
  .brand { transform: scale(.85); transform-origin: left center; }
}
@media (max-width: 340px) {
  .brand { transform: scale(.72); }
}