:root {
  --cream: #f6f0e6;
  --cream-light: #fcf9f2;
  --pine: #314333;
  --rust: #a55b43;
  --rust-deep: #874735;
  --gold: #b8874d;
  --line: #a99578;
  --muted: #786e61;
  --serif: Georgia, "Times New Roman", Times, serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: #e8e1d5; }
body { min-height: 100vh; margin: 0; padding: 8px 0; overflow-x: hidden; color: var(--pine); background: #e8e1d5; font-family: var(--sans); }
body.modal-open { overflow: hidden; }
button, summary { font: inherit; }
button { cursor: pointer; }

.paper-grain { position: fixed; z-index: 40; inset: 0; pointer-events: none; opacity: .12; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); mix-blend-mode: multiply; }
.snowfall, .snowfall::before, .snowfall::after { position: fixed; z-index: 2; inset: -18% 0 0; width: 100%; height: 120%; content: ""; pointer-events: none; background-image: radial-gradient(circle, rgba(255,255,255,.9) 0 1.2px, transparent 1.5px), radial-gradient(circle, rgba(255,255,255,.7) 0 .8px, transparent 1.1px); background-position: 4px 20px, 89px 60px; background-size: 180px 190px, 126px 139px; opacity: .5; animation: snowfall 30s linear infinite; }
.snowfall::before { opacity: .4; transform: translateX(47px); animation-duration: 40s; }
.snowfall::after { opacity: .24; transform: translateX(-58px); animation-duration: 52s; }
@keyframes snowfall { to { transform: translateY(14%); } }

.page-frame { position: relative; min-height: calc(100vh - 16px); max-width: 1740px; margin: 0 auto; border: 1px solid rgba(128,111,86,.28); border-radius: 32px; background: radial-gradient(ellipse at 50% 14%, rgba(255,255,255,.7), transparent 47%), linear-gradient(135deg, rgba(255,255,255,.4), transparent 42%), var(--cream); box-shadow: 0 12px 45px rgba(84,69,48,.08), inset 0 1px rgba(255,255,255,.78); }
.site-header { position: relative; min-height: clamp(142px, 19vh, 205px); padding: clamp(22px, 4vh, 43px) 24px 8px; text-align: center; }
.heading-wrap { position: relative; z-index: 3; }
.title-star { width: clamp(24px, 2.5vw, 37px); height: auto; margin: 0 0 7px; fill: var(--gold); filter: drop-shadow(0 2px 1px rgba(94,65,32,.12)); }
h1, h2 { font-family: var(--serif); font-weight: 500; }
h1 { margin: 0; color: var(--pine); font-size: clamp(2rem, 4.55vw, 4rem); line-height: .98; letter-spacing: -.045em; text-wrap: balance; }
.title-rule { display: flex; align-items: center; justify-content: center; gap: clamp(13px, 2vw, 28px); margin-top: 13px; }
.title-rule span { width: clamp(27px, 4vw, 60px); height: 1px; background: rgba(79,74,64,.7); }
.eyebrow { margin: 0; color: var(--pine); font-size: clamp(.61rem, .75vw, .82rem); font-weight: 600; letter-spacing: clamp(.16em, .5vw, .39em); text-transform: uppercase; white-space: nowrap; }
.fir { position: absolute; z-index: 1; top: -54px; width: min(35vw, 520px); max-width: 39%; pointer-events: none; transform-origin: center top; filter: drop-shadow(0 5px 5px rgba(42,58,44,.09)); }
.fir-left { left: 0; transform: scaleX(-1) rotate(-6deg); }
.fir-right { right: 0; transform: rotate(6deg); }

main { position: relative; z-index: 3; width: min(100%, 1000px); margin: 0 auto; padding: 0 22px; }
.calendar-section { max-width: 900px; margin: 0 auto; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(6px, .85vw, 12px); }
.day-card { position: relative; display: flex; min-width: 0; min-height: clamp(59px, 8.8vh, 94px); padding: 8px 8px 7px; align-items: center; justify-content: center; overflow: hidden; color: var(--rust); border: 1px solid rgba(139,113,81,.87); border-radius: 45% 45% 9px 9px / 40% 40% 9px 9px; background: rgba(250,247,240,.34); box-shadow: inset 0 1px rgba(255,255,255,.58), 0 1px 1px rgba(92,71,48,.08); transition: transform 210ms ease, color 210ms ease, border-color 210ms ease, background-color 210ms ease, box-shadow 210ms ease; }
.day-card::before, .day-card::after { content: none; }
.day-card:hover { z-index: 3; color: var(--rust-deep); border-color: var(--rust); background: rgba(255,253,247,.75); box-shadow: 0 6px 15px rgba(101,69,40,.12); transform: translateY(-3px) scale(1.025); }
.day-card:focus-visible { z-index: 4; outline: 3px solid rgba(184,135,77,.54); outline-offset: 3px; }
.day-card.is-selected { z-index: 3; color: var(--rust-deep); border-color: var(--rust); background: rgba(255,252,244,.76); transform: translateY(-2px) scale(1.018); }
.day-card.is-complete { color: var(--pine); border-color: rgba(49,67,51,.75); background: rgba(247,250,244,.64); }
.day-card:nth-child(29) { grid-column: 3; }
.day-number { position: absolute; top: clamp(6px, .75vw, 10px); left: 50%; color: var(--pine); font-family: var(--serif); font-size: clamp(.9rem, 1.5vw, 1.45rem); line-height: 1; transform: translateX(-50%); }
.day-icon { display: grid; width: clamp(23px, 2.65vw, 37px); height: clamp(23px, 2.65vw, 37px); margin-top: clamp(9px, 1.5vh, 15px); place-items: center; color: currentColor; }
.day-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.day-check { position: absolute; right: 6px; bottom: 6px; display: grid; width: 16px; height: 16px; place-items: center; color: white; border-radius: 50%; background: var(--pine); font-size: .68rem; font-weight: 800; opacity: 0; transform: scale(.35) rotate(-20deg); transition: opacity 180ms ease, transform 240ms cubic-bezier(.2,1.5,.3,1); }
.is-complete .day-check { opacity: 1; transform: scale(1) rotate(0); }

.journey { max-width: 870px; margin: clamp(12px, 2vh, 22px) auto 0; padding: 9px 2px 10px; border-top: 1px solid rgba(153,133,105,.55); }
.journey-top { display: flex; min-height: 21px; align-items: center; justify-content: space-between; gap: 15px; }.journey p { margin: 0; }
#progressText { color: var(--pine); font-family: var(--serif); font-size: clamp(.85rem, 1.25vw, 1rem); }
.settings { position: relative; color: var(--muted); font-size: .68rem; }.settings summary { list-style: none; cursor: pointer; text-decoration: underline; text-decoration-color: rgba(120,110,97,.46); text-underline-offset: 3px; }.settings summary::-webkit-details-marker { display: none; }.settings[open] summary { color: var(--rust); }
.reset-button { position: absolute; z-index: 6; top: 23px; right: 0; width: max-content; padding: 7px 9px; color: var(--rust-deep); border: 1px solid var(--line); border-radius: 3px; background: var(--cream-light); box-shadow: 0 4px 12px rgba(85,65,42,.12); font-size: .72rem; }.reset-button:hover, .reset-button:focus-visible { border-color: var(--rust); }
.progress-track { height: 4px; margin-top: 8px; overflow: hidden; border-radius: 99px; background: rgba(49,67,51,.16); }.progress-fill { width: 0%; height: 100%; border-radius: inherit; background: var(--pine); box-shadow: 0 0 6px rgba(49,67,51,.18); transition: width 480ms cubic-bezier(.22,.9,.35,1); }.completion-message { margin-top: 8px !important; color: var(--rust); font-family: var(--serif); font-size: .87rem; text-align: center; }

.village { position: relative; max-width: 1120px; margin: clamp(0px, .5vh, 5px) auto -1px; pointer-events: none; }.village-art { display: block; width: 100%; height: clamp(98px, 17vh, 185px); object-fit: cover; object-position: center bottom; filter: saturate(.86) contrast(.98); transition: filter .7s ease, opacity .7s ease; }.village::after { position: absolute; right: 12%; bottom: 9%; width: 21%; height: 35%; content: ""; opacity: 0; background: radial-gradient(ellipse, rgba(239,188,99,.38), transparent 68%); filter: blur(7px); transition: opacity .7s ease; }.village.level-one .village-art { filter: saturate(.95) contrast(1); }.village.level-three .village-art { filter: saturate(1.02) brightness(1.02); }.village.level-five::after { opacity: .65; }.village.level-six .village-art { filter: saturate(1.08) brightness(1.04) drop-shadow(0 0 11px rgba(223,179,93,.25)); animation: villageShine 2.8s ease-in-out infinite alternate; }@keyframes villageShine { to { filter: saturate(1.12) brightness(1.08) drop-shadow(0 0 17px rgba(223,179,93,.44)); } }

.modal-backdrop { position: fixed; z-index: 20; inset: 0; display: grid; padding: 20px; place-items: center; overflow-y: auto; background: rgba(32,42,32,.48); opacity: 0; transition: opacity 260ms ease; }.modal-backdrop[hidden] { display: none; }.modal-backdrop.is-visible { opacity: 1; }
.task-card { position: relative; width: min(100%, 480px); max-height: min(610px, calc(100vh - 40px)); padding: clamp(30px, 5vw, 44px) clamp(25px, 6vw, 48px) 32px; overflow-y: auto; color: var(--pine); border: 1px solid #b79b71; border-radius: 5px; background: var(--cream-light); box-shadow: 0 18px 50px rgba(26,31,24,.32), inset 0 0 0 4px #f4ead8, inset 0 0 0 5px rgba(184,135,77,.48); transform: translateY(15px) scale(.96); transition: transform 290ms cubic-bezier(.2,.8,.25,1); }.modal-backdrop.is-visible .task-card { transform: translateY(0) scale(1); }.task-card:focus { outline: none; }
.close-button { position: absolute; top: 13px; right: 13px; display: grid; width: 32px; height: 32px; place-items: center; color: var(--pine); border: 1px solid transparent; border-radius: 50%; background: transparent; font-size: 1.6rem; line-height: 1; }.close-button:hover { color: var(--rust); background: rgba(165,91,67,.08); }.close-button:focus-visible, .complete-button:focus-visible { outline: 3px solid rgba(184,135,77,.52); outline-offset: 3px; }.card-sprig { position: absolute; top: 21px; left: 23px; color: var(--gold); font-size: 1.1rem; }
.task-date { margin: 0 0 12px; color: var(--rust); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }.task-icon { width: 43px; height: 43px; margin-bottom: 10px; color: var(--rust); }.task-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }.task-card h2 { margin: 0 0 14px; color: var(--pine); font-size: clamp(1.5rem, 5vw, 2rem); line-height: 1.12; letter-spacing: -.025em; }.task-card > p:not(.task-date) { margin: 0; color: #4d4c43; font-size: .98rem; line-height: 1.66; }
.complete-button { width: 100%; min-height: 44px; margin-top: 25px; padding: 10px 17px; color: #fffdf8; border: 1px solid var(--pine); border-radius: 3px; background: var(--pine); box-shadow: 0 2px 0 #203222; font-weight: 650; transition: transform .18s, background .18s; }.complete-button:hover { background: #273b29; transform: translateY(-1px); }.complete-button.is-done { color: var(--pine); background: transparent; box-shadow: none; }.complete-button.is-done:hover { color: var(--rust); border-color: var(--rust); }
.sparkles { position: absolute; z-index: 2; inset: 0; pointer-events: none; }.spark { position: absolute; color: var(--gold); font-size: 1.1rem; opacity: 0; animation: spark 650ms ease-out forwards; }@keyframes spark { 0% { opacity: 0; transform: translate(0,0) scale(.25) rotate(0); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x),var(--y)) scale(1.15) rotate(70deg); } }

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

@media (max-width: 760px) {
  body { padding: 0; }.page-frame { min-height: 100vh; margin: 0; border: 0; border-radius: 0; }.site-header { min-height: 146px; padding: 23px 14px 6px; }.fir { top: -8px; width: 225px; max-width: 57%; transform-origin: center top; }.fir-left { left: 0; transform: rotate(-6deg); }.fir-right { right: 0; transform: scaleX(-1) rotate(-6deg); }.title-star { width: 25px; margin-bottom: 5px; }h1 { font-size: clamp(1.65rem, 8vw, 2.2rem); }.title-rule { gap: 10px; margin-top: 11px; }.title-rule span { width: 28px; }.eyebrow { font-size: .55rem; letter-spacing: .23em; }
  main { padding: 0 16px; }.calendar-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }.day-card { min-height: clamp(71px, 21vw, 91px); border-radius: 42% 42% 8px 8px / 34% 34% 8px 8px; }.day-card:nth-child(29) { grid-column: auto; }.day-number { top: 8px; font-size: clamp(.88rem, 4.5vw, 1.12rem); }.day-icon { width: clamp(23px, 7vw, 31px); height: clamp(23px, 7vw, 31px); margin-top: 11px; }.day-check { width: 15px; height: 15px; right: 5px; bottom: 5px; }.journey { margin-top: 15px; padding: 8px 0; }.village { width: calc(100% + 20px); margin-left: -10px; }.village-art { height: clamp(98px, 28vw, 145px); }
  .task-card { align-self: end; max-height: min(620px, calc(100vh - 15px)); padding-bottom: 26px; border-radius: 10px 10px 4px 4px; }.modal-backdrop { padding: 8px; place-items: end center; }
}
@media (max-width: 390px) { .calendar-grid { gap: 6px; }.day-card { min-height: 72px; }.eyebrow { letter-spacing: .18em; }.journey-top { gap: 8px; } }
@media (max-height: 760px) and (min-width: 761px) { .site-header { min-height: 125px; padding-top: 19px; }.title-star { width: 23px; margin-bottom: 3px; }.title-rule { margin-top: 7px; }.fir { top: -62px; }.day-card { min-height: clamp(66px, 9.6vh, 80px); }.day-icon { width: 27px; height: 27px; margin-top: 10px; }.day-number { font-size: 1rem; }.journey { margin-top: 9px; padding-top: 6px; }.village-art { height: 102px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }