:root {
  color-scheme: dark;
  --pine: #102b26;
  --pine-deep: #091d1b;
  --gold: #e7c17b;
  --cream: #fff5df;
  --muted: #c6d0c2;
  --red: #731f29;
  --line: rgba(231, 193, 123, .28);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  scroll-behavior: smooth;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--cream); background: radial-gradient(ellipse at 50% 5%, #244039 0, var(--pine) 40%, var(--pine-deep) 100%); }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
a { color: inherit; }
button, a, h2 { touch-action: manipulation; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--gold); outline-offset: 5px; }
button:disabled { cursor: progress; opacity: .7; }
.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; }
.skip-link { position: fixed; top: -100px; left: 20px; z-index: 10; background: var(--cream); color: var(--pine); padding: 14px 20px; border-radius: 4px; }
.skip-link:focus { top: 12px; }
.site-header { max-width: 1280px; margin: auto; padding: 25px 44px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); }
.wordmark { display: flex; align-items: center; gap: 12px; font-size: 13px; text-decoration: none; letter-spacing: .035em; }
.wordmark > span:first-child { color: var(--gold); font-size: 25px; }
.wordmark-divider { opacity: .35; }
.header-note { color: var(--muted); font-family: Georgia, serif; font-size: 14px; font-style: italic; }
.welcome { padding: 58px 24px 34px; text-align: center; }
.eyebrow { color: var(--gold); font-size: 10px; font-weight: 650; line-height: 1.6; letter-spacing: .17em; text-transform: uppercase; }
.welcome .eyebrow { font-size: 11px; letter-spacing: .23em; }
.welcome .eyebrow span { display: inline-block; padding-right: 8px; }
h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
h1 { margin: 12px 0 17px; font-size: clamp(42px, 5.5vw, 70px); line-height: 1.1; letter-spacing: -.045em; }
.welcome > p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.7; }
.welcome-divider { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 29px; color: var(--gold); }
.welcome-divider span { display: block; height: 1px; width: 56px; background: var(--line); }
.garden-layout { display: grid; grid-template-columns: minmax(0, 660px) minmax(250px, 300px); gap: 48px; max-width: 1104px; padding: 0 32px; margin: 0 auto; align-items: start; scroll-margin-top: 20px; }
.map-frame { position: relative; border-radius: 14px; border: 1px solid #9b8053; box-shadow: 0 18px 70px #0005, 0 0 0 5px #e7c17b08; }
.garden-map { display: block; width: 100%; height: auto; border-radius: 13px; }
.hotspot { display: block; position: absolute; min-height: 44px; min-width: 44px; border-radius: 24px; border: 2px solid transparent; transition: box-shadow .18s ease, background-color .18s ease; }
.hotspot:hover, .hotspot:focus-visible { background-color: #ffdd7715; box-shadow: 0 0 20px 3px #f7d493bb, inset 0 0 10px #ffe1a980; border-color: #ffe4a1; outline: 2px solid #fff5df; outline-offset: 2px; }
.map-caption { color: var(--muted); font-size: 11px; line-height: 1.8; text-align: center; margin: 17px 0 0; }
.map-caption span { color: var(--gold); margin-right: 5px; }
.garden-guide { position: sticky; top: 32px; padding-top: 25px; }
.garden-guide h2 { font-size: 34px; line-height: 1.15; margin: 12px 0 16px; letter-spacing: -.025em; }
.guide-intro { font-size: 13px; color: var(--muted); line-height: 1.85; margin: 0 0 25px; }
.music-card { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 20px 0; }
.music-button { min-height: 44px; padding: 10px 16px; border: 1px solid #e7c17b66; border-radius: 7px; background: #e7c17b0c; color: var(--cream); font-size: 12px; font-weight: 550; line-height: 1.5; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.music-button > span:first-child { color: var(--gold); font-size: 18px; line-height: 1; }
.music-button:hover { background: #e7c17b1c; border-color: var(--gold); }
.music-button[aria-pressed="true"] { background: #e7c17b20; }
.track-title { color: var(--muted); font-size: 10px; line-height: 1.7; margin: 10px 0 0; max-width: 240px; }
.music-message { font-size: 12px; color: var(--gold); margin: 8px 0 0; line-height: 1.5; }
.music-message:empty { display: none; }
.mobile-music-slot:empty { display: none; }
.location-list { list-style: none; margin: 22px 0 0; padding: 0; }
.location-list li { border-bottom: 1px solid #e7c17b16; }
.location-list a { display: flex; gap: 13px; align-items: center; min-height: 56px; padding: 11px 2px; text-decoration: none; font-size: 12px; line-height: 1.6; }
.location-list a:hover { color: var(--gold); }
.location-number { color: var(--gold); font-size: 10px; font-variant-numeric: tabular-nums; opacity: .85; }
.location-arrow { margin-left: auto; color: var(--gold); opacity: .65; }
.free-note { margin: 24px 0 0; color: var(--muted); font-size: 11px; line-height: 1.8; }
.map-promotion { max-width: 1040px; margin: 40px auto 0; padding: 22px 26px; display: flex; align-items: center; gap: 32px; border: 1px solid var(--line); background: #e7c17b06; border-radius: 9px; }
.map-promotion .eyebrow { font-size: 9px; margin: 0 0 5px; }
.map-promotion h2 { font-size: 19px; line-height: 1.4; margin: 0 0 7px; }
.map-promotion > div > p:last-child { max-width: 660px; font-size: 11px; line-height: 1.7; color: var(--muted); margin: 0; }
.small-cta { border: 1px solid var(--line); padding: 12px 16px; min-height: 44px; border-radius: 5px; text-decoration: none; font-size: 11px; font-weight: 600; line-height: 1.5; flex-shrink: 0; }
.small-cta:hover { background: #e7c17b18; border-color: var(--gold); }
.link-arrow { display: inline-block; padding-left: 10px; }
.site-footer { text-align: center; padding: 38px 20px 30px; }
.site-footer > span:first-child { color: var(--gold); }
.site-footer p { margin: 10px 0; font-family: Georgia, serif; font-size: 18px; font-style: italic; }
.footer-brand { color: var(--muted); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
body.reader-open { overflow: hidden; }
dialog { color-scheme: light; width: min(1100px, calc(100% - 48px)); max-width: none; max-height: calc(100dvh - 48px); padding: 0; border: 1px solid #b9975f; border-radius: 14px; color: #26372f; background: #fbf6eb; box-shadow: 0 28px 100px #0008; overflow: hidden; }
dialog[open] { display: flex; flex-direction: column; }
dialog::backdrop { background: #041310dc; backdrop-filter: blur(5px); }
.reader-toolbar { padding: 12px 22px; flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; align-items: center; background: var(--pine); color: var(--cream); border-bottom: 1px solid #b9975f; }
.reader-toolbar .music-message { flex-basis: 100%; margin: 0; }
.back-button { min-height: 44px; color: var(--cream); background: none; border: 0; padding: 8px 0; font-size: 12px; }
.back-button span { padding-right: 8px; }
.back-button:hover { color: var(--gold); }
.reader-scroll { overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
.devotional:not([hidden]) { display: grid; grid-template-columns: 40% 60%; align-items: start; }
.scene { position: sticky; top: 0; background: var(--pine-deep); }
.scene img { display: block; width: 100%; height: auto; }
.reading { padding: 35px 38px 24px; }
.location-caption { color: #78592b; margin: 0 0 12px; font-size: 9px; }
.reading h2 { font-size: clamp(30px, 3.2vw, 42px); line-height: 1.15; letter-spacing: -.03em; margin: 0 0 24px; color: #193d31; }
.reading h2:focus { outline: none; }
.devotional-body { font-family: Georgia, serif; font-size: 17px; line-height: 1.9; margin: 0; }
.scripture { margin: 29px 0 0; padding: 21px 23px; background: #eee7d7; border-left: 2px solid #a77c34; border-radius: 0 7px 7px 0; }
.scripture blockquote { margin: 0; font-family: Georgia, serif; font-style: italic; font-size: 16px; line-height: 1.85; color: #39503c; }
.scripture figcaption { color: #6f5224; font-size: 10px; font-weight: 650; line-height: 1.7; letter-spacing: .07em; margin-top: 13px; }
.gift-promotion { position: relative; isolation: isolate; margin-top: 38px; padding: 29px; background: radial-gradient(ellipse at 100% 0%, #4a5940, transparent 70%), #18392c; border: 1px solid #ae8b50; border-radius: 10px; color: var(--cream); box-shadow: 0 5px 18px #1828190c; }
.gift-promotion::before { content: ""; position: absolute; z-index: -1; inset: 5px; border: 1px solid #d8b26325; border-radius: 6px; pointer-events: none; }
.pine-sprig { position: absolute; top: 5px; right: 15px; color: #c2b974; opacity: .32; font-size: 56px; line-height: 1; transform: rotate(35deg); z-index: -1; }
.gift-promotion .paid-label { font-size: 9px; margin: 0 0 16px; color: var(--gold); }
.gift-promotion h3 { font-size: 25px; line-height: 1.25; margin: 0 0 18px; letter-spacing: -.02em; }
.gift-promotion .product-name { color: var(--gold); font-family: Georgia, serif; font-size: 19px; line-height: 1.4; margin: 0 0 14px; }
.gift-promotion p:not(.eyebrow):not(.product-name) { font-size: 12px; line-height: 1.85; margin: 0 0 13px; }
.gift-cta { display: flex; align-items: center; justify-content: center; margin-top: 22px; padding: 14px 15px; min-height: 48px; color: #fff3dc; background: var(--red); border: 1px solid #d2a35d; border-radius: 6px; font-size: 12px; font-weight: 600; line-height: 1.6; text-decoration: none; text-align: center; }
.gift-cta:hover { background: #8b2935; }
.product-cover { display: block; max-width: min(100%, 220px); max-height: 280px; object-fit: contain; margin: 18px auto; border-radius: 4px; }
.reader-navigation { border-top: 1px solid #d4c8af; margin-top: 30px; padding-top: 18px; display: flex; justify-content: space-between; gap: 15px; }
.reader-navigation a, .reader-navigation button { display: inline-flex; min-height: 44px; align-items: center; padding: 8px 0; text-decoration: none; background: none; border: 0; color: #5b4320; font-size: 11px; font-weight: 600; }
.reader-navigation a:hover, .reader-navigation button:hover { text-decoration: underline; }
.reading a:focus-visible, .reading button:focus-visible { outline-color: #8e5e12; }
.noscript-note { text-align: center; padding: 20px; line-height: 1.7; }
@media (min-width: 1500px) { .garden-layout { max-width: 1180px; grid-template-columns: minmax(0, 720px) 300px; gap: 64px; } .map-promotion { max-width: 1116px; } }
@media (max-width: 1104px) { .map-promotion { margin-left: 32px; margin-right: 32px; } .garden-layout { gap: 30px; } }
@media (max-width: 760px) {
  .site-header { padding: 17px 22px; }
  .header-note { display: none; }
  .wordmark { font-size: 11px; }
  .welcome { padding: 35px 20px 24px; }
  .welcome .eyebrow { font-size: 9px; letter-spacing: .16em; }
  .welcome > p:not(.eyebrow) { font-size: 12px; max-width: 280px; margin-inline: auto; }
  .welcome-divider { margin-top: 18px; }
  .garden-layout { grid-template-columns: 1fr; gap: 27px; padding: 0 18px; max-width: 560px; }
  .garden-guide { position: static; padding-top: 0; }
  .guide-content { display: flex; flex-direction: column; }
  .garden-guide .eyebrow { margin: 0; }
  .garden-guide h2 { font-size: 29px; margin: 9px 0 12px; }
  .guide-intro { font-size: 12px; margin-bottom: 18px; }
  .mobile-music-slot { max-width: 560px; padding: 0 18px; margin: 0 auto 24px; }
  .music-card { padding: 0; border: 0; text-align: center; }
  .track-title { max-width: none; font-size: 9px; margin-top: 7px; }
  .location-list { margin-top: 12px; }
  .location-list a { min-height: 51px; font-size: 13px; }
  .free-note { margin-top: 18px; }
  .map-promotion { flex-direction: column; align-items: flex-start; gap: 16px; margin: 28px 18px 0; padding: 20px; }
  .map-promotion h2 { font-size: 18px; }
  .map-promotion .small-cta { font-size: 11px; }
  .map-caption { font-size: 10px; margin-top: 12px; }
  dialog { width: calc(100% - 20px); max-height: calc(100dvh - 20px); border-radius: 10px; }
  .reader-toolbar { padding: 9px 12px; column-gap: 10px; }
  .reader-toolbar .music-button { font-size: 10px; padding: 8px 10px; gap: 5px; }
  .back-button { font-size: 10px; }
  .back-button span { padding-right: 3px; }
  .devotional:not([hidden]) { display: block; }
  .scene { position: static; background: #0e211e; }
  .scene img { width: 100%; height: min(53svh, 440px); object-fit: contain; }
  .reading { padding: 27px 23px 20px; }
  .reading h2 { font-size: 34px; margin-bottom: 20px; }
  .devotional-body { font-size: 17px; line-height: 1.85; }
  .scripture { padding: 19px; }
  .gift-promotion { padding: 24px 21px; margin-top: 30px; }
  .gift-promotion h3 { font-size: 25px; }
  .gift-cta { font-size: 11px; padding: 12px; }
  .site-footer { padding: 30px 20px; }
}
@media (max-width: 350px) {
  .reader-toolbar { justify-content: center; }
  .reader-toolbar .back-button { flex-basis: 100%; min-height: 32px; }
  .reading { padding-inline: 18px; }
}
@media (prefers-reduced-motion: reduce) { :root { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }