@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=DM+Serif+Display:ital@0;1&display=swap";
:root{--ink:#24332d;--cream:#f7f3eb;--paper:#fffdf8;--sage:#667b67;--line:#ded8ca;--rust:#b9583d}*{box-sizing:border-box}body{color:var(--ink);background:var(--paper);margin:0;font-family:DM Sans,sans-serif}button,input{font:inherit}button{color:inherit}.topbar{border-bottom:1px solid var(--line);z-index:10;background:#fffdf8f0;align-items:center;height:76px;padding:0 5vw;display:flex;position:sticky;top:0}.brand{color:var(--ink);align-items:center;gap:11px;margin-right:6vw;font-family:DM Serif Display;font-size:25px;text-decoration:none;display:flex}.brand span{background:var(--ink);color:#fff;border-radius:50% 50% 44% 56%;place-items:center;width:38px;height:38px;font-style:italic;display:grid}nav{align-self:stretch;gap:25px;display:flex}nav button{color:#7b817d;cursor:pointer;background:0 0;border:0;padding:0 3px}nav .navActive{color:var(--ink);border-bottom:2px solid var(--rust)}.actions{align-items:center;gap:12px;margin-left:auto;display:flex}.search{border:1px solid var(--line);border-radius:20px;gap:7px;padding:9px 12px;display:flex}.search input{background:0 0;border:0;outline:0;width:130px}.unitToggle,.avatar{border:1px solid var(--line);cursor:pointer;background:#fff;border-radius:18px;padding:8px 13px}.avatar{color:#fff;background:var(--rust);border:0;border-radius:50%;width:38px;height:38px;padding:0;font-size:12px}.hero{background:var(--cream);border-bottom:1px solid var(--line);justify-content:space-between;align-items:end;padding:64px max(5vw,40px);display:flex}.hero>div{max-width:710px}.eyebrow,.category,.asideTitle{text-transform:uppercase;letter-spacing:.16em;color:var(--rust);font-size:11px;font-weight:600}h1,h2,h3{margin:0;font-family:DM Serif Display,serif;font-weight:400}h1{letter-spacing:-.035em;font-size:clamp(48px,6vw,78px);line-height:.98}h1 em{color:var(--rust)}.hero p:not(.eyebrow){color:#67716c;max-width:620px;margin:22px 0 0;line-height:1.7}.primary{background:var(--ink);color:#fff;cursor:pointer;border:0;border-radius:5px;padding:15px 22px;box-shadow:0 7px 20px #24332d26}.content{grid-template-columns:220px 1fr;max-width:1440px;min-height:600px;margin:auto;display:grid}aside{border-right:1px solid var(--line);padding:39px 27px}aside button{color:#66706b;cursor:pointer;text-align:left;background:0 0;border:0;border-radius:5px;gap:11px;width:100%;margin:2px 0;padding:11px 12px;display:flex}aside button.selected{color:var(--ink);background:#edf0e8;font-weight:600}aside hr{border:0;border-top:1px solid var(--line);margin:24px 0}aside .newBook{color:var(--rust);margin-top:15px}.library{padding:40px 4vw 70px}.libraryHead{justify-content:space-between;align-items:center;margin-bottom:26px;display:flex}.libraryHead h2,.modal h2{font-size:35px}.libraryHead p{color:#858a87;font-size:13px}.share{border:1px solid var(--line);cursor:pointer;background:#fff;border-radius:5px;padding:10px 14px}.grid{grid-template-columns:repeat(4,minmax(190px,1fr));gap:24px;display:grid}.card{border:1px solid var(--line);background:#fff;border-radius:8px;transition:all .2s;overflow:hidden}.card:hover{transform:translateY(-4px);box-shadow:0 14px 35px #23332c17}.cardImage{place-items:center;height:190px;display:grid;position:relative;overflow:hidden}.cardImage:after{content:"";border:1px solid #ffffff45;border-radius:50%;position:absolute;inset:15%}.cardImage span{filter:drop-shadow(0 13px 12px #0004);z-index:1;font-size:72px}.cardImage button{z-index:2;cursor:pointer;background:#ffffffe8;border:0;border-radius:50%;width:34px;height:34px;position:absolute;top:12px;right:12px}.tomato{background:linear-gradient(135deg,#d1a077,#7a8a5d)}.apple{background:linear-gradient(135deg,#b9a271,#8b4c35)}.herb{background:linear-gradient(135deg,#8ca878,#315947)}.roast{background:linear-gradient(135deg,#c39467,#663f2e)}.cardBody{padding:18px}.cardBody h3{min-height:48px;font-size:21px;line-height:1.15}.category{color:var(--rust);margin:0 0 8px}.meta{color:#8a8f8c;margin:14px 0 0;font-size:12px}.meta span{margin:0 4px}.overlay{z-index:30;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#1e2924aa;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.modal{background:var(--paper);border-radius:10px;width:min(700px,100%);padding:46px;position:relative;box-shadow:0 30px 90px #0005}.close{cursor:pointer;background:0 0;border:0;font-size:28px;position:absolute;top:14px;right:18px}.captureChoices{grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px;display:grid}.captureChoices button{border:1px solid var(--line);text-align:left;cursor:pointer;background:#fff;border-radius:7px;padding:22px}.captureChoices button:hover{border-color:var(--rust)}.captureChoices strong,.captureChoices span{display:block}.captureChoices span{color:#78807c;margin-top:9px;font-size:13px;line-height:1.5}.modalNote{color:#818682;margin-top:22px;font-size:12px}@media (max-width:1000px){.grid{grid-template-columns:repeat(2,1fr)}nav{display:none}.hero{align-items:start;gap:30px}.content{grid-template-columns:1fr}aside{display:none}}@media (max-width:640px){.search{display:none}.topbar{padding:0 18px}.hero{padding:44px 22px;display:block}.primary{margin-top:26px}.library{padding:30px 20px}.grid,.captureChoices{grid-template-columns:1fr}.unitToggle{font-size:12px}}