/* Little Field: warm paper, woodland colours and ink outlines, shared with the game. */
:root {
  --paper:#fff8e8; --ink:#453c2c; --green:#42664d; --muted:#766b54;
  --line:#d7c7a5; --accent:#e9c56d; --ink-line:#65563d;
  --paper-grain:radial-gradient(#aa916b14 .65px,transparent .9px);
  --panel-shadow:4px 5px 0 #d6c39a;
  background:var(--paper); scroll-padding-top:24px;
}
body { background:var(--paper-grain) 0 0 / 6px 6px,var(--paper); }
.site-header { position:relative; border-bottom:1px solid var(--line); }
.brand { color:var(--ink); letter-spacing:1px; font-weight:800; }
.brand small { letter-spacing:2.8px; color:var(--muted); }
.brand img { border-radius:10px; filter:drop-shadow(1px 2px 0 #bba579); }
.site-header nav { gap:28px; }
.site-header nav>a:not(.nav-play):hover { color:var(--green); }
.nav-lang { background:#fffaf0; color:var(--muted); border-color:#bdac86; border-radius:7px; }
.nav-play { background:#edcf83; border:1.5px solid var(--ink-line); border-radius:8px 5px 9px 5px; box-shadow:2px 3px 0 var(--ink-line); font-weight:700; }
.nav-play:hover { background:#f4dc9c; }
.hero { position:relative; isolation:isolate; gap:44px; padding-top:64px; padding-bottom:88px; }
.hero:before { content:""; position:absolute; z-index:-1; pointer-events:none; top:-1px; bottom:0; left:50%; width:100vw; transform:translateX(-50%); background:url('/assets/countryside.svg') center bottom / cover no-repeat; opacity:.64; }
.hero .eyebrow { color:#6d774f; font-size:11px; letter-spacing:1.2px; }
.sun { display:grid; place-items:center; width:37px; height:37px; flex:none; color:#92702e; background:#f5d780; border:1px solid #c4a45e; border-radius:50%; font-size:25px; }
h1,h2,.guide-promo h3 { font-family:Georgia,"STSong","SimSun",serif; color:var(--ink); font-weight:700; }
h1 { line-height:1.4; letter-spacing:1px; }
h1 span { color:var(--green); box-shadow:inset 0 -.28em #edce7a80; }
h1 span:after { display:none; }
.intro { color:#71664f; line-height:2.05; }
.button { border:1.5px solid var(--ink-line); border-radius:8px 5px 9px 5px; box-shadow:2px 3px 0 var(--ink-line); font-weight:700; }
.button:hover { transform:translateY(-2px); }
.button:active { transform:translate(1px,1px); box-shadow:1px 1px 0 var(--ink-line); }
.button.primary { background:var(--green); color:#fff8e5; }
.button.primary:hover { background:#36583f; }
.button.secondary { background:#fffaf0; color:var(--ink); }
.button.secondary:hover { background:#f6e4b2; }
.button svg { stroke-width:2; }
.release-note { font-size:11px; }
.hero-notes { gap:16px; flex-wrap:wrap; }
.hero-notes i { font-weight:700; }
.hero-visual { padding:0 0 28px; }
.photo-frame { aspect-ratio:4/3; border:2px solid var(--ink-line); border-radius:18px 8px 20px 8px; box-shadow:7px 8px 0 #d0bb8f; background:#e3e6ce; transform:rotate(1.2deg); }
.photo-frame>img { object-fit:cover; object-position:center; }
.photo-tag { left:17px; top:17px; padding:9px 12px; color:var(--ink); background:#fff8e8f5; border:1px solid #8b7956; border-radius:6px 4px 7px 4px; box-shadow:2px 2px 0 #8b79564a; font-size:10px; letter-spacing:.5px; }
.field-note { left:-16px; bottom:-2px; background:#fff8e8; border:1.5px solid var(--ink-line); border-radius:8px 5px 10px 5px; box-shadow:3px 4px 0 #9f8b63; padding:16px 20px; transform:rotate(-3deg); }
.field-note>span { color:#648355; font-size:27px; }
.field-note small { color:var(--muted); }
.scribble { right:4px; bottom:-18px; color:#75805d; }
.season-strip { border-block:1.5px solid #9e956d; background:#e5ebd0; }
.season-strip .wrap { padding-block:20px; color:#5c6d47; font-weight:600; }
.season-strip span:nth-child(even) { color:#9f9857; }
.life { padding-block:82px; }
.section-heading .eyebrow,.faq .eyebrow { color:#85815a; letter-spacing:2px; }
.features { gap:24px; }
.features article { padding:0 0 28px; overflow:hidden; border:1.5px solid var(--ink-line); border-radius:12px 7px 14px 7px; background:#fffaf0; box-shadow:var(--panel-shadow); }
.feature-image { width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; border-bottom:1.5px solid #b6a782; background:#e1e4ca; }
.features .feature-number { margin:22px 24px 14px; color:#8e794a; font-weight:700; }
.features h3 { margin:0 24px 12px; }
.features p { margin:0 24px; }
.guide-promo { border:1.5px solid var(--ink-line); border-radius:12px 7px 14px 7px; background:#f5edda; box-shadow:var(--panel-shadow); }
.guide-promo:hover { border-color:var(--green); background:#faf1dc; }
.guide-promo h3 { font-weight:700; }
.guide-promo-list li { background:#fff8e7; border:1px solid #baa77f; border-radius:7px; }
.guide-promo-list b { color:var(--green); }
.capital-preview { background:#34533f; border:2px solid #4a4d30; border-radius:16px 8px 18px 8px; box-shadow:5px 6px 0 #d2c199; }
.capital-copy h2 { color:#fff5d9; }
.capital-copy h2 span { color:#f0d182; }
.capital-status { border-color:#a5ad7e; border-radius:5px; background:#426047; color:#eeefd6; }
.capital-ticket { border:1.5px solid #d6c08b; border-radius:10px 6px 12px 6px; background:#3d5d44; box-shadow:3px 4px 0 #213c2b; }
.capital-art { color:#efd493; }
.invitation { border:1.5px solid var(--ink-line); border-radius:14px 7px 17px 7px; background:var(--paper-grain) 0 0 / 5px 5px,#e7edcf; box-shadow:var(--panel-shadow); }
.invitation-art { transform:rotate(5deg); }
.invitation-art img { filter:drop-shadow(4px 5px 0 #b0b487); }
.faq-items details { border-color:#c7b78f; }
.faq-items summary { font-weight:600; }
.faq-items summary:after { color:#688057; }
.faq-items details[open] { background:#f5edda; padding-inline:16px; border-radius:8px; }
.faq-items a { color:var(--green); text-decoration:underline; text-underline-offset:3px; }
footer { border-top:1.5px solid #b5a57e; }
.mobile-download { background:#fff8e8f5; border-top:1.5px solid var(--ink-line); backdrop-filter:none; }
.guide-hero { border-bottom:1px solid var(--line); }
.toolbar { border-block:1.5px solid #aeaa80; background:#e5ebd0; }
.chip { border-color:#9e956f; background:#fffaf0; border-radius:7px; }
.chip[aria-pressed="true"] { background:var(--green); box-shadow:1px 2px 0 #66764f; }
.gsearch { border-color:#9e956f; background:#fffaf0; border-radius:8px; }
.gcard { border:1px solid #a99774; background:#fffaf0; border-radius:10px 6px 12px 6px; box-shadow:2px 3px 0 #ddd0ae; }
.gcard:hover { border-color:var(--green); }
.gicon { background:#e8edcf; border:1px solid #c4c49a; border-radius:9px 5px 10px 5px; }
.gicon svg { filter:drop-shadow(.5px 1px 0 #86785966); }
.gcount-badge { background:#e5ebcc; color:var(--green); border:1px solid #b7bc91; border-radius:5px; }
.gnote,.story-toc,.story-start { border:1px solid #baa680; border-radius:10px 6px 12px 6px; background:#f4ecd6; }
.gtable th { background:#e8e5cb; }
.story-cards article { border:1.5px solid var(--ink-line); background:#fffaf0; border-radius:10px 6px 12px 6px; box-shadow:var(--panel-shadow); }
.story { background:#fff9ec; }
.story-heading { border-bottom:1px solid var(--line); padding-bottom:24px; }
.story-heading h1 { font-weight:700; }
.story section h2 { color:#526c49; }
.story-related { border-color:#c7b78f; }
.privacy { background:#fff9ec; }
@media(max-width:1100px) {
  .hero { gap:28px; padding-top:44px; }
  .photo-frame { aspect-ratio:1.05; }
  .field-note { left:-8px; padding:14px 16px; }
  .site-header nav { gap:20px; }
}
@media(max-width:760px) {
  .site-header nav { gap:12px; }
  .hero { padding-top:32px; padding-bottom:65px; gap:34px; }
  .hero .eyebrow { font-size:10px; letter-spacing:.5px; }
  .hero-visual { width:100%; padding:0 5px 30px 0; }
  .photo-frame { aspect-ratio:4/3; box-shadow:5px 6px 0 #d0bb8f; }
  .photo-tag { left:11px; top:12px; font-size:9px; padding:8px 10px; }
  .field-note { bottom:5px; left:9px; padding:12px 15px; font-size:12px; }
  .field-note small { font-size:9px; margin-top:5px; }
  .scribble { right:6px; font-size:13px; }
  .features article { padding-bottom:24px; }
  .feature-image { aspect-ratio:1.8; }
  .features .feature-number { margin-top:20px; }
  .life { padding-block:52px; }
  .capital-preview { box-shadow:3px 4px 0 #d2c199; }
  .hero-notes { gap:12px; font-size:10px; }
}
@media(prefers-reduced-motion:reduce) {
  :root { scroll-behavior:auto; }
  .button { transition:none; }
}