@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,500;0,600;1,500&family=Source+Sans+3:wght@400;550;600&display=swap');

:root{--bg:oklch(96% .025 84);--surface:oklch(91% .045 78);--fg:oklch(25% .045 152);--muted:oklch(47% .035 78);--border:oklch(72% .045 80);--accent:oklch(60% .11 196);--paper:oklch(98% .018 85);--map-village:oklch(84% .12 96);--map-field:oklch(76% .1 225);--shadow:0 20px 50px oklch(25% .045 152/.14);--display:'Lora',Georgia,serif;--body:'Source Sans 3','Trebuchet MS',sans-serif;--max:1180px}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:400 17px/1.6 var(--body);overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:30;opacity:.16;background-image:repeating-linear-gradient(17deg,transparent 0 3px,color-mix(in oklch,var(--fg),transparent 97%) 3px 4px);background-size:9px 9px}
a{color:inherit}
img{max-width:100%;display:block}
button,input{font:inherit}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--paper);padding:12px 16px}
.skip:focus{top:12px}
.shell{width:min(calc(100% - 40px),var(--max));margin-inline:auto}
.site-header{position:absolute;inset:0 0 auto;z-index:20;color:var(--paper);border-bottom:1px solid oklch(98% .018 85/.24)}
.site-header.inner{position:relative;background:var(--fg)}
.nav{height:82px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{font:600 23px/1 var(--display);text-decoration:none;letter-spacing:-.02em}
.brand small{display:block;margin-top:7px;font:600 10px/1 var(--body);letter-spacing:.1em;text-transform:uppercase}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a{font-weight:550;text-decoration:none;letter-spacing:.02em}
.nav-links a:hover,.nav-links a[aria-current=page]{text-decoration:underline;text-underline-offset:7px}
.nav-cta,.button{min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:10px 18px;border:1px solid var(--accent);background:var(--accent);color:var(--fg);font-weight:600;text-decoration:none;box-shadow:0 5px 0 color-mix(in oklch,var(--accent),var(--fg) 28%);transition:transform .15s cubic-bezier(0,0,.2,1),box-shadow .15s}
.button:hover,.nav-cta:hover{transform:translateY(-2px);box-shadow:0 7px 0 color-mix(in oklch,var(--accent),var(--fg) 28%)}
.button:active,.nav-cta:active{transform:translateY(2px);box-shadow:0 2px 0 color-mix(in oklch,var(--accent),var(--fg) 28%)}
.button.secondary{background:transparent;color:inherit;border-color:currentColor;box-shadow:none}
.menu-toggle{display:none;width:48px;height:48px;border:1px solid currentColor;background:transparent;color:inherit}
.hero{min-height:92svh;position:relative;display:grid;align-items:end;background:var(--fg) url('assets/faire-fae-village-hero.png') center/cover no-repeat;color:var(--paper)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,oklch(20% .04 150/.86) 0%,oklch(20% .04 150/.42) 38%,transparent 68%)}
.hero-content{position:relative;z-index:2;padding:170px 0 92px;max-width:650px}
.eyebrow{margin:0 0 20px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.hero h1,.page-intro h1{margin:0;font:500 clamp(3.25rem,7vw,6.8rem)/.98 var(--display);letter-spacing:-.03em}
.hero h1 em{display:block;color:var(--accent);font-weight:500}
.hero-copy{max-width:55ch;margin:28px 0 32px;font-size:clamp(1.05rem,2vw,1.25rem);line-height:1.55}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px}
.trail-note{position:absolute;right:4vw;bottom:40px;z-index:3;width:240px;padding:18px 20px;background:var(--paper);color:var(--fg);box-shadow:var(--shadow);transform:rotate(1.5deg)}
.trail-note strong{display:block;font:600 20px/1.2 var(--display)}
.trail-note span{display:block;margin-top:6px;font-size:13px}
.section{padding:clamp(72px,9vw,130px) 0}
.section.surface{background:var(--surface)}
.section-head{display:grid;grid-template-columns:.7fr 1.3fr;gap:40px;align-items:start;margin-bottom:52px}
.section-head h2,.story-copy h2{margin:0;font:500 clamp(2.2rem,5vw,4.5rem)/1.04 var(--display);letter-spacing:-.025em}
.section-head p{margin:8px 0 0;max-width:58ch}
.creature-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:18px}
.creature-card{position:relative;min-height:390px;padding:28px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:var(--fg);color:var(--paper);border:0;text-align:left;cursor:pointer;isolation:isolate}
.creature-card::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--card-image);background-size:cover;background-position:center;opacity:.74;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.creature-card::after{content:"";position:absolute;inset:28% 0 0;z-index:-1;background:linear-gradient(transparent,var(--fg))}
.creature-card:hover::before{transform:scale(1.04)}
.creature-card:nth-child(2){min-height:330px}
.creature-card:nth-child(3){min-height:300px;transform:translateY(44px)}
.creature-card h3{font:500 28px/1.1 var(--display);margin:8px 0 4px}
.creature-card p{margin:0;font-size:14px}
.seal{width:34px;height:34px;border:1px solid currentColor;border-radius:50%;display:grid;place-items:center;font:500 18px var(--display)}
.map-teaser{display:grid;grid-template-columns:1.1fr .9fr;min-height:570px;background:var(--fg);color:var(--paper);box-shadow:var(--shadow)}
.map-copy{padding:clamp(40px,7vw,90px);display:flex;flex-direction:column;justify-content:center}
.map-copy h2{font:500 clamp(2.4rem,5vw,4.7rem)/1 var(--display);letter-spacing:-.025em;margin:0 0 24px}
.map-copy p{max-width:47ch}
.map-sketch{position:relative;overflow:hidden;background-color:var(--surface);background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:42px 42px}
.map-path{position:absolute;inset:10%;border:3px dashed var(--fg);border-radius:45% 55% 50% 45%;transform:rotate(-12deg)}
.map-stop{position:absolute;width:54px;height:54px;border:2px solid var(--fg);border-radius:50%;display:grid;place-items:center;background:var(--accent);font:600 18px var(--display);box-shadow:5px 5px 0 var(--fg)}
.stop-1{left:18%;top:58%}
.stop-2{left:52%;top:25%}
.stop-3{right:12%;bottom:18%}
.map-label{position:absolute;left:32px;bottom:30px;padding:10px 14px;background:var(--paper);color:var(--fg);font-size:13px;transform:rotate(-2deg)}
.story-row{display:grid;grid-template-columns:.75fr 1.25fr;gap:7vw;align-items:center}
.story-art{min-height:520px;background:url('assets/faire-fae-village-hero.png') 74% center/cover;box-shadow:var(--shadow);clip-path:polygon(8% 0,100% 4%,93% 100%,0 94%)}
.story-copy p{max-width:58ch}
.quote{margin:34px 0;padding:22px 0;border-block:1px solid var(--border);font:500 23px/1.4 var(--display)}
.page-intro{padding:clamp(90px,12vw,160px) 0 clamp(65px,8vw,110px);background:var(--fg);color:var(--paper)}
.page-intro p{max-width:58ch;font-size:20px}
.filter-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:38px}
.filter{min-height:44px;padding:8px 16px;border:1px solid var(--fg);background:transparent;color:var(--fg);font-weight:550;cursor:pointer}
.filter[aria-pressed=true]{background:var(--fg);color:var(--paper)}
.field-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.field-card{display:grid;grid-template-columns:150px 1fr;gap:24px;padding:24px;background:var(--paper);border:1px solid var(--border);cursor:pointer;transition:transform .2s}
.field-card:hover{transform:translateY(-4px)}
.field-mark{min-height:150px;background:var(--surface);display:grid;place-items:center;font:500 64px var(--display)}
.field-card h2{font:500 27px/1.15 var(--display);margin:0 0 8px}
.field-card p{margin:0;color:var(--muted)}
.tag{display:inline-block;margin-bottom:14px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.guide-layout{display:grid;grid-template-columns:1.35fr .65fr;gap:32px}
.guide-canvas{min-height:600px;position:relative;background-color:var(--surface);background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:48px 48px;border:1px solid var(--border);overflow:hidden}
.guide-path{position:absolute;width:70%;height:75%;left:12%;top:10%;border:4px dashed var(--fg);border-radius:48% 52% 44% 56%;transform:rotate(-8deg)}
.guide-point{position:absolute;width:58px;height:58px;border:2px solid var(--fg);border-radius:50%;background:var(--paper);color:var(--fg);box-shadow:5px 5px 0 var(--fg);font-weight:600;cursor:pointer}
.guide-point[aria-pressed=true]{background:var(--accent)}
.guide-point:nth-of-type(2){left:15%;bottom:15%}
.guide-point:nth-of-type(3){left:45%;top:16%}
.guide-point:nth-of-type(4){right:12%;bottom:23%}
.guide-panel{padding:34px;background:var(--fg);color:var(--paper);align-self:start}
.guide-panel h2{font:500 32px/1.1 var(--display);margin-top:0}
.notice{padding:18px;border:1px solid var(--accent);margin-bottom:28px;font-size:14px}
.plan-list{padding:0;list-style:none}
.plan-list li{padding:16px 0;border-bottom:1px solid oklch(98% .018 85/.22)}
.visit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.visit-block{padding:30px;border-top:2px solid var(--fg);background:var(--paper)}
.visit-block h2{font:500 27px var(--display);margin-top:0}
.unknown{display:inline-block;padding:5px 8px;background:var(--surface);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.footer{padding:52px 0;background:var(--fg);color:var(--paper)}
.footer-grid{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end}
.footer h2{font:500 clamp(2rem,4vw,4rem)/1 var(--display);margin:0}
.footer p{max-width:50ch}
.footer-nav{display:flex;flex-wrap:wrap;gap:18px}
.footer-nav a{text-underline-offset:5px}
dialog{width:min(560px,calc(100% - 32px));border:0;padding:0;background:var(--paper);color:var(--fg);box-shadow:var(--shadow)}
dialog::backdrop{background:oklch(20% .04 150/.72)}
.dialog-body{padding:38px}
.dialog-body h2{font:500 36px/1.1 var(--display);margin:0 0 14px}
.dialog-close{position:absolute;right:12px;top:12px;width:44px;height:44px;border:1px solid var(--fg);background:var(--paper);cursor:pointer}
.reveal{opacity:1;transform:none;transition:opacity .5s cubic-bezier(0,0,.2,1),transform .5s cubic-bezier(0,0,.2,1)}
.js .reveal{opacity:0;transform:translateY(18px)}
.js .reveal.visible{opacity:1;transform:none}
:focus-visible{outline:3px solid var(--accent);outline-offset:4px}

@media(max-width:860px){.nav-links{position:fixed;inset:0 0 0 18%;padding:110px 28px 40px;background:var(--fg);flex-direction:column;align-items:flex-start;transform:translateX(105%);transition:transform .3s cubic-bezier(.4,0,.2,1)}
.nav-links.open{transform:none}
.menu-toggle{display:block;z-index:2}
.nav-cta{width:100%}
.trail-note{display:none}
.section-head,.story-row,.map-teaser,.guide-layout{grid-template-columns:1fr}
.creature-grid{grid-template-columns:1fr 1fr}
.creature-card:first-child{grid-column:1/-1}
.creature-card:nth-child(3){transform:none}
.story-art{min-height:380px}
.visit-grid{grid-template-columns:1fr}
.guide-panel{order:-1}
}

@media(max-width:620px){.shell{width:min(calc(100% - 28px),var(--max))}
.nav{height:70px}
.hero{min-height:820px;background-position:62% center}
.hero::after{background:linear-gradient(180deg,oklch(20% .04 150/.58),oklch(20% .04 150/.2) 42%,oklch(20% .04 150/.9) 78%)}
.hero-content{padding:130px 0 58px;align-self:end}
.hero h1,.page-intro h1{font-size:clamp(3rem,16vw,4.8rem)}
.section{padding:70px 0}
.section-head{gap:18px;margin-bottom:34px}
.creature-grid,.field-grid{grid-template-columns:1fr}
.creature-card,.creature-card:nth-child(2),.creature-card:nth-child(3){min-height:340px}
.map-teaser{min-height:0}
.map-sketch{min-height:390px}
.field-card{grid-template-columns:90px 1fr}
.field-mark{min-height:110px;font-size:45px}
.guide-canvas{min-height:480px}
.footer-grid{grid-template-columns:1fr}
.hero-actions .button{width:100%}
}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
.reveal{opacity:1;transform:none}
}


/* Hero and map refinements */
.site-header{background:oklch(18% .035 152/.88);border-bottom-color:oklch(98% .018 85/.42)}

.site-header.inner{position:absolute;background:oklch(18% .035 152/.92)}

.hero{background-position:center;color:var(--paper)}

.hero::after{background:linear-gradient(90deg,oklch(16% .04 152/.94) 0%,oklch(16% .04 152/.76) 38%,oklch(16% .04 152/.16) 72%)}

.hero-content{width:min(calc(100% - 40px),var(--max));max-width:var(--max);margin-inline:auto;text-align:left}

.hero-content>.eyebrow,.hero-content>h1,.hero-content>.hero-copy,.hero-content>.hero-actions{max-width:650px}

.hero h1 em{color:var(--paper)}

.page-intro{position:relative;isolation:isolate;min-height:590px;display:flex;align-items:end;padding:180px 0 90px;background-color:var(--fg);background-size:cover;background-repeat:no-repeat;color:var(--paper)}

.page-intro::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,oklch(16% .04 152/.94),oklch(16% .04 152/.76) 43%,oklch(16% .04 152/.22) 75%)}

