@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Serif+Display:ital@0;1&display=swap');
:root{--ink:#183a35;--cream:#f4f1e7;--line:#d7dbce;--lime:#d9ef9c}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--cream);font-family:'DM Sans',sans-serif;line-height:1.6}a{color:inherit}a:focus-visible,summary:focus-visible{outline:3px solid #df9d41;outline-offset:4px}.skip{position:absolute;top:-80px;background:white;z-index:5;padding:1rem}.skip:focus{top:0}.top{height:76px;display:flex;align-items:center;gap:2rem;padding:0 max(5vw,24px);background:#f9f8f1}.brand{font-weight:700;letter-spacing:.1em;text-decoration:none;font-size:15px;white-space:nowrap}.brand span:not(.compass){color:#8b9d82}.compass{color:#58806c;font-size:25px;margin-right:8px}.top nav{display:flex;gap:32px;margin:auto;font-size:14px}.top nav a,.nav-play{text-decoration:none;font-weight:600}.nav-play{background:#183a35;color:white;border-radius:4px;padding:10px 17px;font-size:13px}.hero{background:#102d2d;color:#f7f7e9;overflow:hidden}.hero-inner{max-width:1240px;margin:auto;display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:40px;padding:80px 35px 85px}.eyebrow{font-size:11px;font-weight:700;letter-spacing:.17em;color:#819b82;margin:0 0 18px}.hero .eyebrow{color:#d7e9b7}.hero .eyebrow span{display:inline-block;width:7px;height:7px;background:#d9ef9c;border-radius:50%;margin-right:8px}h1,h2{font-family:'DM Serif Display',Georgia,serif;font-weight:400;line-height:1.02;letter-spacing:-.035em;margin:0}h1{font-size:clamp(50px,6vw,86px)}h1 em,h2 em{font-weight:400;color:#bcd78e}.intro{max-width:490px;color:#d6e2d7;font-size:18px;margin:24px 0 30px}.cta{display:inline-flex;justify-content:space-between;gap:45px;background:var(--lime);color:#153a2f;padding:15px 20px;border-radius:4px;text-decoration:none;font-weight:700}.hero-note{font-size:12px;color:#b5c6b8;margin:19px 0 0}.globe{position:relative;width:min(100%,390px);aspect-ratio:1;margin:auto;border:1px solid #5b8170;border-radius:50%;background:radial-gradient(circle at 42% 38%,#38604d,#193f37 66%,#112f2d);box-shadow:0 0 0 22px #ffffff08,0 0 0 55px #ffffff04;display:grid;place-items:center}.globe:before,.globe:after{content:'';position:absolute;border:1px solid #7da18966;border-radius:50%;inset:12% 32%}.globe:after{inset:32% 5%;transform:rotate(-17deg)}.globe-center{font-size:76px;color:#d9ef9c}.globe-label,.coordinates{position:absolute;font-size:10px;letter-spacing:.17em;color:#d0e3cb}.globe-label{left:11%;top:26%}.coordinates{bottom:19%}.player-section,.guide,.about,.faq{max-width:1170px;margin:auto;padding:80px 32px}.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:24px}.section-head h2,.guide h2,.about h2,.faq h2{font-size:clamp(40px,5vw,62px)}.section-head p:not(.eyebrow){margin:10px 0 0}.section-head a{font-size:13px;font-weight:700;white-space:nowrap}.game-frame{background:#e1e9d9;border:1px solid #c5d1c3;border-radius:8px;overflow:hidden;min-height:720px}.game-frame iframe{display:block;width:100%;height:720px;border:0}.player-note{display:flex;justify-content:space-between;gap:15px;font-size:12px;color:#627d6b;margin-top:12px}.guide{display:grid;grid-template-columns:1fr 1fr;gap:12%;border-top:1px solid var(--line)}.guide-intro p:last-child{max-width:410px}.guide h2 em{color:#67895c}.steps article{display:flex;gap:22px;padding:20px 0;border-bottom:1px solid var(--line)}.steps article:first-child{padding-top:0}.steps article span{font-size:12px;color:#94a68b}.steps h3{margin:0;font-size:17px}.steps p{margin:6px 0 0;color:#5e7166;font-size:14px}.about{border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:20px 10%}.about .eyebrow{grid-column:1/-1}.about p{margin-top:0}.faq{border-top:1px solid var(--line)}.faq h2{margin-bottom:30px}.faq details{border-top:1px solid var(--line);padding:18px 0}.faq details:last-child{border-bottom:1px solid var(--line)}summary{cursor:pointer;font-weight:700}footer{background:#102d2d;color:#dce8d9;padding:45px max(5vw,24px);display:flex;justify-content:space-between;gap:30px}footer p,footer a:not(.brand){font-size:13px}footer div:last-child{display:flex;gap:25px;align-items:center} @media(max-width:700px){.top{height:65px;gap:10px}.top nav{display:none}.nav-play{margin-left:auto}.hero-inner{grid-template-columns:1fr;padding:55px 24px 65px}.globe{width:240px;margin-top:20px}.player-section,.guide,.about,.faq{padding:55px 22px}.section-head{align-items:start;flex-direction:column}.game-frame,.game-frame iframe{height:720px;min-height:720px}.player-note{flex-direction:column}.guide,.about{grid-template-columns:1fr;gap:30px}.about .eyebrow{grid-column:auto;margin-bottom:-15px}footer{flex-direction:column}footer div:last-child{justify-content:space-between}}
/* The atlas is an abstract original illustration, not a map or gameplay screenshot. */
.hero-inner{padding-top:64px;padding-bottom:68px}
.atlas{position:relative;isolation:isolate;aspect-ratio:1;width:min(100%,370px);margin:auto;display:grid;place-items:center}
.atlas:before,.atlas:after{content:"";position:absolute;border:1px solid #a9c7a34d;border-radius:50%;inset:0}
.atlas:after{inset:9%;border-style:dashed;animation:atlas-turn 50s linear infinite}
.atlas-ring{position:absolute;inset:17%;border:1px solid #a9c7a34d;border-radius:50%;transform:rotate(30deg) scaleX(.58)}
.atlas-ring-two{transform:rotate(-30deg) scaleX(.58)}
.atlas-core{position:relative;width:50%;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;background:#a8c38318;border:1px solid #a9c7a36e}
.atlas-star{font-size:clamp(64px,8vw,112px);line-height:1;color:#d9ef9c}
.atlas-north{position:absolute;top:-65%;font-size:11px;letter-spacing:.16em;color:#d9ef9c}
.atlas-caption{position:absolute;top:104%;text-align:center;color:#c9dbc5;font-size:10px;letter-spacing:.18em;line-height:1.6;white-space:nowrap}
.atlas-index,.atlas-coordinates{position:absolute;font-size:9px;letter-spacing:.15em;color:#c9dbc5}
.atlas-index{top:5%;left:-7%}.atlas-coordinates{right:-8%;bottom:5%}
.field-notes{max-width:1170px;margin:auto;padding:75px 32px;border-top:1px solid var(--line)}
.field-heading{display:flex;align-items:end;justify-content:space-between;gap:32px;margin-bottom:35px}
.field-heading h2{font-size:clamp(38px,4.4vw,58px)}
.field-heading>p{max-width:310px;color:#5e7166;margin:0}
.note-list{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #a9b8a5}
.note-list article{padding:26px 25px 15px 0}
.note-list article+article{border-left:1px solid var(--line);padding-left:25px}
.note-number{font-size:10px;font-weight:700;letter-spacing:.16em;color:#708c6e}
.note-list h3{font-family:'DM Serif Display',Georgia,serif;font-size:25px;line-height:1.15;font-weight:400;margin:20px 0 10px}
.note-list p{font-size:14px;color:#546a5d;margin:0;max-width:290px}
@keyframes atlas-turn{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.atlas:after{animation:none}}
@media(max-width:700px){.hero-inner{padding-top:46px;padding-bottom:50px;gap:28px}.atlas{width:180px}.atlas-index{left:-20%}.atlas-coordinates{right:-20%}.field-notes{padding:55px 22px}.field-heading{display:block}.field-heading>p{margin-top:16px}.note-list{grid-template-columns:1fr}.note-list article,.note-list article+article{padding:20px 0;border-left:0;border-bottom:1px solid var(--line)}.note-list h3{margin-top:10px}.note-list p{max-width:none}}
@media(max-width:700px){.atlas{display:none}.hero-inner{padding-bottom:42px}.player-section{padding-top:42px}}
/* An original illustrated atlas gives the first screen a clear geography theme. */
.hero-map{position:relative;margin:0;overflow:hidden;border:1px solid #d4dfae66;border-radius:8px;background:#214b42;box-shadow:0 24px 60px #061c1c70}
.hero-map img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.hero-map figcaption{display:flex;justify-content:space-between;gap:12px;padding:11px 14px;background:#183d35;color:#d9e7c6;font-size:9px;font-weight:700;letter-spacing:.12em}
@media(max-width:700px){.hero-map{width:100%}.hero-map figcaption{font-size:8px}.hero-inner{gap:26px}}
/* The game is the hero: no separate illustration stands between visitors and play. */
.game-hero{background:#102d2d}
.game-hero-inner{max-width:1240px;margin:auto;padding:27px 32px 25px}
.game-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:19px}
.game-heading .eyebrow{margin:0 0 9px}
.game-heading h1{font-size:clamp(32px,3.6vw,49px);line-height:1.08}
.game-heading p:not(.eyebrow){font-size:15px;color:#d2dfd4;margin:8px 0 0}
.game-external{color:#e4efce;font-size:13px;font-weight:700;white-space:nowrap;text-underline-offset:4px}
.game-hero .game-frame{border:1px solid #a5bd9a;border-radius:8px;box-shadow:0 14px 40px #061c1c66}
.game-hero .player-note{color:#c6d8c7;margin-top:11px}
.game-hero .player-note a{color:#e0edc6;text-underline-offset:3px}
.clue-guide{max-width:1170px;margin:auto;padding:75px 32px;border-top:1px solid var(--line)}
.clue-heading{display:flex;justify-content:space-between;align-items:end;gap:32px;margin-bottom:32px}
.clue-heading h2{font-size:clamp(38px,4.4vw,58px)}
.clue-heading h2 em{color:#67895c}
.clue-heading>p{max-width:310px;color:#5e7166;margin:0}
.clue-examples{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #a9b8a5}
.clue-examples article{padding:24px 25px 10px 0}
.clue-examples article+article{border-left:1px solid var(--line);padding-left:25px}
.clue-examples span{color:#708c6e;font-size:10px;font-weight:700;letter-spacing:.16em}
.clue-examples h3{font-family:'DM Serif Display',Georgia,serif;font-size:25px;font-weight:400;line-height:1.15;margin:18px 0 10px}
.clue-examples p{font-size:14px;color:#546a5d;margin:0}
.clue-return{margin:30px 0 0;font-size:14px;color:#546a5d}.clue-return a{font-weight:700;color:#183a35;text-underline-offset:3px}
@media(max-width:700px){.game-hero-inner{padding:20px 14px 18px}.game-heading{display:block;margin-bottom:15px}.game-heading .eyebrow{font-size:10px}.game-heading h1{font-size:32px}.game-heading p:not(.eyebrow){font-size:14px;line-height:1.45}.game-external{display:inline-block;margin-top:9px}.game-hero .player-note{gap:3px}.clue-guide{padding:55px 22px}.clue-heading{display:block}.clue-heading>p{margin-top:16px}.clue-examples{grid-template-columns:1fr}.clue-examples article,.clue-examples article+article{padding:20px 0;border-left:0;border-bottom:1px solid var(--line)}.clue-examples h3{margin-top:10px}}
/* Colors and editorial rhythm echo the actual map and parchment in Crowdict Geo. */
:root{--ink:#243a38;--cream:#f6f3e9;--line:#d2d8cc;--lime:#edf0d6}
body{background:var(--cream)}
.top{background:#f9f6ed}.brand span:not(.compass){color:#a05643}.compass{color:#b6402d}
.nav-play{background:#1d3b39}.game-hero{background:#274d49}.game-hero .eyebrow{color:#e6e7c6}.game-heading h1 em{color:#e3ddac}
.game-hero .game-frame{border-color:#9dbeb0}.game-external,.game-hero .player-note a{color:#f4ebd6}
.visual-guide{max-width:1170px;margin:auto;padding:76px 32px 60px}
.visual-title{max-width:680px;margin-bottom:40px}.visual-title h2{font-size:clamp(38px,4.5vw,61px)}.visual-title>p:last-child{max-width:570px;color:#526964;margin:16px 0 0}
.visual-story{display:grid;grid-template-columns:1.28fr .72fr;align-items:center;gap:5%;padding:30px 0;border-top:1px solid #c9d0c1}
.visual-story.reverse{grid-template-columns:.72fr 1.28fr}.visual-story.reverse figure{order:2}
.visual-story figure{margin:0;background:#80b0aa;border:1px solid #a7b7a7;overflow:hidden}
.visual-story img{display:block;width:100%;height:auto;aspect-ratio:1.7;object-fit:cover;object-position:center}
.visual-story figcaption{padding:9px 12px;background:#e4e8d9;color:#52675c;font-size:10px;letter-spacing:.045em}
.story-index{font-size:10px;font-weight:700;letter-spacing:.15em;color:#a64030}.story-copy h3{font-family:'DM Serif Display',Georgia,serif;font-size:clamp(28px,3vw,39px);font-weight:400;line-height:1.08;margin:14px 0}
.story-copy p{font-size:15px;line-height:1.7;color:#4b625e}.story-copy a,.visual-credit a{color:#9d392c;font-weight:700;text-underline-offset:4px}.visual-credit{font-size:12px;color:#65776d}
.guide h2 em,.clue-heading h2 em{color:#a54c36}.eyebrow,.note-number{color:#9d4f3a}
@media(max-width:700px){.visual-guide{padding:55px 20px 40px}.visual-title{margin-bottom:26px}.visual-story,.visual-story.reverse{grid-template-columns:1fr;gap:22px;padding:24px 0}.visual-story.reverse figure{order:0}.visual-story img{aspect-ratio:1.55}.story-copy h3{margin:10px 0}.story-copy p{font-size:14px}.visual-credit{line-height:1.5}}
