@font-face{font-family:Metamorphous;font-style:normal;font-weight:400;
font-display:swap;src:url(/fonts/metamorphous.woff2) format('woff2')}
:root{
--felt:#1b1713;--felt-deep:#141110;--linen:#e8ddc8;--linen-dim:#cdbfa4;
--falu:#7a342b;--falu-bright:#a34638;--ochre:#c99b3f;--indigo:#1f2a44;
--verdigris:#5a7a5e;--panel:#241f19;--sky-a:#2a2018;--sky-b:#1b1713;
--tree:#0d0b09;--glowwarm:rgba(222,168,84,.10);
}
body.night{
--felt:#12141c;--felt-deep:#0c0e15;--panel:#181b26;--sky-a:#0e1322;--sky-b:#12141c;
--tree:#070810;--glowwarm:rgba(222,168,84,.14);
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--felt);color:var(--linen);
font:17px/1.65 Palatino,'Palatino Linotype','Book Antiqua',Georgia,serif;
transition:background 1.2s ease;overflow-x:hidden}
a{color:var(--linen)}
h1,h2,h3{font-family:Metamorphous,Palatino,'Palatino Linotype',Georgia,serif;
font-weight:normal;letter-spacing:.04em;text-wrap:balance}
section h2{font-size:1.9rem;text-align:center}
.section-sub{text-align:center;opacity:.75;margin:.5em auto 0;max-width:38em}
.skip-link{position:absolute;left:-999px;top:8px;z-index:50;background:var(--falu);
padding:.5em 1em;border-radius:6px}
.skip-link:focus{left:8px}

/* lantern follows the pointer */
.lantern{position:fixed;inset:0;pointer-events:none;z-index:1;
background:radial-gradient(circle 340px at var(--mx,50%) var(--my,30%),var(--glowwarm),transparent 70%);
transition:background .2s}

/* the clock */
.phase-toggle{position:fixed;top:18px;right:18px;z-index:10;width:52px;height:52px;
border-radius:50%;border:2px dashed var(--ochre);background:var(--panel);cursor:pointer;
color:var(--linen);font-size:1.25rem;display:grid;place-items:center;overflow:hidden;
transition:border-color .8s,transform .2s}
.phase-toggle:hover{transform:rotate(15deg)}
.phase-toggle .pt-sun,.phase-toggle .pt-moon{grid-area:1/1;transition:opacity .6s,transform .8s}
body.day .pt-moon{opacity:0;transform:translateY(14px)}
body.night .pt-sun{opacity:0;transform:translateY(-14px)}
body.night .phase-toggle{border-color:#8fa3d4}

/* the red-thread compass */
.compass{position:fixed;left:22px;top:50%;transform:translateY(-50%);z-index:9}
.compass ol{list-style:none;padding:0;display:flex;flex-direction:column;gap:26px;position:relative}
.compass ol::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:0;
border-left:2px dashed var(--falu-bright);opacity:.7}
.compass a{display:flex;align-items:center;gap:10px;text-decoration:none;opacity:.55;
transition:opacity .3s}
.compass a:hover{opacity:1}
.compass a[aria-current]{opacity:1}
.knot{width:12px;height:12px;border-radius:50%;background:var(--panel);
border:2px solid var(--falu-bright);flex:none;position:relative;z-index:1;transition:background .3s}
.compass a[aria-current] .knot{background:var(--falu-bright)}
.knot-label{font-size:.78rem;letter-spacing:.08em;opacity:0;transform:translateX(-6px);
transition:opacity .25s,transform .25s;white-space:nowrap}
.compass a:hover .knot-label,.compass a[aria-current] .knot-label{opacity:1;transform:none}
@media(max-width:900px){.compass{display:none}}

