:root{
    --bg:#dddddd;
    --ink:#1B2B2E;
    --mute:#586A6D;
    --acc:#c1121f;
    --acc2:#c1121f;
    --line:#D3DAD8;
    --card:#FFFFFF;
    --serif:"Literata",Georgia,"Times New Roman",serif;
    --sans:"Familjen Grotesk","Helvetica Neue",Arial,sans-serif;
    box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);
    padding-bottom:env(safe-area-inset-bottom,0px)
}

@media(prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
        --bg:#101719;
        --ink:#E3E9E7;
        --mute:#96A5A6;
        --acc:#6FBFB6;
        --acc2:#c1121f;
        --line:#2A3638;
        --card:#172124
    }
}

:root[data-theme="dark"]{
    --bg:#101719;
    --ink:#E3E9E7;
    --mute:#96A5A6;
    --acc:#6FBFB6;
    --acc2:#c1121f;
    --line:#2A3638;
    --card:#172124
}

*,*::before,*::after{box-sizing:inherit}

html{
    scroll-padding-top:calc(env(safe-area-inset-top,0px) + 1rem);
    scroll-behavior:smooth
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font:400 1.0625rem/1.75 var(--serif);
    -webkit-text-size-adjust:100%
}

a{
    color:var(--acc);
    text-underline-offset:.18em
}
a:focus-visible,summary:focus-visible{
    outline:3px solid var(--acc2);
    outline-offset:3px;
    border-radius:2px
}

.hero{
    max-width:74rem;
    margin:0 auto;
    padding:clamp(2.5rem,7vw,5.5rem) clamp(1.25rem,4vw,2.5rem) 2rem
}
.hero h1{
    font:700 clamp(2.2rem,5.6vw,4.4rem)/1.04 Arial, sans-serif;
    letter-spacing:-.02em;
    margin:0;max-width:18ch
}
.lede{
    margin:2rem 0 0;
    max-width:44rem;
    padding-left:1.1rem;
    border-left:4px solid var(--acc2);
    color:var(--mute);
    font-size:1rem;
    line-height:1.65
}

.wrap{
    max-width:74rem;margin:0 auto;
    padding:0 clamp(1.25rem,4vw,2.5rem) 5rem;
    display:grid;
    grid-template-columns:15.5rem minmax(0,1fr);
    gap:3.5rem
}

nav.toc{
    position:sticky;
    top:calc(env(safe-area-inset-top,0px) + 1.25rem);
    align-self:start;
    max-height:calc(100vh - 3rem);
    overflow:auto;font:500 .95rem/1.35 var(--sans);
    padding-top:.25rem
}
nav.toc a{
    display:block;
    padding:.4rem 0 .4rem .9rem;
    border-left:2px solid var(--line);
    color:var(--mute);text-decoration:none
}
nav.toc a:hover{
    color:var(--ink)
}
nav.toc a.on{
    border-left-color:var(--acc);
    color:var(--ink);
    font-weight:700
}
.navpart{
    font:700 1rem var(--sans);
    margin:1.4rem 0 .4rem;
    color:var(--acc)
}
.navpart:first-child{margin-top:0}
nav.toc summary{display:none}

main{
    min-width:0;
    max-width:46rem
}
main p{
    margin:0 0 1.2rem;
    hyphens:auto
}
h2.part{
    font:700 clamp(1.7rem,3.4vw,2.3rem)/1.15 var(--sans);
    letter-spacing:-.01em;
    margin:4.5rem 0 1rem;
    padding-top:1.2rem;
    border-top:3px solid var(--acc2)
}
h2.part:first-child{margin-top:0}
h3{
    font:700 1.4rem/1.3 var(--sans);
    margin:2.6rem 0 .8rem
}
sup{
    font-size:.7em;line-height:0
}
sup a{
    text-decoration:none;
    color:var(--acc);
    padding:0 .1em
}

blockquote.pull{
    margin:2rem 0;
    padding:.2rem 0 .2rem 1.3rem;
    border-left:4px solid var(--acc);
    font-style:italic
}

.fig{margin:2.2rem 0}
.fig .row{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;align-items:flex-start}
.fig img{height:auto;max-width:100%;min-width:0;border-radius:3px;background:var(--line)}
.fig.stack .row{flex-direction:column;align-items:center}
figcaption{
    font:400 .9rem/1.55 var(--sans);
    font-style:italic;
    color:var(--mute);
    margin-top:.7rem;max-width:42rem
}

.stay{
    font:700 1.5rem/1.3 var(--sans);
    margin-top:2rem;
    text-align:center;
}
.memorial{
    margin-top:3rem;
    padding-top:.5rem
}
.cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
    gap:1.25rem;
    margin-top:1.5rem
}
.card{
    margin:0;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:6px;
    padding:1rem
}
.card img{
    display:block;
    width:100%;
    max-width:15rem;
    height:auto;
    border-radius:3px;
    margin:0 auto .9rem
}
.card figcaption{
    margin:0;
    max-width:none
}
.card span{
    display:block;
    margin-bottom:.5rem
}
.card a{font-weight:500}

ol{
    padding-left:1.4rem;
    font:400 .95rem/1.6 var(--sans);
    color:var(--mute)
}ol li{
    margin-bottom:.45rem;
    overflow-wrap:anywhere
}

footer{
    border-top:1px solid var(--line);
    padding:1.5rem;
    text-align:center;
    color:var(--mute);
    font:400 .85rem var(--sans)
}

@media(max-width:60rem){
    .wrap{display:block}
    nav.toc{
        position:static;
        max-height:none;
        margin:0 0 2rem;
        border:1px solid var(--line);
        border-radius:6px;
        background:var(--card);
        padding:.2rem 1rem
    }
    nav.toc summary{
        display:block;
        cursor:pointer;
        font:700 1rem var(--sans);
        padding:.7rem 0
    }
    nav.toc .navpart:first-of-type{margin-top:.6rem}
}
@media print{
    nav.toc{display:none}
    .wrap{display:block}
    body{background:#fff;color:#000}
}