:root{
  --paper:#E8EDF1; --ink:#1C2A39; --fjord:#2E5C8A; --mist:#B9C6D2; --lingon:#B8324A;
  --ink-soft:#44566A;
  --sans:"Familjen Grotesk",system-ui,sans-serif; --serif:"Source Serif 4",Georgia,serif;
  --rail:13.5rem; --measure:38rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.125rem/1.7 var(--serif);text-rendering:optimizeLegibility}
a{color:var(--lingon);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--fjord);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:.5rem 1rem;font-family:var(--sans)}
.skip:focus{left:1rem;top:1rem;z-index:10}

/* frame: a rail with two parallel lines, then the reading column */
.frame{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);min-height:100vh}
.rail{position:relative;padding:2.5rem 2rem 2rem 1.75rem;font-family:var(--sans)}
.rail::before,.rail::after{content:"";position:absolute;top:0;bottom:0;width:2px;background:var(--fjord)}
.rail::before{right:.9rem}
.rail::after{right:0;background:var(--mist)}
.rail>*{position:sticky;top:2.5rem}
.mark{display:block;text-decoration:none;color:var(--ink);font-weight:700;font-size:1.15rem;line-height:1.05;letter-spacing:-.01em;margin-bottom:2.5rem}
.mark span{display:block}
.mark-b{color:var(--fjord);transform:translateX(.6rem)}
.rail nav ul{list-style:none;margin:0;padding:0}
.rail nav li{margin:0 0 .55rem}
.rail nav a{color:var(--ink-soft);text-decoration:none;font-size:1rem}
.rail nav a:hover,.rail nav a[aria-current="page"]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--lingon)}
.rail .mark{position:static}

main{padding:3.5rem clamp(1.25rem,5vw,5rem) 4rem}
.foot{grid-column:2;padding:2rem clamp(1.25rem,5vw,5rem) 3rem;font:400 .95rem/1.5 var(--sans);color:var(--ink-soft);border-top:2px solid var(--mist);max-width:calc(var(--measure) + 10rem)}
.foot p{margin:.3rem 0}
.foot a{color:var(--ink-soft);margin-right:1rem}

/* hero: the wordmark and its offset double */
.hero{margin:0 0 4.5rem}
.double{position:relative;margin:0 0 2rem;font:700 clamp(3.4rem,10.5vw,8.5rem)/.9 var(--sans);letter-spacing:-.035em}
.double .solid{position:relative;display:block;z-index:1}
.double .ghost{position:absolute;inset:0;display:block;color:transparent;-webkit-text-stroke:1.5px var(--fjord);transform:translate(.16em,.13em);z-index:0;animation:drift 1.4s cubic-bezier(.2,.7,.1,1) both .2s}
@keyframes drift{from{transform:translate(0,0);opacity:0}to{transform:translate(.16em,.13em);opacity:1}}
@media (prefers-reduced-motion:reduce){.double .ghost{animation:none}}
.lede{max-width:var(--measure);font-size:1.3rem;line-height:1.55}
.lede p{margin:0 0 1rem}

/* essay index: typographic list, not cards */
.index h2,.more h2{font:600 1rem/1.3 var(--sans);color:var(--fjord);margin:0 0 1rem;letter-spacing:.01em}
.essay-list{list-style:none;margin:0;padding:0;max-width:calc(var(--measure) + 6rem)}
.essay-list li{border-top:2px solid var(--mist)}
.essay-list li:last-child{border-bottom:2px solid var(--mist)}
.essay-list a{display:grid;grid-template-columns:minmax(0,1fr);gap:.35rem;padding:1.35rem 0;text-decoration:none;color:var(--ink)}
.essay-list .t{font:600 clamp(1.4rem,2.6vw,1.85rem)/1.15 var(--sans);letter-spacing:-.015em}
.essay-list .d{font-size:1.05rem;color:var(--ink-soft);max-width:var(--measure)}
.essay-list a:hover .t{text-decoration:underline;text-decoration-color:var(--lingon);text-decoration-thickness:2px;text-underline-offset:.15em}

/* pages */
.page-head{max-width:calc(var(--measure) + 6rem);margin-bottom:2.5rem}
.page-head h1{font:700 clamp(2.3rem,5.4vw,4rem)/1.02 var(--sans);letter-spacing:-.03em;margin:0 0 1.25rem}
.standfirst{font-size:1.3rem;line-height:1.5;margin:0 0 1rem;max-width:var(--measure)}
.meta{font:400 .95rem/1.4 var(--sans);color:var(--ink-soft);margin:0}
.prose{max-width:var(--measure)}
.prose h2{font:600 1.55rem/1.2 var(--sans);letter-spacing:-.01em;margin:2.6rem 0 .8rem}
.prose h3{font:600 1.2rem/1.3 var(--sans);margin:2rem 0 .5rem}
.prose p,.prose ul,.prose ol{margin:0 0 1.15rem}
.prose li{margin:.3rem 0}
.prose blockquote{margin:1.8rem 0;padding:0 0 0 1.25rem;border-left:4px double var(--fjord);font-style:italic}
.prose table{border-collapse:collapse;width:100%;margin:1.5rem 0;font:400 1rem/1.45 var(--sans)}
.prose th,.prose td{text-align:left;padding:.55rem .6rem;border-bottom:1px solid var(--mist);vertical-align:top}
.prose th{font-weight:600;border-bottom:2px solid var(--fjord)}
.more{max-width:var(--measure);margin-top:3.5rem;padding-top:1.5rem;border-top:2px solid var(--mist);font-family:var(--sans)}
.more ul{list-style:none;padding:0;margin:0}
.more li{margin:.45rem 0}

@media (max-width:760px){
  .frame{grid-template-columns:1fr}
  .rail{padding:1.25rem 1rem 1.5rem}
  .rail::before,.rail::after{top:auto;left:0;right:0;width:auto;height:2px;bottom:.6rem}
  .rail::after{bottom:0}
  .rail>*{position:static}
  .mark{margin-bottom:1rem}
  .rail nav ul{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem}
  main{padding:2.25rem 1rem 3rem}
  .foot{grid-column:1;padding:1.5rem 1rem 2.5rem}
  body{font-size:1.0625rem}
}