.page-intro-creatures{background-image:url('assets/faire-fae-village-hero.png');background-position:62% 54%}

.page-intro-map{background-image:url('assets/faire-fae-village-hero.png');background-position:80% 62%}

.page-intro-visit{background-image:url('assets/faire-fae-village-hero.png');background-position:88% 70%}

.page-intro-story{background-image:url('assets/faire-fae-village-hero.png');background-position:72% 38%}

.page-intro>.shell{width:min(calc(100% - 40px),var(--max));margin-inline:auto;text-align:left}

.page-intro h1,.page-intro p{max-width:650px}

.map-sketch{background:linear-gradient(145deg,var(--paper),var(--surface))}

.guide-canvas{background:var(--surface)}

.guide-path{border-color:var(--paper);filter:drop-shadow(0 2px 1px var(--fg))}

.guide-point{border-color:var(--paper);box-shadow:0 0 0 3px var(--fg),5px 5px 0 var(--fg)}

@media(max-width:620px){.site-header,.site-header.inner{background:oklch(16% .04 152/.94)}
.hero-content,.page-intro>.shell{width:min(calc(100% - 28px),var(--max))}
.page-intro{min-height:660px;padding:150px 0 60px;background-position:68% center}
.page-intro::before{background:linear-gradient(180deg,oklch(16% .04 152/.78),oklch(16% .04 152/.25) 38%,oklch(16% .04 152/.94) 76%)}
.page-intro-map{background-position:76% 78%}
}


