@font-face{font-family:Alcarin Tengwar;src:url(/tolkien-modern/AlcarinTengwar-Regular.woff2)format("woff2");font-display:swap}:root{color-scheme:dark;--ink:#f7eccf;--muted:#c8c1b1;--gold:#efd188;--line:#b89c575e;--navy:#080e32;--serif:Georgia, "Times New Roman", serif}*{box-sizing:border-box}body{color:var(--ink);background:radial-gradient(ellipse at 76% 25%, #20264c 0%, transparent 55%), var(--navy);min-height:100vh;margin:0;font:1rem/1.55 system-ui,sans-serif}a{color:var(--gold);text-underline-offset:.2em}a:hover{color:#fff4d3}:focus-visible{outline:2px solid var(--gold);outline-offset:5px}.skip{position:absolute;top:.5rem;left:.5rem;translate:0 -200%}.skip:focus{background:var(--navy);z-index:2;translate:0}.masthead,footer{justify-content:space-between;align-items:center;gap:1rem;max-width:100rem;margin-inline:auto;padding:1rem clamp(1rem,5vw,5rem);display:flex}.masthead{border-bottom:1px solid var(--line)}.masthead a,footer a{text-decoration:none}.masthead a:first-child{font:1.1rem var(--serif)}footer{border-top:1px solid var(--line);font-size:.875rem}.splash{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:center;gap:clamp(2rem,6vw,7rem);max-width:100rem;min-height:76svh;margin-inline:auto;padding:clamp(2.5rem,7vw,8rem) clamp(1rem,5vw,5rem);display:grid}h1,blockquote{font-family:var(--serif)}h1{text-wrap:balance;font-weight:400;line-height:1.02}.intro h1{color:var(--gold);margin:.18em 0 .25em;font-size:clamp(3rem,5.85vw,7rem)}.intro h1 em{color:var(--ink);font-weight:400}.runes{width:min(24rem,100%);height:auto;display:block}.byline{color:var(--gold);letter-spacing:.17em;text-transform:uppercase;font-size:.875rem}.intro>p:last-of-type{font:clamp(1.125rem, 2vw, 1.55rem)/1.5 var(--serif);max-width:30ch}.enter{border:1px solid var(--gold);min-height:3rem;color:var(--navy);background:var(--gold);align-items:center;gap:1.4rem;margin-top:.75rem;padding:.6rem 1.15rem;font-weight:650;text-decoration:none;display:inline-flex}.enter:hover{color:var(--navy);background:#fff4d3}.ring{isolation:isolate;aspect-ratio:1;background:radial-gradient(circle,#79634750,#182045 48%,#0000 68%);grid-template:1fr 1fr 1fr/1fr 1fr 1fr;place-items:center;width:min(100%,27rem);margin-inline:auto;display:grid;position:relative}.ring:before,.ring:after{content:"";border:1px solid var(--line);z-index:-1;border-radius:50%;position:absolute;inset:12%}.ring:after{border-style:dotted;inset:17%}.ring a:not(.art-credit,.ring-home){width:100%;min-height:44px;color:var(--gold);border-radius:.3rem;place-items:center;text-decoration:none;display:grid}.ring a:not(.art-credit,.ring-home):hover,.ring a[aria-current]{color:#fff3cc;background:#efd18819}.ring a svg{pointer-events:none;width:100%;min-width:4rem;display:block;overflow:visible}.ring text{fill:currentColor;text-anchor:middle;font:22px var(--serif)}.ring .tengwar{font:24px Alcarin Tengwar}.ring .fantasy{grid-area:1/2}.ring .poetry{grid-area:2/3}.ring .tolkien{grid-area:2/1}.ring .tolkien svg{rotate:-90deg}.ring .poetry svg{rotate:90deg}.ring .links{grid-area:3/2}.ring-home{grid-area:2/2;place-items:center;width:100%;min-height:44px;display:grid}.ring-home:hover .ring-art{filter:drop-shadow(0 0 1rem #e7ba5990)}.ring-art{filter:drop-shadow(0 0 .6rem #e7ba594a);width:106%;height:auto;display:block}.art-credit{grid-area:3/3;align-self:end;padding:.5rem;font-size:.75rem}.sidebar .ring text{font-size:23px}.sidebar .ring .tengwar{font-size:25px}blockquote{max-width:30ch;color:var(--gold);text-align:center;margin:1rem auto 0;font-size:clamp(1rem,1.65vw,1.35rem);font-style:italic}cite{color:var(--muted);margin-top:.65rem;font:.8rem system-ui,sans-serif;display:block}.reading{grid-template-columns:clamp(13rem,21vw,19rem) minmax(0,1fr);gap:clamp(2rem,5vw,6rem);max-width:94rem;min-height:75svh;margin-inline:auto;padding:clamp(2rem,5vw,5rem) clamp(1rem,5vw,5rem);display:grid}.contents{margin-top:.75rem;display:grid}.contents p,.eyebrow{color:var(--gold);letter-spacing:.15em;text-transform:uppercase;font-size:.8rem}.contents a,.contents summary,.reference{border-inline-start:1px solid var(--line);padding:.5rem .7rem;text-decoration:none;display:block}.contents summary{cursor:pointer;color:var(--gold);display:list-item}.contents details a{padding-inline-start:1.45rem}.contents [aria-current]{border-color:var(--gold);background:#efd18818}.reference{margin-top:1rem}.chapter{max-width:74ch}.chapter h1{color:var(--gold);margin:.2em 0 .55em;font-size:clamp(2.35rem,5vw,5rem)}.prose,.archive-links{font:clamp(1.1rem, 1.65vw, 1.35rem)/1.7 var(--serif);overflow-wrap:anywhere}.prose h2{color:var(--gold);font-size:1.45em}.prose a[name],.prose [id]{scroll-margin-top:1.5rem}.sequence{border-top:1px solid var(--line);flex-wrap:wrap;justify-content:space-between;gap:1rem 2rem;margin-top:2.5rem;padding-top:1rem;display:flex}.sequence a{text-decoration:none}@media (width<=48rem){.splash,.reading{grid-template-columns:minmax(0,1fr)}.splash-navigation{justify-self:center;width:100%;max-width:24rem}.intro h1{max-width:12ch}.sidebar .ring{max-width:16rem}.reading{gap:1.5rem}.contents{grid-template-columns:repeat(2,minmax(0,1fr))}.contents p{grid-column:1/-1}}.splash{isolation:isolate;position:relative}.splash-illustration{object-fit:cover;object-position:center 54%;opacity:.25;z-index:-1;width:100%;height:100%;position:absolute;inset:0;mask-image:linear-gradient(#0000,#000 22% 72%,#0000)}.splash-image-credit{place-items:center;min-width:44px;min-height:44px;font-size:1.2rem;display:grid;position:absolute;bottom:.5rem;right:clamp(1rem,5vw,5rem)}.illustrated-copy{display:flow-root}.chapter-illustration{float:inline-end;width:clamp(10rem,40%,19rem);margin:.35rem 0 1rem 1.5rem}.chapter-illustration img{object-fit:contain;border:1px solid var(--line);background:#0004;width:100%;height:auto;max-height:21rem;display:block}.chapter-illustration figcaption{border-bottom:1px solid var(--line);font:.95rem/1.4 var(--serif);padding:.45rem 0 .6rem}.chapter-illustration small{color:var(--muted);margin-top:.22rem;font:.72rem/1.45 system-ui,sans-serif;display:block}.illustration-credits li{margin-block:.6rem}@media (width<=32rem){.chapter-illustration{float:none;width:min(100%,22rem);margin:0 auto 1.25rem}}
