:root{
  --night:#232a4d; --night-2:#2f3762; --night-3:#454e80;
  --haze:#b9b4dc; --haze-d:#8e88bf;
  --sheet:#f4f5f9; --pillow:#fbfbfd; --duvet:#d9dfec; --stitch:#c9cfe2;
  --moon:#f0c96a; --ink:#1e2238; --muted:#565b78; --link:#3d4aa0;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Charter,"Bitstream Charter",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --w:70rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--sheet) url(quilt.svg) 0 0/80px 80px;color:var(--ink);font:1.125rem/1.72 var(--serif)}
a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{color:var(--night)}
:focus-visible{outline:3px solid var(--moon);outline-offset:2px}
img,svg{max-width:100%}
.skip{position:absolute;left:-999px;top:0;background:var(--moon);color:var(--night);padding:.5rem 1rem;z-index:10;font-family:var(--sans)}
.skip:focus{left:1rem}

/* header */
.top{background:var(--night);color:var(--sheet);position:relative;z-index:5}
.top-inner{max-width:var(--w);margin:0 auto;padding:.8rem 1.25rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--sheet);text-decoration:none}
.brand:hover{color:#fff}
.mark{color:var(--moon);flex:none}
.brand-name{display:block;font:italic 600 1.7rem/1 var(--serif);letter-spacing:-.01em}
.brand small{display:block;font:400 .78rem/1.3 var(--sans);color:var(--haze);margin-top:.2rem}
.nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.1rem}
.nav li{position:relative}
.nav a,.nav .lbl{display:block;padding:.45rem .7rem;color:var(--duvet);text-decoration:none;font:500 .93rem/1.2 var(--sans);border-radius:999px}
.nav a:hover,.nav a[aria-current],.nav .trail>a{background:var(--night-2);color:#fff}
.nav a[aria-current]{box-shadow:inset 0 0 0 1px var(--haze-d)}
.nav li ul{display:none;position:absolute;left:0;top:100%;background:var(--night-2);min-width:14rem;flex-direction:column;padding:.3rem;border-radius:12px;z-index:20}
.nav li:hover>ul,.nav li:focus-within>ul{display:flex}
.navtoggle{position:absolute;opacity:0;pointer-events:none}
.navbtn{display:none;cursor:pointer;font:500 .95rem var(--sans);border:1px solid var(--haze-d);padding:.4rem 1rem;border-radius:999px;color:var(--sheet)}
.navtoggle:focus-visible+.navbtn{outline:3px solid var(--moon)}
@media (max-width:900px){
  .navbtn{display:inline-block}
  .nav{width:100%}
  .nav>ul{display:none;flex-direction:column;margin-top:.6rem}
  .navtoggle:checked~ul{display:flex}
  .nav li ul{display:flex;position:static;background:none;padding-left:1rem}
}

/* the edge of the bed */
.edge{display:block;width:100%;height:clamp(70px,9vw,120px);margin-top:-1px}

/* hero */
.hero{position:relative;background:var(--night);color:var(--sheet);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(1.5px 1.5px at 12% 30%,#fff9 50%,transparent 51%),radial-gradient(1px 1px at 28% 12%,#fff8 50%,transparent 51%),radial-gradient(1.5px 1.5px at 46% 22%,#fff6 50%,transparent 51%),radial-gradient(1px 1px at 63% 9%,#fff9 50%,transparent 51%),radial-gradient(1px 1px at 88% 48%,#fff7 50%,transparent 51%),radial-gradient(1.5px 1.5px at 6% 62%,#fff5 50%,transparent 51%),radial-gradient(1px 1px at 55% 44%,#fff5 50%,transparent 51%);pointer-events:none}
.moon{position:absolute;right:max(1.25rem,calc(50% - 33rem));top:2.2rem;width:clamp(70px,12vw,150px);color:var(--moon)}
.hero-inner{position:relative;max-width:var(--w);margin:0 auto;padding:4.5rem 1.25rem 2.5rem}
.kicker{font:500 .95rem/1.3 var(--sans);color:var(--moon);margin:0 0 .8rem}
.hero h1{font:600 clamp(2.4rem,6vw,4.3rem)/1.04 var(--serif);letter-spacing:-.02em;margin:0 0 1.1rem;max-width:15ch;color:#fff}
.hero .lede{font-size:1.22rem;line-height:1.6;max-width:38rem;color:var(--duvet);margin:0}
.hero-cta{margin:2rem 0 0;display:flex;gap:.8rem;flex-wrap:wrap}
.btn{display:inline-block;background:var(--moon);color:var(--night);font:600 1rem/1 var(--sans);padding:.95rem 1.4rem;text-decoration:none;border:1px solid var(--moon);border-radius:14px}
.btn:hover{background:#f6d78d;color:var(--night)}
.btn.ghost{background:transparent;color:var(--sheet);border-color:var(--haze-d)}
.btn.ghost:hover{border-color:var(--sheet);color:#fff}
@media (max-width:600px){
  .moon{width:52px;top:1.1rem;right:1.25rem}
  .hero-inner{padding-top:4.6rem}
  .hero .lede{font-size:1.1rem}
}

/* page head */
.pagehead{background:var(--night);color:var(--sheet)}
.pagehead-inner{max-width:46rem;margin:0 auto;padding:2.6rem 1.25rem 1.4rem}
.pagehead h1{font:600 clamp(2rem,4.6vw,3.2rem)/1.08 var(--serif);letter-spacing:-.015em;color:#fff;margin:.7rem 0 .7rem}
.pagehead .lede{font-size:1.15rem;line-height:1.6;color:var(--duvet);margin:.5rem 0 0}
.crumbs{font:400 .88rem var(--sans);color:var(--haze)}
.crumbs a{color:var(--duvet);text-decoration:none}
.crumbs a:hover{color:var(--moon)}
.meta{font:400 .9rem/1.4 var(--sans);color:var(--muted);margin:.2rem 0}
.pagehead .meta{color:var(--haze)}
.meta a{color:inherit}
.pagehead .meta a{color:var(--moon)}
.meta .sep{margin:0 .45em;opacity:.55}

/* content */
.content{max-width:46rem;margin:.5rem auto 3rem;padding:2.4rem clamp(1.2rem,4.5vw,3rem);background:var(--pillow);border-radius:22px;outline:1px dashed var(--stitch);outline-offset:-10px;box-shadow:0 1px 0 var(--duvet),0 18px 40px -28px rgba(35,42,77,.45)}
@media (max-width:46rem){.content{border-radius:0;margin-top:0}}
.content>:first-child{margin-top:0}
.content h2{font:600 1.7rem/1.2 var(--serif);letter-spacing:-.01em;color:var(--night);margin:2.4rem 0 .6rem}
.content h3{font:600 1.28rem/1.25 var(--serif);color:var(--night-2);margin:1.7rem 0 .4rem}
.content p,.content li{max-width:68ch}
.content ul,.content ol{padding-left:1.4rem}
.content li{margin:.35rem 0}
.content li::marker{color:var(--haze-d)}
.content blockquote{margin:1.6rem 0;padding:1rem 1.3rem;background:#eef0f8;border-radius:14px;border-left:4px solid var(--haze)}
.content blockquote p{margin:.3rem 0}
.content table{width:100%;border-collapse:collapse;margin:1.3rem 0;font:400 .98rem/1.5 var(--sans)}
@media (max-width:560px){.content table{display:block;overflow-x:auto;font-size:.92rem}}
.content th,.content td{padding:.6rem .65rem;border-bottom:1px solid var(--duvet);text-align:left;vertical-align:top}
.content th{color:var(--night);font-weight:600;border-bottom:2px solid var(--haze)}
.content hr{border:0;border-top:1px dashed var(--stitch);margin:2.2rem 0}
.content code{background:var(--sheet);padding:.1em .3em;border-radius:4px}
.content .tags{margin-top:2.2rem;font:400 .92rem var(--sans);color:var(--muted)}
.content .tags a,.content .tags .t{display:inline-block;margin:.15rem;padding:.2rem .7rem;background:var(--sheet);border:1px dashed var(--stitch);border-radius:999px;text-decoration:none;color:var(--night-2)}
.content .tags a:hover{border-color:var(--haze-d)}
.home-content{margin-top:0}
.big404{font:italic 600 4.5rem/1 var(--serif);color:var(--moon);margin:0}

/* bands & cards */
.band{padding:1.2rem 0 2rem}
.band-inner{max-width:var(--w);margin:0 auto;padding:0 1.25rem}
.section-title{font:600 1.55rem/1.2 var(--serif);color:var(--night);margin:0 0 1.2rem}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:1.1rem}
.card{background:var(--pillow);border-radius:20px;padding:1.4rem 1.5rem 1.5rem;outline:1px dashed var(--stitch);outline-offset:-8px;box-shadow:0 1px 0 var(--duvet);position:relative}
.card::before{content:"";position:absolute;left:1.5rem;top:0;width:2.6rem;height:4px;border-radius:0 0 4px 4px;background:var(--haze)}
.cat-soevn::before{background:var(--night-3)}
.cat-senge-og-sengetoej::before{background:var(--haze-d)}
.cat-sovevaerelset::before{background:var(--moon)}
.card-cat{font:500 .85rem var(--sans);color:var(--muted);margin:.2rem 0 .5rem}
.card h3{font:600 1.25rem/1.25 var(--serif);margin:0 0 .5rem}
.card h3 a{color:var(--night);text-decoration:none}
.card h3 a:hover{color:var(--link);text-decoration:underline}
.card h3 a::after{content:"";position:absolute;inset:0;border-radius:20px}
.card-txt{margin:0;color:var(--muted);font-size:1rem;line-height:1.55}
.card:focus-within{outline:3px solid var(--moon);outline-offset:2px}
.card h3 a:focus-visible{outline:none}
.all{margin:1.3rem 0 0;font:500 1rem var(--sans)}

/* list */
.chips{list-style:none;padding:0;margin:1.2rem 0 0;display:flex;flex-wrap:wrap;gap:.45rem}
.chips a{display:block;padding:.35rem .9rem;border:1px solid var(--night-3);color:var(--duvet);text-decoration:none;font:500 .9rem var(--sans);border-radius:999px}
.chips a:hover,.chips a[aria-current]{background:var(--haze);border-color:var(--haze);color:var(--night)}
.list-wrap{max-width:50rem;margin:.5rem auto 3rem;padding:0 1.25rem}
.rows{display:flex;flex-direction:column;gap:1rem}
.row{display:flex;gap:1.3rem;background:var(--pillow);border-radius:20px;padding:1.3rem 1.5rem;outline:1px dashed var(--stitch);outline-offset:-8px;box-shadow:0 1px 0 var(--duvet)}
.row-date{flex:none;width:3.6rem;text-align:center;font:500 .85rem/1.1 var(--sans);color:var(--muted);padding-top:.2rem}
.row-date b{display:block;font:600 2rem/1 var(--serif);color:var(--night)}
.row h2{font:600 1.35rem/1.2 var(--serif);margin:0 0 .25rem}
.row h2 a{color:var(--night);text-decoration:none}
.row h2 a:hover{text-decoration:underline;color:var(--link)}
.row p{margin:.35rem 0 0}
.row .meta{margin:0}
.pager{display:flex;justify-content:space-between;align-items:center;margin-top:1.6rem;font:500 .95rem var(--sans)}
@media (max-width:560px){.row{flex-direction:column;gap:.4rem}.row-date{text-align:left;width:auto}.row-date b{display:inline;font-size:1.3rem;margin-right:.3rem}}

/* footer */
.foot{background:var(--night);color:var(--duvet);margin-top:2rem;border-top:6px solid var(--haze)}
.foot-inner{max-width:var(--w);margin:0 auto;padding:2.6rem 1.25rem 1rem;display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem;font-size:1rem}
@media (max-width:760px){.foot-inner{grid-template-columns:1fr}}
.foot-name{font:italic 600 1.45rem var(--serif);color:#fff;margin:0 0 .4rem}
.foot-h{font:600 .95rem var(--sans);color:var(--moon);margin:0 0 .5rem}
.footlinks{list-style:none;margin:0;padding:0;font-family:var(--sans);font-size:.95rem}
.footlinks li{margin:.3rem 0}
.footlinks a{color:var(--sheet);text-decoration:none}
.footlinks a:hover{color:var(--moon);text-decoration:underline}
.copy{max-width:var(--w);margin:0 auto;padding:1rem 1.25rem 1.8rem;font:400 .88rem/1.5 var(--sans);color:var(--haze);border-top:1px dashed var(--night-3)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}