/* Calgary House Hacker */
:root{--black:#111312;--card:#1a1d1c;--mint:#5fd6a4;--mint-dk:#3fae82;--fg:#dcdfdd;--dim:#8d938f;--edge:#282c2a}
*{box-sizing:border-box}
body{margin:0;background:var(--black);color:var(--fg);font:400 17px/1.72 Jost,Futura,"Century Gothic",system-ui,sans-serif}
h1,h2,h3{font-family:Jost,Futura,system-ui,sans-serif;font-weight:600;color:#fff;line-height:1.22;letter-spacing:-.01em}
a{color:var(--mint)}
a:hover{color:#8ee9c1}
.col{width:100%;max-width:40rem;margin:0 auto;padding:0 1.15rem}
.head{padding:1.5rem 0;border-bottom:1px solid var(--edge)}
.head .col{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem}
.sig{font-size:1.15rem;font-weight:600;color:#fff;text-decoration:none;letter-spacing:.01em}
.sig b{color:var(--mint);font-weight:600}
.links{margin-left:auto;display:flex;gap:1rem;font-size:.9rem;font-weight:400}
.links a{color:var(--dim);text-decoration:none}
.links a:hover{color:var(--mint)}
.hello{padding:2.6rem 0 1.4rem}
.hello h1{font-size:1.95rem;margin:0 0 .8rem;font-weight:700}
.hello p{color:var(--dim);margin:0}
.stack{padding:.8rem 0 2.8rem}
.note{padding:1.3rem 0;border-bottom:1px solid var(--edge)}
.note h2{font-size:1.2rem;margin:.35rem 0 .45rem;font-weight:500}
.note h2 a{color:#fff;text-decoration:none}
.note h2 a:hover{color:var(--mint)}
.dateline{font-size:.78rem;color:var(--dim);letter-spacing:.06em;text-transform:uppercase;margin:0;font-weight:500}
.note p.snip{margin:0 0 .5rem;color:#b9beba;font-size:.96rem}
.open{font-size:.88rem;color:var(--mint-dk);text-decoration:none;font-weight:500}
.letter{padding:2.1rem 0 0}
.letter-top{padding-bottom:1.2rem;border-bottom:1px solid var(--edge)}
.chip{display:inline-block;font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--black);background:var(--mint);padding:.16rem .5rem;border-radius:99px}
.letter-top h1{font-size:1.95rem;margin:.65rem 0 .6rem;font-weight:700}
.from{font-size:.85rem;color:var(--dim);margin:0;letter-spacing:.04em}
.letter p{margin:0 0 1.15rem}
.letter h2{font-size:1.32rem;margin:2.1rem 0 .7rem;font-weight:600}
.letter h3{font-size:1.05rem;margin:1.5rem 0 .5rem;font-weight:600;color:#e6e9e7}
.letter ul,.letter ol{padding-left:1.2rem;margin:0 0 1.2rem}
.letter li{margin:.4rem 0}
.drop{margin-top:1.7rem}
.drop:first-letter{float:left;font-size:3.3rem;line-height:.86;font-weight:700;color:var(--mint);padding:.1rem .5rem .1rem 0}
.letter blockquote{margin:1.7rem 0;padding:1rem 1.15rem;border:1px dashed var(--mint-dk);border-radius:4px;background:var(--card);color:#cdd2cf}
.letter blockquote p{margin:0}
.letter-foot{margin-top:2.5rem;padding:1.2rem 0 2.6rem;border-top:1px solid var(--edge)}
.letter-foot p{font-size:.9rem;color:var(--dim);margin:0 0 .7rem}
.back-home{font-size:.88rem;color:var(--mint);text-decoration:none;font-weight:500}
.slab{padding:2.3rem 0 2.6rem}
.slab h1{font-size:1.85rem;margin:0 0 1rem;font-weight:700}
.slab h2{font-size:1.15rem;margin:1.8rem 0 .5rem}
.slab p{margin:0 0 1.1rem}
.foot{border-top:1px solid var(--edge);background:#0c0e0d}
.foot .col{padding:1.6rem 0 2.4rem;font-size:.86rem;color:var(--dim)}
.foot a{color:var(--dim)}
.related{margin:0 0 1.4rem}
.related h2{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mint);margin:0 0 .5rem;font-weight:600}
.related ul{list-style:none;margin:0;padding:0}
.related li{margin:.3rem 0;font-size:.95rem}
@media(min-width:40rem){body{font-size:18px}.hello h1{font-size:2.4rem}.letter-top h1{font-size:2.4rem}}