/* Inter, self-hosted (no third-party requests). Only used where SF Pro isn't available. */
@font-face{font-family:"Inter";src:url("inter.woff2") format("woff2");font-weight:100 900;font-display:swap}
/* 37signals pattern: one numbered list, one text size, fixed top + bottom bars, edges fade.
   SF Pro via the system stack (Inter fallback). One size for content, one for the bars. Two weights. */
:root{--ink:#1d1d1f;--mute:#a1a1a6;--bg:#fff;--chip:#ececee;--knob:#fff;--pad:clamp(16px,2vw,24px);
  --size:calc(1.1rem + 1vw);color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--ink:#f5f5f7;--mute:#5e5e63;--bg:#000;--chip:#1c1c1e;--knob:#3a3a3c;color-scheme:dark}}
:root[data-theme=dark]{--ink:#f5f5f7;--mute:#5e5e63;--bg:#000;--chip:#1c1c1e;--knob:#3a3a3c;color-scheme:dark}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-padding-top:30vh}
body{background:var(--bg);color:var(--ink);transition:background-color .3s,color .3s;
  font:400 var(--size)/1.3 -apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  letter-spacing:-.015em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit;text-decoration:none}
b,h1,h2{font-weight:700;font-size:inherit}
.mute{color:var(--mute)}

/* fixed bars, small type, with a fade so the list slides under them */
.bar{position:fixed;left:0;right:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:var(--pad);font-size:calc(var(--size) * .65);line-height:1.3;letter-spacing:-.01em;font-weight:700}
.bar.top{top:0;background:linear-gradient(var(--bg) 55%,transparent)}
.bar.bottom{bottom:0;background:linear-gradient(transparent,var(--bg) 45%)}
.bar .role{font-weight:400;color:var(--mute)}
.bar .role a{color:var(--ink)}
.bar nav{display:flex;gap:1rem;flex-wrap:wrap}
.bar a:hover,.bar a:focus-visible{text-decoration:underline;text-decoration-thickness:.08em;text-underline-offset:.15em}

/* the list: every page lives here; one expands in place */
main{padding:clamp(7rem,22vh,12rem) var(--pad) clamp(8rem,30vh,14rem)}
.list{list-style:none}
.item{font-weight:700}
.num{display:inline-block;min-width:1.75em;font-variant-numeric:tabular-nums}
.list a{transition:color .2s}
.body{display:none;padding-left:1.75em;max-width:calc(39ch + 1.75em);font-weight:400}
.open .body{display:block;animation:open .35s ease both}
@keyframes open{from{opacity:0;transform:translateY(-.3em)}to{opacity:1;transform:none}}
.open{margin:.1em 0 .7em}
/* something open: the others collapse to dim numbers */
.has-open > li:not(.open) .t{display:none}
.has-open > li:not(.open) .item a{color:var(--mute)}
.has-open > li:not(.open) .item a:hover{color:var(--ink)}
/* nothing open: hovering one title dims the rest */
@media (hover:hover){.list:not(.has-open):hover .item a:not(:hover){color:var(--mute)}}
.body p{margin-top:.6em}
.body p:first-child{margin-top:.15em}
.body h2{margin-top:1.2em}
.body h2 .mute{font-weight:400}
.body a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}

/* theme switch: compact segmented pill in the bottom bar */
.theme{position:relative;display:inline-flex;padding:3px;border-radius:999px;background:var(--chip);font-size:13px;letter-spacing:0}
.theme::before{content:"";position:absolute;top:3px;bottom:3px;left:3px;width:calc((100% - 6px)/3);border-radius:999px;background:var(--knob);
  box-shadow:0 1px 3px rgba(0,0,0,.15);transition:transform .25s cubic-bezier(.3,.7,.4,1)}
.theme[data-mode=light]::before{transform:translateX(100%)}
.theme[data-mode=dark]::before{transform:translateX(200%)}
.theme button{position:relative;flex:1;min-width:3.4rem;padding:.3rem .6rem;border:0;background:none;color:var(--mute);font:inherit;font-weight:700;cursor:pointer;border-radius:999px}
.theme button[aria-pressed=true]{color:var(--ink)}
.theme button:focus-visible{outline:2px solid var(--ink);outline-offset:1px}

@media (max-width:600px){.bar .role{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* hanging indent: wrapped titles line up after the number */
.item a{display:inline-flex}
.num{flex:none}
@media (max-width:600px){
  .bar.bottom nav{flex-wrap:nowrap;gap:.75rem}
  .theme button{min-width:2.9rem;padding:.3rem .45rem}
}

/* footer sections + posts: same one-size type, no list chrome */
.page{max-width:39ch}
.page h1{margin-bottom:.15em}
.page .body{display:block;padding-left:0;max-width:none}
.crumb{margin-bottom:.4em}
.crumb a{text-decoration:none}
.posts{list-style:none;margin-top:1em}
.posts li+li{margin-top:.2em}
.posts a{font-weight:700;text-decoration:none}
.posts .date{display:block;font-weight:400}
.posts a:hover{color:var(--mute)}

/* footer nav: many links, keep the bar one line and let it scroll on small screens */
.bar.bottom nav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;min-width:0}
.bar.bottom nav::-webkit-scrollbar{display:none}
.bar.bottom nav a{white-space:nowrap}

/* no orphans: browsers that support it rebalance lines; build also glues the last two words */
p,li{text-wrap:pretty}
h1,h2,.item,.t{text-wrap:balance}
@media (min-width:64em){:root{--size:calc(1.25rem + 1vw)}}

/* top bar: name left, theme switch right */
.bar.top .theme{margin-left:auto}

/* inner pages, 37signals pattern: big title, intro at body size, the rest small */
.page{max-width:none;padding-left:1.75em}
.page h1{font-size:150%;line-height:1.2;max-width:22ch;margin-bottom:.35em}
.page .lede{max-width:39ch}
.page .small{font-size:65%;line-height:1.35;max-width:39rem;margin-top:2.2rem}
.page .small h2{font-size:inherit;margin-top:2.4em;margin-bottom:.4em}
.page .small h2:first-child{margin-top:0}
.page .small p+p{margin-top:.8em}
.page .small ul{list-style:none;margin-top:.6em}
.page .small ul li{padding-left:0}
.page .small li+li{margin-top:.35em}
/* no bullet dots: lists read as plain stacked lines */
.page .small a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}
.page .crumb{font-size:65%}
.posts .date{font-size:65%}
@media (max-width:600px){.page{padding-left:0}}

/* contact links sit apart from the page links: same palette, the grey */
.bar .ext{display:flex;gap:1rem;color:var(--mute)}
.bar .ext a:hover{color:var(--ink)}

/* resume: company at body size, grey role line, bold lead-ins carry the scan */
.small .job{margin-top:3.4em}
.small .job:first-child{margin-top:0}
.small .job h2{font-size:calc(100% / .65);line-height:1.15;margin:0}
.small .job .role{margin-top:.2em;color:var(--mute)}
.small .job .role span::before{content:"\00b7";margin:0 .45em}
.small .job .sum{margin-top:.9em}
.small .job ul{margin-top:.9em}
.small .job li{padding-left:0}
.small .job li::before{content:none}
.small .job li+li{margin-top:.55em}
.small .job li b{font-weight:700}

/* footer: page links left, contact links right */
.bar.bottom nav{flex:1}
.bar .ext{margin-left:auto}
.page .small ol{padding-left:1.3em;margin-top:.6em}
.page .small ol li+li{margin-top:.35em}
/* lists inside an open principle (e.g. Start here) */
.open .body ul{list-style:none;margin-top:.6em}
.open .body li+li{margin-top:.1em}

/* focus: no browser box; keyboard (Tab) users get an underline in the site's own colours */
a:focus{outline:none}
a:focus-visible{text-decoration:underline;text-decoration-thickness:.08em;text-underline-offset:.15em}

/* bold lead on its own line, detail underneath (lists + lead-in paragraphs on inner pages) */
.page .small .lead .lbl{display:block}
.page .small .lead .txt{display:block}
.page .small ul li+li,.page .small ol li+li{margin-top:.9em}
.page .small p.lead+p.lead{margin-top:1.1em}
.page .small ul+p,.page .small ol+p,.page .small p+ul,.page .small p+ol{margin-top:1.2em}
.small .job li+li{margin-top:.9em}