:root{--paper:#fbf7f0;--ink:#2b2127;--soft:#75676e;--rule:#e7ddd0;--plum:#6b2d5c;--ochre:#b7822f;--card:#fffdf9}
@media (prefers-color-scheme:dark){:root{--paper:#1d171b;--ink:#efe6ea;--soft:#a998a1;--rule:#382d33;--plum:#d49ac4;--ochre:#d9a95a;--card:#251d22}}
*{box-sizing:border-box}
html{background:var(--paper)}
body{margin:0;color:var(--ink);font:17px/1.62 Charter,"Bitstream Charter","Sitka Text",Cambria,serif}
.page{max-width:48rem;margin:0 auto;padding:0 1.25rem}
.masthead{text-align:center;padding:2.4rem 0 1.2rem;border-bottom:1px double var(--rule)}
.masthead a.name{display:inline-block;color:var(--plum);text-decoration:none;font-variant:small-caps;
letter-spacing:.14em;font-size:1.55rem}
.masthead .since{display:block;color:var(--soft);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;margin-top:.2rem}
.menu{margin-top:1rem;font-size:.9rem}
.menu a{color:var(--ink);text-decoration:none;margin:0 .7rem;border-bottom:1px solid transparent}
.menu a:hover{border-bottom-color:var(--ochre)}
h1{font-weight:normal;font-size:1.9rem;line-height:1.25;margin:2.2rem 0 .8rem;text-align:center}
h2{font-weight:normal;font-style:italic;color:var(--plum);font-size:1.25rem;margin:2.4rem 0 .6rem}
p{margin:0 0 1rem}
.intro{text-align:center;color:var(--soft);max-width:36rem;margin:0 auto 1.6rem}
.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(13.5rem,1fr));gap:1rem;margin:1rem 0}
.tin{background:var(--card);border:1px solid var(--rule);border-top:4px solid var(--ochre);padding:1rem 1.1rem}
.tin h3{margin:0 0 .15rem;font-size:1.05rem}
.tin .origin{color:var(--soft);font-size:.82rem;font-style:italic}
.tin .notes{font-size:.92rem;margin:.6rem 0}
.tin .price{font-size:.85rem;color:var(--plum)}
ol.steps{padding-left:1.3rem}
ol.steps li{margin:.35rem 0}
.brew{width:100%;border-collapse:collapse;font-size:.92rem;margin:.6rem 0}
.brew td,.brew th{padding:.45rem .3rem;border-bottom:1px dotted var(--rule);text-align:left}
.brew th{font-weight:normal;color:var(--soft);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}
.aside{border-left:3px solid var(--ochre);padding:.2rem 0 .2rem 1rem;color:var(--soft);font-style:italic}
a{color:var(--plum)}
.colophon{margin-top:3.5rem;padding:1.6rem 0 3rem;border-top:1px double var(--rule);text-align:center;
color:var(--soft);font-size:.8rem;letter-spacing:.04em}