/* Shared styles for /blog and every post under /blog/.
   Extracted when the post count passed one — duplicating this per file was
   adding ~130 lines of boilerplate each time. A linked stylesheet is not a
   build step; crawlers handle it fine. The nav and footer MARKUP is still
   duplicated per file, because static HTML has no include mechanism and
   doing it in JS would hide it from crawlers. */

:root{
  --bg:#fafaf9; --card:#ffffff; --soft:#f5f5f4;
  --ink:#1c1917; --text:#292524; --muted:#57534e; --faint:#78716c;
  --amber:#b45309; --amber-strong:#78350f; --amber-text:#92400e; --amber-soft:#fef6e7;
  --border:#e7e5e4; --border-soft:#f5f5f4; --halo:#e7ce92;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:'Inter',sans-serif;font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
.serif{font-family:'Fraunces',serif}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px}
a{color:var(--amber-text)}

/* nav */
.nav-outer{position:fixed;top:0;left:0;right:0;z-index:50;padding:18px 0;transition:padding .45s}
.nav-outer.scrolled{padding:10px 0}
.pill{max-width:1180px;margin:0 auto;background:rgba(255,255,255,.86);backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:999px;padding:10px 16px 10px 20px;display:flex;align-items:center;justify-content:space-between;gap:24px;box-shadow:0 2px 20px rgba(28,25,23,.05)}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand img{height:46px;width:auto;display:block;flex:none;transition:height .45s}
.nav-outer.scrolled .brand img{height:40px}
.b-text{display:flex;flex-direction:column;gap:3px;justify-content:center}
.brand .b-name{font-family:'Fraunces',serif;font-weight:400;font-size:20px;color:var(--ink);line-height:1}
.brand .b-eyebrow{font-family:'Inter',sans-serif;font-weight:400;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);line-height:1}
.nav-links{display:flex;gap:30px;align-items:center}
.nav-links a{white-space:nowrap;color:var(--muted);text-decoration:none;font-size:14.5px;font-weight:500;transition:color .25s}
.nav-links a:hover{color:var(--ink)}

/* --- Mobile nav ----------------------------------------------------------
   Below the breakpoint the links used to be display:none with NOTHING to
   replace them, so on a phone the header carried no navigation at all (only
   the CTA survived, and on most pages not even that). They now collapse into
   a hamburger. The pill anchors the dropdown, hence position:relative.
   Literal colors, not var(), because these rules ship into four stylesheets
   that do not all define the same custom properties. */
.pill{position:relative}

/* The nav row is centred in a pill whose height comes from the BRAND LOGO,
   so the row sits well above the pill edge. Stretching it (items stay centred
   via align-items) makes 100% on the dropdown mean the pill, which is what the
   menu needs to clear. */
.nav-links{align-self:stretch}
/* --- Products dropdown ----------------------------------------------------
   Click, not hover: hover menus are unusable on a touch screen and skippable by
   keyboard, and this menu is the only route to three of the four products. */