/* Simplified fantasy wayfinding map */
.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}

.guide-canvas{min-height:680px;background:var(--surface);isolation:isolate}

.fantasy-map{position:absolute;inset:0;width:100%;height:100%;background:radial-gradient(circle at 22% 18%,color-mix(in oklch,var(--map-village),transparent 76%),transparent 32%),radial-gradient(circle at 76% 74%,color-mix(in oklch,var(--accent),transparent 86%),transparent 38%),linear-gradient(145deg,var(--paper),var(--surface));font-family:var(--body);filter:sepia(.08)}

.map-contour{fill:none;stroke:var(--border);stroke-width:2;opacity:.6;stroke-dasharray:3 4}

.map-creek{fill:none;stroke:var(--accent);stroke-width:18;opacity:.48}

.map-trail-shadow{fill:none;stroke:var(--paper);stroke-width:20;stroke-linecap:round}

.map-trail{fill:none;stroke:var(--fg);stroke-width:5;stroke-linecap:round;stroke-dasharray:9 12}

.map-faire-zone{fill:color-mix(in oklch,var(--map-village),transparent 15%);stroke:var(--fg);stroke-width:4;stroke-linejoin:round}

.map-joust-zone{fill:var(--map-field);stroke:var(--fg);stroke-width:3}

.map-neverland-zone{fill:color-mix(in oklch,var(--map-village),var(--paper) 36%);stroke:var(--fg);stroke-width:3}

