/* Site chrome: navigation and the non-deck pages. The deck's own look lives in deck.css. */

.nav{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
 padding:16px clamp(18px,5vw,54px);background:var(--cream);
 border-bottom:1px solid rgba(146,72,86,.18)}
.brand{display:inline-flex;align-items:center;gap:10px;
 font-family:Fraunces,Georgia,serif;font-weight:700;font-size:20px;color:var(--ink);
 text-decoration:none;letter-spacing:-.01em}
.brand .amp{color:var(--rose)}
.logomark{display:block;width:32px;height:32px;flex:0 0 auto}
@media (max-width:420px){.brand{font-size:17px}.logomark{width:26px;height:26px}}
.navlinks{display:flex;gap:6px;flex-wrap:wrap}
.navlinks a{font-size:14px;color:var(--body);text-decoration:none;padding:7px 14px;border-radius:999px;
 border:1px solid transparent;transition:background .15s,border-color .15s}
.navlinks a:hover{background:var(--sage-soft)}
.navlinks a.here{background:var(--sage);color:#fff}

/* Generic page shell for newsletter / watch / about */
.page{max-width:660px;margin:0 auto;padding:clamp(32px,7vw,72px) clamp(18px,5vw,24px) 90px}
.page h1{font-family:Fraunces,Georgia,serif;font-size:clamp(32px,6vw,46px);line-height:1.08;
 color:var(--ink);letter-spacing:-.02em;margin:0 0 18px}
.page h2{font-family:Fraunces,Georgia,serif;font-size:23px;color:var(--ink);margin:44px 0 12px}
.page p{font-size:17px;line-height:1.62;margin:0 0 18px;color:var(--body)}
.page .lede{font-size:19px;line-height:1.55}
.page ul{margin:0 0 18px;padding-left:20px;color:var(--body);font-size:17px;line-height:1.62}
.page li{margin-bottom:9px}
.page a{color:var(--sage);text-decoration:underline;text-underline-offset:3px}

.cta{display:inline-block;background:var(--sage);color:#fff;text-decoration:none;
 font-weight:700;font-size:16px;padding:14px 26px;border-radius:0 22px 22px 22px;margin:6px 10px 6px 0}
.cta:hover{background:#7C3B48}
.cta.alt{background:var(--rose)}
.cta.alt:hover{background:#946135}

.postlist{list-style:none;padding:0;margin:0}
.postlist li{padding:18px 0;border-bottom:1px solid rgba(146,72,86,.16)}
.postlist a{font-family:Fraunces,Georgia,serif;font-size:19px;color:var(--ink);
 text-decoration:none;display:block;margin-bottom:5px}
.postlist a:hover{color:var(--sage)}
.postlist span{font-size:15px;color:var(--body)}

.sitefoot{border-top:1px solid rgba(146,72,86,.18);padding:34px clamp(18px,5vw,54px);
 font-size:14px;color:var(--body);text-align:center;background:var(--cream)}
.sitefoot a{color:var(--sage)}

/* Section jump bar: get to any of the six decks without scrolling past a hundred cards. */
.secbar{position:sticky;top:0;z-index:30;display:flex;gap:6px;align-items:center;
 overflow-x:auto;scrollbar-width:none;background:rgba(251,250,249,.96);
 backdrop-filter:blur(8px);padding:9px clamp(14px,5vw,54px);
 border-bottom:1px solid rgba(146,72,86,.18)}
.secbar::-webkit-scrollbar{display:none}
.secbar button{flex:0 0 auto;font:inherit;font-size:13.5px;color:var(--body);cursor:pointer;
 padding:7px 14px;border-radius:999px;border:1px solid rgba(146,72,86,.3);
 white-space:nowrap;transition:background .15s,color .15s}
.secbar button:hover{background:var(--sage-soft)}
.secbar button.on{background:var(--sage);color:#fff;border-color:var(--sage)}
.shelf-h{scroll-margin-top:64px}