.nav-dd{position:relative;display:flex;align-items:center;align-self:stretch}
.nav-dd__btn{display:inline-flex;align-items:center;gap:5px;background:none;border:0;padding:0;margin:0;font:inherit;font-size:14.5px;font-weight:500;color:var(--muted);cursor:pointer;white-space:nowrap;transition:color .25s}
.nav-dd__btn:hover,.nav-dd.is-open .nav-dd__btn{color:var(--ink)}
.nav-dd__btn svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .22s}
.nav-dd.is-open .nav-dd__btn svg{transform:rotate(180deg)}
.nav-dd__menu{position:absolute;top:calc(100% + 20px);left:50%;transform:translateX(-50%);width:360px;background:#fff;border:1px solid var(--border);border-radius:16px;padding:7px;box-shadow:0 22px 48px -22px rgba(28,25,23,.34);display:none;z-index:100;max-height:calc(100vh - 130px);overflow-y:auto}
.nav-dd.is-open .nav-dd__menu{display:block}
.nav-dd__item{display:block;padding:11px 13px;border-radius:11px;text-decoration:none}
a.nav-dd__item:hover{background:#faf9f8}
.nav-dd__name{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.3}
.nav-dd__desc{display:block;margin-top:3px;font-size:12.5px;line-height:1.5;color:var(--muted);white-space:normal}
/* Not yet buildable, and it says so rather than looking clickable. */
.nav-dd__item--soon{cursor:default}
.nav-dd__item--soon .nav-dd__name{color:var(--muted)}
.nav-dd__soon{font-size:10px;letter-spacing:.07em;text-transform:uppercase;font-weight:600;color:var(--muted);border:1px solid var(--border);border-radius:999px;padding:2px 7px;white-space:nowrap}
@media(max-width:880px){
  /* Inside the burger menu the dropdown is just a nested list — an absolutely
     positioned panel inside an already-absolute menu would sit off-screen. */
  .nav-dd{display:block}
  .nav-dd__btn{width:100%;justify-content:space-between;padding:12px 14px;font-size:15px}
  .nav-dd__menu{position:static;transform:none;width:auto;border:0;box-shadow:none;padding:0 0 6px;background:transparent;max-height:none;overflow:visible}
  .nav-dd__item{padding:9px 14px 9px 24px}
  .nav-dd__desc{display:none}
}
.nav-burger{display:none;align-items:center;justify-content:center;width:38px;height:38px;flex:0 0 auto;border:1px solid #e7e5e4;border-radius:999px;background:#fff;color:#1c1917;cursor:pointer;padding:0}
.nav-burger svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round}
@media(max-width:880px){
  .nav-burger{display:inline-flex}
  .nav-links{position:absolute;top:calc(100% + 10px);left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;background:#fff;border:1px solid #e7e5e4;border-radius:18px;padding:8px;box-shadow:0 18px 40px -18px rgba(28,25,23,.3);display:none}
  .nav-links.is-open{display:flex}
  .nav-links a{display:block;padding:12px 14px;border-radius:12px;font-size:15px}
  .nav-links a:hover{background:#faf9f8}
  .nav-links a.cta{margin-top:4px;text-align:center}
}


/* blog index */
.blog-head{padding:150px 0 10px;text-align:center}
.blog-head .eyebrow{display:inline-block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--amber-text);margin-bottom:18px}
.blog-head h1{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(36px,5.5vw,58px);color:var(--ink);line-height:1.05;margin:0 auto 18px;max-width:16ch}
.blog-head p{max-width:60ch;margin:0 auto;color:var(--muted);font-size:17.5px}
.posts{padding:56px 0 40px;display:grid;gap:22px;max-width:820px;margin:0 auto;padding-left:32px;padding-right:32px}
.post-card{display:block;text-decoration:none;background:var(--card);border:1px solid var(--border);border-radius:18px;padding:30px 34px;transition:border-color .25s,box-shadow .25s,transform .25s}
.post-card:hover{border-color:var(--halo);box-shadow:0 14px 40px -22px rgba(28,25,23,.35);transform:translateY(-2px)}
.post-card .meta{display:flex;gap:12px;align-items:center;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:12px;flex-wrap:wrap}
.post-card .tag{color:var(--amber-text)}
.post-card h2{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(21px,2.4vw,27px);color:var(--ink);line-height:1.25;margin:0 0 10px}
.post-card p{margin:0;color:var(--muted);font-size:15.5px}

/* article */
.article{padding:140px 0 20px}
.article-body{max-width:720px;margin:0 auto}
.crumb{font-size:13px;color:var(--faint);margin-bottom:20px}
.crumb a{color:var(--faint);text-decoration:none}
.crumb a:hover{color:var(--ink)}
.article h1{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(32px,4.6vw,50px);color:var(--ink);line-height:1.08;margin:0 0 18px}
.byline{display:flex;gap:10px;flex-wrap:wrap;align-items:center;color:var(--faint);font-size:13.5px;margin-bottom:38px;padding-bottom:26px;border-bottom:1px solid var(--border)}
.byline .tag{color:var(--amber-text);text-transform:uppercase;letter-spacing:.12em;font-size:11.5px}
.article h2{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(23px,2.8vw,30px);color:var(--ink);margin:46px 0 14px;line-height:1.25}
.article h3{font-size:17px;font-weight:600;color:var(--ink);margin:30px 0 8px}
.article p{margin:0 0 18px}
.article ul,.article ol{padding-left:22px;margin:0 0 18px}
.article li{margin-bottom:9px}
.lead{font-size:19px;color:var(--muted);line-height:1.65}
.say{background:var(--card);border:1px solid var(--border);border-left:3px solid var(--amber);border-radius:0 12px 12px 0;padding:18px 24px;margin:18px 0 22px}
.say p{margin:0;font-family:'Fraunces',serif;font-size:17.5px;color:var(--ink);line-height:1.5}
.say p+p{margin-top:12px}
.note{background:var(--amber-soft);border:1px solid var(--halo);border-radius:14px;padding:20px 24px;margin:26px 0}
.note p{margin:0;color:var(--amber-strong);font-size:15.5px}

/* shared tail */
.empty{max-width:820px;margin:0 auto;padding:10px 32px 30px;color:var(--faint);font-size:15px;text-align:center}
.cta-band{background:var(--amber-soft);border-top:1px solid var(--halo);border-bottom:1px solid var(--halo);padding:56px 0;text-align:center;margin-top:60px}
.cta-band h3{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(22px,3vw,30px);color:var(--ink);margin:0 0 10px}
.cta-band p{color:var(--amber-strong);margin:0 0 22px;font-size:16px}
.cta-band a{display:inline-block;background:var(--ink);color:#fff;text-decoration:none;padding:14px 28px;border-radius:999px;font-weight:600;font-size:15px}
footer{border-top:1px solid var(--border);padding:44px 0 40px;background:var(--card)}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--faint);font-size:13.5px}
.foot-bottom a{color:var(--faint);text-decoration:none}
.foot-bottom a:hover{color:var(--ink)}