.map-trees{fill:var(--fg);opacity:.18}

.map-labels text{fill:var(--fg);font-size:15px;font-weight:600;paint-order:stroke;stroke:var(--paper);stroke-width:5px;stroke-linejoin:round}

.map-labels .zone-title{font:600 28px var(--display);letter-spacing:.08em;stroke-width:7px}

.map-labels .trail-label,.map-labels .portal-label{font-size:13px;letter-spacing:.06em;text-transform:uppercase}

.map-labels .creek-label{font-size:12px;letter-spacing:.08em;writing-mode:vertical-rl}

.map-symbols{fill:var(--paper);stroke:var(--fg);stroke-width:3}
.map-symbols .portal-glyph{fill:var(--accent)}

.storybook-landmarks{fill:color-mix(in oklch,var(--surface),var(--paper) 35%);stroke:var(--fg);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.storybook-landmarks .pirate-ship{fill:color-mix(in oklch,var(--accent),var(--paper) 68%)}
.storybook-landmarks .mermaid-pool{fill:none;stroke:var(--accent);stroke-width:4}

.map-ornaments{fill:none;stroke:var(--fg);stroke-width:2;opacity:.65}

.guide-point{z-index:2;width:48px;height:48px;font-size:14px;background:var(--paper)}

.guide-point[aria-pressed=true]{background:var(--accent)}

.guide-canvas .point-portal{left:41%;top:59%;right:auto;bottom:auto}
.guide-canvas .point-hunt{left:43%;top:77%;right:auto;bottom:auto}
.guide-canvas .point-forest{left:57%;top:83%;right:auto;bottom:auto}
.guide-canvas .point-bridge{left:auto;top:auto;right:13%;bottom:15%}
.guide-canvas .point-druid{left:31%;top:72%;right:auto;bottom:auto}
.guide-canvas .point-court{left:60%;top:72%;right:auto;bottom:auto}
.guide-canvas .point-ship{left:68%;top:86%;right:auto;bottom:auto}

.map-sketch{background:linear-gradient(145deg,var(--paper),var(--surface));display:grid;place-items:center}

.mini-fantasy-map{width:100%;height:100%;padding:24px;font-family:var(--body)}

.mini-contour{fill:none;stroke:var(--border);stroke-width:2}
.mini-trail{fill:none;stroke:var(--fg);stroke-width:5;stroke-dasharray:8 10;stroke-linecap:round}
.mini-faire{fill:var(--map-village);stroke:var(--fg);stroke-width:4}
.mini-joust{fill:var(--map-field);stroke:var(--fg);stroke-width:3}
.mini-portal{fill:var(--accent);stroke:var(--fg);stroke-width:4}
.mini-fantasy-map text{fill:var(--fg);font-size:13px;font-weight:600;letter-spacing:.06em}
.mini-fantasy-map .mini-title{font:600 23px var(--display)}

@media(max-width:620px){.guide-canvas{min-height:600px}
.map-labels text{font-size:12px}
.map-labels .zone-title{font-size:21px}
.guide-point{width:44px;height:44px}
.guide-canvas .point-portal{left:39%;top:58%}
.guide-canvas .point-hunt{left:42%;top:75%}
.guide-canvas .point-forest{left:56%;top:81%}
.guide-canvas .point-druid{left:28%;top:69%}
.guide-canvas .point-court{left:61%;top:69%}
.guide-canvas .point-ship{left:69%;top:84%}
}