/* hero */
.hero{position:relative;text-align:center;padding:13vh 24px 0;min-height:88vh;
display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
max-width:none}
.sky{position:absolute;inset:0;z-index:-1;
background:linear-gradient(var(--sky-a),var(--sky-b) 75%);transition:background 1.2s ease}
.hero-kicker{color:var(--ochre);letter-spacing:.34em;text-transform:uppercase;font-size:.78rem}
.wordmark{width:min(680px,88vw);margin:.4em 0 0}
.wm-stitch,.wm-fill{font:132px Metamorphous,Palatino,'Palatino Linotype',Georgia,serif;letter-spacing:.08em}
.wm-stitch{fill:none;stroke:var(--falu-bright);stroke-width:2.4;stroke-dasharray:7 5;
stroke-dashoffset:1400;animation:sew 2.2s ease-out forwards}
.wm-fill{fill:var(--linen);opacity:0;animation:inkin 1.1s ease-in 1.5s forwards}
@keyframes sew{to{stroke-dashoffset:0}}
@keyframes inkin{to{opacity:1}}
.hero-pitch{margin:1.1em auto;max-width:36em;opacity:.92;line-height:1.8}
.cta-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:1.2em}
.hero-hint{margin-top:2.2em;font-size:.85rem;opacity:.55;letter-spacing:.08em}
.treeline{position:absolute;bottom:-2px;left:0;width:100%;height:120px}
.treeline polygon{fill:var(--tree);transition:fill 1.2s ease}
.treeline .eyes{opacity:0;fill:#cfe3d8}
body.night .treeline .eyes{animation:blink 7s infinite;animation-delay:var(--blink-delay)}
@keyframes blink{0%,4%{opacity:0}6%,40%{opacity:.9}42%,46%{opacity:0}48%,88%{opacity:.9}90%,100%{opacity:0}}

/* buttons */
.btn{display:inline-block;padding:.7em 1.7em;border:2px dashed var(--falu-bright);
border-radius:6px;background:var(--panel);text-decoration:none;font-size:1rem;
transition:transform .15s,box-shadow .15s;color:var(--linen)}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.55)}
.btn:focus-visible,.phase-toggle:focus-visible,.compass a:focus-visible{outline:2px solid var(--ochre);outline-offset:3px}
.btn-primary{background:var(--falu);border-style:solid;border-color:#521f19}
.btn-small{font-size:.85rem;padding:.4em 1em;cursor:pointer}
.linkish{background:none;border:none;color:var(--ochre);font:inherit;cursor:pointer;
text-decoration:underline dashed;padding:0}

/* chapters */
.chapter{max-width:1120px;margin:0 auto;padding:10vh 24px 4vh;position:relative;z-index:2}
.hero.chapter{max-width:none;padding-left:24px;padding-right:24px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:20px;margin-top:2.4em}
.more{text-align:center;margin:2.6em 0 0}

/* gameplay scenes */
.scene-flip{position:relative;margin:2.4em auto 0;max-width:980px;border-radius:12px;
overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.6);border:1px solid #000;aspect-ratio:16/9}
.scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
transition:opacity 1.1s ease}
.scene-night{opacity:0}
body.night .scene-night{opacity:1}
body.night .scene-day{opacity:0}
.scene-note{text-align:center;margin-top:1.2em;font-size:.92rem;opacity:.8}
.scene-inset{position:absolute;right:18px;bottom:18px;width:150px;border-radius:8px;
overflow:hidden;border:1px solid #000;box-shadow:0 10px 26px rgba(0,0,0,.7);aspect-ratio:178/266;z-index:2}
.scene-inset .scene{position:absolute;inset:0}
.scene-inset figcaption{position:absolute;left:0;right:0;bottom:0;background:#000c;
font-size:.68rem;text-align:center;padding:.3em;letter-spacing:.06em;z-index:3}
.records-links{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:2.2em}
.scene-single{margin:2.4em auto 0;max-width:980px;border-radius:12px;overflow:hidden;
box-shadow:0 24px 60px rgba(0,0,0,.6);border:1px solid #000}
.scene-single img{width:100%;display:block}

/* cards on the cloth */
.card-tile{position:relative;display:block;background:var(--panel);border-radius:10px;
padding:8px;text-decoration:none;border:1px solid #000;
transform:rotate(var(--rot,0deg));transform-style:preserve-3d;
box-shadow:0 4px 12px rgba(0,0,0,.6);transition:transform .18s,box-shadow .18s}
.card-tile:hover{box-shadow:0 18px 34px rgba(0,0,0,.65);z-index:3}
.card-tile img{width:100%;border-radius:6px;display:block}
.rarity-rare{outline:1.5px solid var(--ochre);outline-offset:-4px}
.rarity-uncommon{outline:1.5px solid #7d8fb5;outline-offset:-4px}
.tile-name{display:block;text-align:center;padding-top:7px;font-size:.9rem;color:var(--linen)}
.tile-cost{position:absolute;top:2px;left:2px;background:var(--indigo);border:1px solid #000;
border-radius:50%;width:1.9em;height:1.9em;display:grid;place-items:center;font-size:.95rem}
.stat{position:absolute;bottom:2.3em;width:1.85em;height:1.85em;display:grid;place-items:center;
border-radius:50%;font-size:.9rem;border:1px solid #000;transition:background .6s,color .6s}
.atk{left:4px;background:#3d3428}
.hp{right:4px;background:#402724}
body.night .atk.buffed{background:var(--indigo);color:#cfe0ff}
.pips{position:absolute;top:5px;right:7px}
.pip{opacity:.8;text-shadow:0 1px 2px #000;font-size:.95rem}
body.night .pip-night{animation:ember 2.6s ease-in-out infinite}
@keyframes ember{0%,100%{opacity:.55}50%{opacity:1;text-shadow:0 0 8px #ffd88a}}

/* heroes */
.hero-split{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:2.6em}
.hero-card{position:relative;border-radius:12px;padding:30px 26px 0;text-decoration:none;
display:flex;flex-direction:column;min-height:430px;overflow:hidden;
border:2px dashed #3a332b;transition:transform .2s,box-shadow .2s,border-color .4s}
.hero-card:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(0,0,0,.6)}
.hero-tomte{background:linear-gradient(180deg,#2b2014,#1d1710);border-color:#6b4a26}
.hero-tomte:hover{border-color:var(--ochre)}
.hero-draugr{background:linear-gradient(180deg,#131a28,#101319);border-color:#2c3a52}
.hero-draugr:hover{border-color:#7d9fd4}
.hero-text{position:relative;z-index:2;max-width:60%}
.hero-card h3{font-size:1.6rem;margin-bottom:.4em}
.hero-card p{opacity:.85;font-size:.95rem}
.bust{position:absolute;right:-24px;bottom:0;height:105%;object-fit:contain;
filter:drop-shadow(0 12px 18px rgba(0,0,0,.7));transition:transform .3s}
.hero-card:hover .bust{transform:translateY(-6px)}

/* folklore strip */
.folklore blockquote{max-width:44em;margin:0 auto;text-align:center}
.folklore p{font-size:1.35rem;line-height:1.7;font-style:italic}
.folklore cite{display:block;margin-top:1.4em;font-style:normal;font-size:.85rem;
opacity:.6;letter-spacing:.04em}
.folklore blockquote::before{content:"❦";display:block;color:var(--falu-bright);
font-size:1.4rem;margin-bottom:1em}

footer{text-align:center;padding:9vh 24px 13vh;position:relative;z-index:2}
.fine{opacity:.55;font-size:.85rem;max-width:38em;margin:1.6em auto 0}

/* archive + card pages */
.page-head{max-width:1120px;margin:0 auto;padding:5vh 24px 0}
.crumb{opacity:.7;text-decoration:none}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-top:1.2em}
.filters select{background:var(--panel);color:var(--linen);border:1px solid #444;
padding:.45em .7em;border-radius:6px;font:inherit}
.archive-grid{max-width:1120px;margin:2em auto;padding:0 24px}
.card-page{max-width:920px;margin:5vh auto;padding:0 24px;display:grid;
grid-template-columns:minmax(240px,390px) 1fr;gap:40px;align-items:start}
.cp-art{cursor:default;--rot:0deg}
.cp-en{opacity:.75}
.cp-stats{margin:.8em 0}
.cp-kw{color:var(--ochre);font-size:.95rem}
.cp-phase{margin:.6em 0;color:#9fb4e8}
.cp-flavor{font-style:italic;opacity:.85;margin:1em 0}
.cp-folk{border-left:3px solid var(--falu);padding-left:1em;margin:1em 0;opacity:.9}
.cp-prov{display:inline-block;margin:.35em 0 0;padding:.18em .75em;border-radius:999px;
font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;border:1px solid;opacity:.9}
.prov-recorded{color:#9dbd9f;border-color:var(--verdigris)}
.prov-myth{color:#c98d80;border-color:var(--falu-bright)}
.prov-everyday{color:#d9b96a;border-color:var(--ochre)}
.cp-info .btn{margin-top:1.2em}

@media(max-width:700px){
.scene-flip{aspect-ratio:4/3}
.scene-inset{width:112px;right:10px;bottom:10px}
.card-page,.hero-split{grid-template-columns:1fr}
.hero-text{max-width:100%}
.bust{position:static;height:260px;align-self:center;margin-top:12px}
.hero-card{padding-bottom:0}}
@media(prefers-reduced-motion:reduce){
.wm-stitch{animation:none;stroke-dashoffset:0}
.wm-fill{animation:none;opacity:1}
body.night .treeline .eyes{animation:none;opacity:.9}
.lantern{display:none}
*{transition-duration:.01s!important}}