:root{--size-xs: 4px;--size-s: 16px;--size-m: 24px;--size-l: 48px;--size-xl: 96px;--size-xxl: 50vh;--size-min-button: 24px;--size-btn-large: 48px;--max-width-p: 580px;--width-copy-layer:calc(50% - 3px);--height-timeline: 84px;--padding-page: var(--size-m);--gap-p-p: var(--size-m);--gap-p-img: var(--size-l);--gap-p-song: var(--size-l);--gap-p-heading: var(--size-xxl);--gap-header-heading: var(--size-l);--gap-heading-p: var(--size-xl);--gap-heading-lines: 8px;--gap-lore: var(--size-l);--gap-map-timeline: var(--size-s);--map-top: calc(var(--padding-page) * 1.5);--map-right: calc(var(--padding-page) * 1.5);--map-bottom: calc( var(--padding-page) + var(--height-timeline) + var(--gap-map-timeline) );--map-left: 50%}@media (max-width: 900px){:root{--size-min-button: 44px;--width-copy-layer: 100%}}:root{--font-family: "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, serif;--font-size-xs: 1.024rem;--font-size-s: 1.28rem;--font-size-m: 1.6rem;--font-size-l: 2rem;--font-size-xl: 2.5rem;--line-height: 1.5;--letter-spacing-heading: .1em}:root{--white: hsl(0, 0%, 100%);--brown: hsl(34, 60%, 93%);--red: hsl(4, 90%, 58%);--white0: hsl(0, 0%, 100%);--white1: hsl(0, 0%, 75%);--white2: hsl(0, 0%, 55%);--black1: hsl(0, 0%, 0%);--black0: hsl(0, 0%, 11%);--black1: hsl(0, 0%, 13%);--black2: hsl(0, 0%, 21%);--black3: hsl(0, 0%, 45%);--gradient-staff-background: radial-gradient( ellipse at 50% 100%, hsla(0, 0%, 11%, 0) 63%, hsla(0, 0%, 11%, 1) 80% );--gradient-door-light: linear-gradient( 0deg, hsla(35, 58%, 93%, 1) 0%, hsla(35, 58%, 93%, 0) 70% );--gradient-timeline-light: linear-gradient( 90deg, hsla(35, 58%, 93%, 1) 0%, hsla(35, 58%, 93%, 0) );--gradient-timeline-dark: linear-gradient( 90deg, hsla(0, 0%, 11%, 1) 0%, hsla(0, 0%, 11%, 0) );--color-frame: var(--black0);--color-paper: var(--brown);--color-path: var(--white);--color-path-old: var(--red);--color-heading: var(--black1);--color-copy: var(--black2);--color-character-update: var(--red);--color-border: var(--black2);--color-list-marker: var(--black3);--color-day-line: var(--black3);--color-button-hover: var(--black1);--color-button-large-active: var(--brown);--color-button-large-active-background: var(--black0)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}:root{--dur-x-slow: 5s;--dur-slow: 3s;--dur-med: 2s;--dur-fast: 1s;--ease-heavy: cubic-bezier(.3, 0, .2, 1);--transition-button-large: all .12s ease-in-out;--transition-button-small: all .24s ease-in-out;--transition-map-layer: opacity var(--dur-fast) ease-in-out;--transition-paper-layer: opacity var(--dur-fast) ease-in-out;--keyframes-sound-layer: fadeIn var(--dur-fast) ease-in-out both;--keyframes-story-layer: fadeIn var(--dur-fast) ease-in-out both;--transition-character-portrait: filter .5s ease-in-out, outline-color .24s ease-in-out;--transition-ring: scale var(--dur-fast) ease-in-out, translate var(--dur-med) var(--ease-heavy);--transition-path: all var(--dur-med) var(--ease-heavy);--transition-timeline-event: opacity var(--dur-slow) var(--ease-heavy);--transition-timeline-position: translate var(--dur-slow) var(--ease-heavy);--keyframes-timeline-gradient: fadeIn var(--dur-slow) var(--ease-heavy) both var(--dur-slow);--keyframes-lore-content: fadeIn var(--dur-fast) ease-in-out both;--transition-map-layout: transform var(--dur-slow) var(--ease-heavy), translate var(--dur-slow) var(--ease-heavy);--transition-map: opacity var(--dur-fast) ease-in-out;--transition-frame: opacity var(--dur-fast) ease-in-out;--transition-story-layer-text: color var(--dur-fast) ease-in-out, opacity .24s ease-in-out;--transition-staff: translate var(--dur-fast) ease-in-out;--transition-tomb-light: all var(--dur-fast) ease-in-out;--duration-vignette: var(--dur-x-slow);--ease-vignette: cubic-bezier(0, 0, .5, 1);--transition-vignette: opacity var(--duration-vignette) var(--ease-vignette);--keyframes-crows: spin 10s linear infinite}:root{--border: 1px solid var(--color-border);--z-index-copy-layer-bottom-artifacts-background: 1;--z-index-copy-layer-bottom-artifacts: 2;--z-index-light-beam: 2;--z-index-frame: 3;--opacity-fade: .3;--drop-shadow-path: drop-shadow(1px 1px 1px var(--black0));--drop-shadow-ring: drop-shadow(0px 2px 1px black);--box-shadow-vignette: inset 0 0 228px hsla(0, 0%, 0%, .5), inset 0 0 128px hsl(0, 0%, 0%), inset 0 0 128px hsl(0, 0%, 0%);--button-inline-underline-offset: .1em;--button-inline-hover-underline-offset: .2em}*,*:before,*:after{box-sizing:border-box;min-width:0;margin:0;padding:0}*:focus{outline:none}*:focus-visible{outline:1px solid blue}html{height:100%;font-family:var(--font-family);font-size:62.5%;line-height:var(--line-height);font-synthesis:none;font-smooth:always;-webkit-font-smoothing:subpixel-antialiased;-moz-osx-font-smoothing:auto;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;color:var(--color-copy)}body{min-height:100%;overscroll-behavior:none;accent-color:var(--color-copy);background:var(--color-paper)}body[data-map-size=large]{overflow:hidden}p{text-wrap:pretty;overflow-wrap:break-word}h1,h2,h3,h4,h5,h6{text-wrap:balance;font-weight:400}strong{overflow-wrap:break-word}img,picture,video,canvas,svg,iframe{display:block;border:none}input,textarea,button,button:disabled{font:inherit;border:none;border-radius:0;background:none;color:inherit}fieldset{border:none}a{text-decoration:none;color:inherit}ul,ol{list-style:none}body:is([data-ring-location=westGate1],[data-ring-location=westGate2],[data-ring-location=crossroads],[data-ring-location=hall1],[data-ring-location=chamber],[data-ring-location=chamberDoor],[data-ring-location=stairs],[data-ring-location=hall2],[data-ring-location=bridge1],[data-ring-location=bridge2],[data-ring-location=hall3]){--color-paper: var(--color-frame);--color-heading: var(--white0);--color-copy: var(--white1);--color-border: var(--white1);--color-list-marker: var(--white2);--color-day-line: var(--white2);--color-button-hover: var(--white0);--color-button-large-active: var(--black1);--color-button-large-active-background: var(--brown);--border: 1px solid var(--white1)}.mapLayer{width:100%;height:100vh;position:fixed;top:0;left:0;touch-action:none;opacity:0;pointer-events:none;background:var(--color-frame);transition:var(--transition-map-layer)}.mapLayer .mapLayout{--from-center-x: -500px;--y: 0px;--x: calc(50vw + var(--from-center-x));width:1600px;aspect-ratio:4 / 3;position:absolute;top:0;left:0;transform:translate(var(--x),var(--y));transition:var(--transition-map-layout)}.mapLayer .mapLayout .map{width:100%;height:100%;position:absolute;opacity:0;transition:var(--transition-map)}.mapLayer .mapLayout.disableAnimate{transition:none}body:is([data-screen=story],[data-screen=characters],[data-screen=gondor],[data-screen=minasTirith]) .mapLayer{opacity:1;pointer-events:unset}body[data-map-size=large] .mapLayer .mapLayout{cursor:grab}body[data-map-size=large] .mapLayer .mapLayout:active{cursor:grabbing}body:is([data-ring-location=rivendell],[data-ring-location=hollin1],[data-ring-location=hollin2],[data-ring-location=caradhras1],[data-ring-location=caradhras2],[data-ring-location=wallsOfMoria],[data-ring-location=dimrillDale]) .mapLayer .map.middleEarth{opacity:1}body:is([data-ring-location=westGate1],[data-ring-location=westGate2]) .mapLayer .mapLayout{--from-center-x: 100px}body:is([data-ring-location=westGate1],[data-ring-location=westGate2]) .mapLayer .mapLayout .map.moria{opacity:1}body:is([data-ring-location=crossroads]) .mapLayer .mapLayout{--from-center-x: -600px;--y: -100px}body:is([data-ring-location=crossroads]) .mapLayer .mapLayout .map.moria{opacity:1}body:is([data-ring-location="hall1"],[data-ring-location="chamber"],[data-ring-location="chamberDoor"],[data-ring-location="stairs"],) .mapLayer .mapLayout{--from-center-x: -1050px;--y: -100px}body:is([data-ring-location="hall1"],[data-ring-location="chamber"],[data-ring-location="chamberDoor"],[data-ring-location="stairs"],) .mapLayer .mapLayout .map.moria{opacity:1}body:is([data-ring-location=hall2],[data-ring-location=bridge1],[data-ring-location=bridge2],[data-ring-location=hall3]) .mapLayer .mapLayout{--from-center-x: -1050px;--y: -300px}body:is([data-ring-location=hall2],[data-ring-location=bridge1],[data-ring-location=bridge2],[data-ring-location=hall3]) .mapLayer .mapLayout .map.moria{opacity:1}body[data-screen=minasTirith] .mapLayer .mapLayout{--from-center-x: -780px;--y: -400px}body[data-screen=minasTirith] .mapLayer .mapLayout .map.moria{opacity:0}body[data-screen=minasTirith] .mapLayer .mapLayout .map.middleEarth{opacity:1}body[data-screen=gondor] .mapLayer .mapLayout{--from-center-x: -580px;--y: -400px}body[data-screen=gondor] .mapLayer .mapLayout .map.moria{opacity:0}body[data-screen=gondor] .mapLayer .mapLayout .map.middleEarth{opacity:1}@media (max-width: 900px){.mapLayer .mapLayout{--x: calc(0vw + var(--from-center-x))}body:is([data-ring-location=westGate1],[data-ring-location=westGate2],[data-ring-location=crossroads] [data-ring-location=hall1],[data-ring-location=chamber],[data-ring-location=chamberDoor],[data-ring-location=stairs],[data-ring-location=hall2],[data-ring-location=bridge1],[data-ring-location=bridge2],[data-ring-location=hall3]) .mapLayer .mapLayout{--x: calc(-20vw + var(--from-center-x))}}svg.paths{width:100%;height:100%;position:absolute}svg.paths path{fill:none;stroke:var(--color-path);stroke-width:4px;filter:var(--drop-shadow-path);opacity:0;transition:var(--transition-path)}body[data-ring-location=rivendell]{svg.paths path.rivendell {opacity: 1;}}body[data-ring-location=hollin1]{svg.paths path:is(.rivendell,.hollin) {opacity: 1;}}body[data-ring-location=hollin2],body[data-ring-location=caradhras1]{svg.paths path:is(.rivendell,.hollin,.redhornGate,.dimrillStair) {opacity: 1;}}body[data-ring-location=caradhras2],body[data-ring-location=wallsOfMoria],body[data-ring-location=dimrillDale]{svg.paths path:is(.rivendell,.hollin,.redhornGate,.moriaWestGateOutside,.moriaEastGate) {opacity: 1;} svg.paths path.dimrillStair {opacity: 1; stroke: var(--color-path-old);}}body[data-ring-location=crossroads]{svg.paths path.crossroads {opacity: 1;}}body[data-ring-location=hall1]{svg.paths path:is(.crossroads,.hall1) {opacity: 1;}}body[data-ring-location=chamber]{svg.paths path:is(.crossroads,.hall1,.chamber) {opacity: 1;}}body[data-ring-location=chamberDoor]{svg.paths path:is(.crossroads,.hall1,.chamber,.chamberDoor) {opacity: 1;}}body[data-ring-location=stairs]{svg.paths path:is(.crossroads,.hall1,.chamber,.chamberDoor,.stairs) {opacity: 1;}}body[data-ring-location=hall2]{svg.paths path:is(.crossroads,.hall1,.chamber,.chamberDoor,.stairs,.hall2) {opacity: 1;}}body:is([data-ring-location=bridge1],[data-ring-location=bridge2]){svg.paths path:is(.crossroads,.hall1,.chamber,.chamberDoor,.stairs,.hall2,.bridge) {opacity: 1;}}body[data-ring-location=hall3]{svg.paths path:is(.crossroads,.hall1,.chamber,.chamberDoor,.stairs,.hall2,.bridge,.hall3) {opacity: 1;}}.ring{width:22px;aspect-ratio:1;border-radius:50%;position:absolute;top:305px;left:760px;cursor:pointer;filter:var(--drop-shadow-ring);transition:var(--transition-ring)}.ring img{width:100%}.ring:after{content:"";width:44px;aspect-ratio:1;position:absolute;top:50%;left:50%;translate:-50% -50%}.ring:hover{scale:1.2}.ring:active{scale:1.1}body[data-ring-location=hollin1] .ring,body[data-ring-location=hollin2] .ring{translate:-20px 90px}body[data-ring-location=caradhras1] .ring,body[data-ring-location=caradhras2] .ring{translate:-6px 127px}body[data-ring-location=wallsOfMoria] .ring{translate:-22px 147px}body:is([data-ring-location=westGate1],[data-ring-location=westGate2]) .ring{translate:-614px 221px}body[data-ring-location=crossroads] .ring{translate:40px 230px}body[data-ring-location=hall1] .ring{translate:450px 116px}body[data-ring-location=chamber] .ring{translate:470px 86px}body[data-ring-location=chamberDoor] .ring{translate:494px 86px}body[data-ring-location=stairs] .ring{translate:524px 208px}body[data-ring-location=hall2] .ring{translate:557px 328px}body:is([data-ring-location=bridge1],[data-ring-location=bridge2]) .ring{translate:594px 370px}body[data-ring-location=hall3] .ring{translate:668px 330px}body[data-ring-location=dimrillDale] .ring{translate:8px 148px}@keyframes spin{to{rotate:360deg}}.mapLayer .crows{width:90px;position:absolute;top:32%;left:44%;display:none;animation:var(--keyframes-crows)}body[data-crows=true] .mapLayer .crows{display:unset}.mapLayer button{cursor:pointer}.mapLayer button[data-value=minasTirith]{width:56px;aspect-ratio:1;position:absolute;top:66.8%;left:61.6%}.mapLayer button[data-value=gondor]{width:400px;aspect-ratio:6 / 1;position:absolute;top:70.5%;left:40%;rotate:20deg}body:is([data-ring-location=westGate1],[data-ring-location=westGate2],[data-ring-location=crossroads],[data-ring-location=hall1],[data-ring-location=chamber],[data-ring-location=chamberDoor],[data-ring-location=stairs],[data-ring-location=hall2],[data-ring-location=bridge1],[data-ring-location=bridge2],[data-ring-location=hall3]):not(body:is([data-screen=minasTirith],[data-screen=gondor])) .mapLayer button:is([data-value=minasTirith],[data-value=gondor]){display:none}.paperLayer{width:100%;height:100vh;position:fixed;top:0;left:0;display:none;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 var(--map-top),var(--map-left) var(--map-top),var(--map-left) calc(100% - var(--map-bottom)),calc(100% - var(--map-right)) calc(100% - var(--map-bottom)),calc(100% - var(--map-right)) var(--map-top),0 var(--map-top));background:var(--color-paper);transition:var(--transition-paper-layer)}.paperLayer .borders{position:absolute;top:calc(var(--map-top) - 1px);left:calc(var(--map-left) - 1px);right:calc(var(--map-right) - 1px);bottom:calc(var(--map-bottom) - 1px);border:var(--border);outline:var(--border);outline-offset:1px}body:is([data-screen=story],[data-screen=characters],[data-screen=gondor],[data-screen=minasTirith]) .paperLayer{display:unset}body[data-map-size=large] .paperLayer{opacity:0;pointer-events:none}@media (max-width: 900px){.paperLayer{clip-path:none}.borders{display:none}}.timelineLayer{height:var(--height-timeline);position:fixed;left:var(--map-left);right:var(--map-right);bottom:var(--padding-page);overflow:hidden;color:var(--color-copy)}.timelineLayer .days{flex-shrink:0;position:absolute;left:50%;bottom:24px;display:flex;align-items:center;transition:var(--transition-timeline-position)}.timelineLayer .days .day{height:10px;width:1px;background:var(--color-day-line)}.timelineLayer .days .startOfMonthLine{height:14px;width:2px;background:var(--color-border)}.timelineLayer .days .startOfMonthCopy{position:absolute;top:calc(100% + 6px);translate:-50%;font-size:var(--font-size-xs);color:var(--color-border)}.timelineLayer .days .event{position:absolute;bottom:calc(100% + 4px);translate:calc(-50% + 1.5px);display:flex;flex-direction:column;align-items:center;gap:2px;opacity:0;transition:var(--transition-timeline-event)}.timelineLayer .days .event .copy{font-size:var(--font-size-xs);font-weight:700;color:var(--color-heading)}.timelineLayer .days .event .arrow{--width: 6px;--height: 4px;--width-impl: calc(var(--width) / 2);width:0px;height:0px;border-style:solid;border-width:var(--height) var(--width-impl) 0 var(--width-impl);border-color:var(--color-heading) transparent transparent transparent}.timelineLayer .days .event.moria{bottom:calc(100% + 24px)}.timelineLayer .days .event.balrog .copy{translate:58px}.timelineLayer .gradient{width:20%;height:100%;position:absolute;top:0;z-index:1;background:var(--gradient-timeline-light);animation:var(--keyframes-timeline-gradient)}.timelineLayer .gradient.left{left:0}.timelineLayer .gradient.right{right:0;scale:-1}.timelineLayer .gradient.dark{background:var(--gradient-timeline-dark);display:none}body:is([data-screen=sound],[data-map-size=large]) .timelineLayer{display:none}body:is([data-ring-location=westGate1],[data-ring-location=westGate2],[data-ring-location=crossroads],[data-ring-location=hall1],[data-ring-location=chamber],[data-ring-location=chamberDoor],[data-ring-location=stairs],[data-ring-location=hall2],[data-ring-location=bridge1],[data-ring-location=bridge2],[data-ring-location=hall3]) .timelineLayer .gradient.light{display:none}body:is([data-ring-location=westGate1],[data-ring-location=westGate2],[data-ring-location=crossroads],[data-ring-location=hall1],[data-ring-location=chamber],[data-ring-location=chamberDoor],[data-ring-location=stairs],[data-ring-location=hall2],[data-ring-location=bridge1],[data-ring-location=bridge2],[data-ring-location=hall3]) .timelineLayer .gradient.dark{display:unset}body[data-ring-location=rivendell] .timelineLayer .event.rivendell{opacity:1}body:not([data-ring-location=rivendell]) .timelineLayer .event.rivendell{opacity:var(--opacity-fade)}body:is([data-ring-location="hollin1"],[data-ring-location="hollin2"],[data-ring-location="caradhras1"],[data-ring-location="caradhras2"],[data-ring-location="wallsOfMoria"],) .timelineLayer .event.hollin{opacity:1}body:not(:is([data-ring-location="rivendell"],[data-ring-location="hollin1"],[data-ring-location="hollin2"],[data-ring-location="caradhras1"],[data-ring-location="caradhras2"],[data-ring-location="wallsOfMoria"],)) .timelineLayer .event.hollin{opacity:var(--opacity-fade)}body:is([data-ring-location=westGate1],[data-ring-location=westGate2],[data-ring-location=crossroads],[data-ring-location=hall1],[data-ring-location=chamber],[data-ring-location=chamberDoor],[data-ring-location=stairs],[data-ring-location=hall2],[data-ring-location=bridge1],[data-ring-location=bridge2],[data-ring-location=hall3]) .timelineLayer .event.moria{opacity:1}body[data-ring-location=dimrillDale] .timelineLayer .event.moria{opacity:var(--opacity-fade)}body[data-ring-location=dimrillDale] .timelineLayer .event.balrog{opacity:1}@media (max-width: 900px){.timelineLayer{display:none}}.storyLayer{width:var(--width-copy-layer);padding-top:var(--padding-page);position:relative;display:none;grid-template-rows:1fr;grid-template-columns:var(--padding-page) minmax(0px,var(--max-width-p)) var(--padding-page);justify-content:center;color:var(--color-copy);animation:var(--keyframes-story-layer)}.storyLayer>*{grid-column:2}.storyLayer .intersector{width:100%;display:flex;flex-direction:column;align-items:center}.storyLayer p{width:100%;font-size:var(--font-size-m);transition:var(--transition-story-layer-text)}.storyLayer p em{font-style:italic}.storyLayer .imgLayout{width:100%;display:flex;justify-content:center;position:relative}.storyLayer .imgLayout:has(.tombLight){z-index:var(--z-index-light-beam)}.storyLayer :is(img,.imgLayout){max-width:100%}.storyLayer .intersector+.intersector,.storyLayer p+p{margin-top:var(--gap-p-p)}.storyLayer .imgLayout{margin:var(--gap-p-img) 0}.storyLayer h2{display:flex;flex-direction:column;align-items:center;gap:var(--gap-heading-lines);transition:var(--transition-story-layer-text)}.storyLayer h2>span:first-child{font-size:var(--font-size-m);font-style:italic;color:var(--color-heading)}.storyLayer h2>span:nth-child(2){font-size:var(--font-size-xl);text-transform:uppercase;letter-spacing:var(--letter-spacing-heading);text-align:center;color:var(--color-heading)}.storyLayer h2:first-child{margin:30vh 0 var(--gap-heading-p)}.storyLayer h2:not(:first-child){margin:var(--gap-p-heading) 0 var(--gap-heading-p)}.storyLayer .dinkus{text-align:center}.storyLayer .song{margin:var(--gap-p-song) 0;display:flex;flex-direction:column;font-style:italic}.storyLayer :is(p,h2).fade{opacity:var(--opacity-fade)}.storyLayer .paddingBottom{height:var(--size-xxl)}body[data-screen=story][data-map-size=small] .storyLayer{display:grid}.storyLayer header{width:100%;max-width:var(--max-width-p);display:flex;gap:var(--size-s)}.storyLayer header a{position:relative;display:flex;gap:var(--size-xs);align-items:center;font-size:var(--font-size-m);text-decoration:underline}.storyLayer header a:before{content:"";width:100%;height:100%;min-width:var(--size-min-button);min-height:var(--size-min-button);position:absolute;top:50%;left:50%;translate:-50% -50%}.storyLayer header a.about svg{width:10px;fill:currentColor;opacity:0;transition:var(--transition-button-small);translate:-50%}.storyLayer header a.about:hover{color:var(--color-button-hover)}.storyLayer header a.about:hover svg{opacity:1;translate:0}.storyLayer header a.gitHub{width:24px;aspect-ratio:1}.storyLayer header a.gitHub svg{width:100%;fill:var(--color-copy);transition:var(--transition-button-small)}.storyLayer header a.gitHub:hover{svg {scale: 1.1;}}.storyLayer header h1{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;margin:-1px;padding:0;position:absolute;width:1px;white-space:nowrap}.tombLight{width:100%;height:900px;position:absolute;bottom:0;left:0;overflow:hidden;opacity:0;scale:0 1;transition:var(--transition-tomb-light)}.tombLight svg{width:100%;height:100%;position:absolute;top:-24px;left:50%;translate:-50%}.tombLight svg path:nth-of-type(1){filter:url(#svgBlur6)}.tombLight svg path:nth-of-type(2){filter:url(#svgBlur3)}.tombLight.show{opacity:1;scale:1 1}.storyLayer :is(.staffBackground,.staffLayout){width:var(--width-copy-layer);position:fixed;bottom:0;left:0;translate:0 100%;transition:var(--transition-staff)}.storyLayer .staffBackground{height:150px;z-index:var(--z-index-copy-layer-bottom-artifacts-background)}.storyLayer .staffBackground:after{content:"";width:calc(var(--max-width-p) + 24px);max-width:100%;height:100%;position:absolute;top:50%;left:50%;translate:-50% -50%;scale:-1;background:var(--gradient-staff-background)}.storyLayer .staffLayout{z-index:var(--z-index-copy-layer-bottom-artifacts);display:flex;justify-content:center}.storyLayer .staffLayout img{width:224px;aspect-ratio:600 / 405;position:relative;z-index:2}body:is([data-ring-location="westGate2"],[data-ring-location="crossroads"],[data-ring-location="hall1"],[data-ring-location="chamber"],[data-ring-location="chamberDoor"],[data-ring-location="stairs"],[data-ring-location="hall2"],[data-ring-location="bridge1"],) :is(.staffBackground,.staffLayout){translate:0}.doorLight{--height: 10vh;grid-column:1 / -1;height:var(--height);position:sticky;top:calc(100vh - var(--height));left:0;z-index:var(--z-index-copy-layer-bottom-artifacts);filter:blur(5px)}.doorLight:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--gradient-door-light);clip-path:polygon(0% 0,100% 0,calc(100% - var(--padding-page)) 100%,var(--padding-page) 100%)}.loreLayer{width:var(--width-copy-layer);position:relative;padding:var(--padding-page);display:none;grid:"header" auto "content" auto / minmax(0,var(--max-width-p));justify-content:center;gap:var(--gap-lore);color:var(--color-copy)}.loreLayer header{grid-area:header;display:flex}.loreLayer button{position:relative;font-size:var(--font-size-m);cursor:pointer;text-decoration:underline;text-underline-offset:var(--button-inline-underline-offset);transition:var(--transition-button-small)}.loreLayer button:after{content:"";width:100%;height:100%;min-width:var(--size-min-button);min-height:var(--size-min-button);position:absolute;top:50%;left:50%;translate:-50% -50%}.loreLayer button:hover{color:var(--color-button-hover)}.loreLayer button.back svg{width:10px;position:absolute;top:50%;right:calc(100% + var(--size-xs));translate:50% -50%;fill:currentColor;opacity:0;transition:var(--transition-button-small)}.loreLayer button.back:hover svg{opacity:1;translate:0% -50%}.loreLayer button:not(.back){text-underline-offset:var(--button-inline-underline-offset)}.loreLayer button:not(.back):hover{text-underline-offset:var(--button-inline-hover-underline-offset)}.loreLayer .content{grid-area:content;padding-bottom:var(--size-xxl);display:none;flex-direction:column;align-items:center;gap:var(--gap-lore);animation:var(--keyframes-lore-content)}.loreLayer .content img{max-width:100%}.loreLayer .content h2{font-size:var(--font-size-xl);text-transform:uppercase;letter-spacing:var(--letter-spacing-heading);text-align:center;color:var(--color-heading)}.loreLayer .content h3{font-size:var(--font-size-l);text-transform:uppercase;letter-spacing:var(--letter-spacing-heading);text-align:center;color:var(--color-heading)}.loreLayer .content h4{font-size:var(--font-size-m);text-transform:uppercase;font-weight:700}.loreLayer .content p{width:100%;max-width:var(--max-width-p);font-size:var(--font-size-m)}.loreLayer .content p em{font-style:italic}.loreLayer .content iframe{width:100%;max-width:100%;aspect-ratio:16 / 9;border:var(--border)}.loreLayer .content.characters{grid:"heading" auto "form" auto "characterDetails" auto / 1fr;gap:var(--gap-lore);align-content:start}.loreLayer .content.characters form{grid-area:form}.loreLayer .content.characters form fieldset{display:grid;grid-template-rows:repeat(auto-fit,1fr);grid-template-columns:repeat(5,1fr);gap:var(--size-xs)}.loreLayer .content.characters form fieldset [type=radio]{position:absolute;opacity:0;width:0;height:0}.loreLayer .content.characters form fieldset [type=radio]+img{cursor:pointer;border:var(--border);outline:var(--border);outline-color:transparent;outline-offset:1px;transition:var(--transition-character-portrait)}.loreLayer .content.characters form fieldset img:hover{outline-color:var(--color-border)}.loreLayer .content.characters form fieldset [type=radio]:not(:checked)+img{filter:grayscale(1)}body[data-map-size=small]:is([data-screen=characters],[data-screen=gondor],[data-screen=minasTirith]) .loreLayer{display:grid}body[data-screen=gondor] .loreLayer .content.gondor,body[data-screen=minasTirith] .loreLayer .content.minasTirith{display:flex}body[data-screen=characters] .loreLayer .content.characters{display:grid}body:is([data-ring-location=westGate1],[data-ring-location=westGate2],[data-ring-location=crossroads],[data-ring-location=hall1],[data-ring-location=chamber],[data-ring-location=chamberDoor],[data-ring-location=stairs],[data-ring-location=hall2],[data-ring-location=bridge1],[data-ring-location=bridge2],[data-ring-location=hall3],[data-ring-location=dimrillDale]) .loreLayer label:has(input[value=bill]){opacity:var(--opacity-fade)}body[data-ring-location=dimrillDale] .loreLayer label:has(input[value=gandalf]){opacity:var(--opacity-fade)}.loreLayer .characterDetails{grid-area:characterDetails;display:none}.loreLayer .characterDetails .character{width:100%;display:none;flex-direction:column;gap:var(--size-s);animation:var(--keyframes-lore-content)}.loreLayer .characterDetails .character .nameLayout{width:100%;display:flex;justify-content:center;align-items:center;gap:12px}.loreLayer .characterDetails .character .nameLayout button{width:18px;aspect-ratio:1;position:relative;cursor:pointer;svg {width: 100%; height: 100%; overflow: visible; fill: currentColor; transition: var(--transition-button-small); & path {transition: var(--transition-button-small);}} &::after {content: ""; width: var(--size-min-button); aspect-ratio: 1; position: absolute; top: 50%; left: 50%; translate: -50% -50%;} &:hover {& path:nth-of-type(1) {translate: 64px;} & path:nth-of-type(2) {translate: 32px;} & path:nth-of-type(3) {translate: 16px;}}}.loreLayer .characterDetails .character .update{display:none;text-align:center;font-weight:700;color:var(--color-character-update)}.loreLayer .characterDetails .character .raceLayout{display:flex;align-items:center;gap:12px}.loreLayer .characterDetails .character .equipmentLayout{display:flex;flex-direction:column;gap:var(--size-xs)}.loreLayer .characterDetails .character ul{width:100%;list-style-type:georgian;padding-left:24px;font-size:var(--font-size-m);li::marker {color: var(--color-list-marker);} & em {font-style: italic;}}body:is([data-character=gandalf],[data-character=aragorn],[data-character=boromir],[data-character=legolas],[data-character=gimli],[data-character=frodo],[data-character=sam],[data-character=merry],[data-character=pippin],[data-character=bill]) .loreLayer .characterDetails{display:flex}body[data-character=gandalf] .loreLayer .character.gandalf,body[data-character=aragorn] .loreLayer .character.aragorn,body[data-character=boromir] .loreLayer .character.boromir,body[data-character=legolas] .loreLayer .character.legolas,body[data-character=gimli] .loreLayer .character.gimli,body[data-character=frodo] .loreLayer .character.frodo,body[data-character=sam] .loreLayer .character.sam,body[data-character=merry] .loreLayer .character.merry,body[data-character=pippin] .loreLayer .character.pippin,body[data-character=bill] .loreLayer .character.bill{display:flex}body[data-ring-location=dimrillDale] .loreLayer .character.gandalf .update{display:unset}body:is([data-ring-location=westGate1],[data-ring-location=westGate2],[data-ring-location=crossroads],[data-ring-location=hall1],[data-ring-location=chamber],[data-ring-location=chamberDoor],[data-ring-location=stairs],[data-ring-location=hall2],[data-ring-location=bridge1],[data-ring-location=bridge2],[data-ring-location=hall3],[data-ring-location=dimrillDale]) .loreLayer .character.bill .update{display:unset}button.mapSize{width:var(--size-btn-large);aspect-ratio:1;position:fixed;top:12px;right:calc(12px - (1*(100vw - 100%)));display:flex;justify-content:center;align-items:center;cursor:pointer;background:var(--color-paper);border:var(--border);outline:var(--border);outline-offset:1px;outline-color:transparent;transition:var(--transition-button-large)}button.mapSize svg{width:36px;position:absolute;top:50%;left:50%;translate:-50% -50%;fill:var(--color-copy)}button.mapSize:hover,button.mapSize:focus-visible,button.mapSize:active{outline-color:var(--color-border)}button.mapSize:active{background:var(--color-button-large-active-background)}button.mapSize:active svg{fill:var(--color-button-large-active)}body[data-screen=sound] button.mapSize{display:none}button.mapSize svg.closeIcon{display:none}body[data-map-size=large] button.mapSize svg.mapIcon{display:none}body[data-map-size=large] button.mapSize svg.closeIcon{display:unset}@media (max-width: 900px){button.mapSize{top:8px;right:8px}}.soundLayer{width:100%;height:100dvh;position:fixed;top:0;left:0;display:none;grid:". ." auto ". ." auto / auto auto;justify-content:center;align-content:center;gap:var(--size-s) var(--size-xs)}.soundLayer h2{grid-column:1 / -1;font-size:var(--font-size-xl);letter-spacing:var(--letter-spacing-heading);text-align:center;text-transform:uppercase;color:var(--color-heading)}.soundLayer button{width:var(--size-btn-large);aspect-ratio:1;font-size:var(--font-size-m);border:var(--border);cursor:pointer;outline:var(--border);outline-offset:1px;outline-color:transparent;transition:var(--transition-button-large)}.soundLayer button:first-of-type{justify-self:end}.soundLayer button:hover,.soundLayer button:focus-visible,.soundLayer button:active{outline-color:var(--color-border)}.soundLayer button:active{color:var(--color-button-large-active);background:var(--color-button-large-active-background)}body[data-screen=sound] .soundLayer{display:grid;animation:var(--keyframes-sound-layer)}.frameLayer{width:100%;height:100vh;position:fixed;top:0;left:0;z-index:var(--z-index-frame);pointer-events:none;transition:var(--transition-frame)}.frameLayer img{position:absolute;width:2400px;aspect-ratio:4800 / 2688}.frameLayer img:first-child{left:0;top:0}.frameLayer img:nth-child(2){right:0;top:0}.frameLayer img:nth-child(3){right:0;bottom:0}.frameLayer img:nth-child(4){left:0;bottom:0}body:is([data-ring-location=westGate1],[data-ring-location=westGate2],[data-ring-location=crossroads],[data-ring-location=hall1],[data-ring-location=chamber],[data-ring-location=chamberDoor],[data-ring-location=stairs],[data-ring-location=hall2],[data-ring-location=bridge1],[data-ring-location=bridge2],[data-ring-location=hall3]):not(body:is([data-screen=minasTirith],[data-screen=gondor])) .frameLayer,body[data-map-size=large] .frameLayer{opacity:0}@media (max-width: 900px){.frameLayer{display:none}}.vignetteLayer{position:fixed;top:0;right:0;bottom:0;left:0;box-shadow:var(--box-shadow-vignette);pointer-events:none;opacity:0;transition:var(--transition-vignette)}@keyframes fadeOut{to{opacity:0}}body:has(.mapLayer button.ring:hover) .vignetteLayer{opacity:1;animation:fadeOut var(--duration-vignette) var(--ease-vignette) forwards;animation-delay:17s}@media (max-width: 900px){.vignetteLayer{display:none}}