/* Wit & Folly Media — SHARED SITE CHROME
   Tokens, resets, header, footer. Loaded by every template.
   Homepage-only layout/motion lives in styles.css + main.js and is NOT required by articles. */
:root{
  --bone:#f4f1ea; --ink:#1b1a16; --butter:#f5d78e; --pine:#12241f;
  --paper:#fbf9f2; --hair:#e4ddcb; --hand:#8a5a12;
  --muted:#6b6557; --muted-2:#57534a; --label:#a39b86;
  --on-dark:#f2f0e8; --on-pine:#eef0ea; --pine-accent:#8fb3a5; --dark-muted:#c3cec6; --dark-muted-2:#d8d5c6;
  --link-hover:#2e5f52;
  --sans:'Hanken Grotesk',system-ui,sans-serif; --serif:'Source Serif 4',Georgia,serif; --hand-font:'Caveat',cursive;
  --spring:cubic-bezier(.34,1.56,.64,1);
  --gutter:48px;
}
*{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;background:var(--bone);color:var(--ink);font-family:var(--sans);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
a:hover{color:var(--link-hover)}
img,video{display:block;max-width:100%}
.wrap{max-width:1600px;margin:0 auto}
.inner{max-width:1240px;margin:0 auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* header */
.site-header{display:flex;justify-content:space-between;align-items:center;padding:26px var(--gutter);position:relative;z-index:20}
.wordmark{font-weight:750;font-size:19px;letter-spacing:-.01em}
.nav{display:flex;gap:30px;font-size:15px;font-weight:500}
.nav a{display:inline-block;padding:8px 0;transition:transform .25s var(--spring),color .2s}
.nav a[aria-current="page"]{border-bottom:1px solid var(--ink);padding-bottom:2px}
.nav a.nav-boba:hover{transform:translateY(-7px) rotate(-8deg);color:var(--hand)}
.menu-btn{display:none;background:none;border:0;font:inherit;font-size:22px;padding:8px;cursor:pointer;min-width:44px;min-height:44px;color:var(--ink)}

/* footer */
.site-footer{background:var(--ink);color:var(--bone);padding:44px var(--gutter);display:flex;justify-content:space-between;align-items:flex-start;gap:32px;position:relative}
.site-footer a:hover{color:var(--butter)}
.site-footer .wordmark{display:block}
.site-footer small{display:block;font-size:12px;color:#9a948a;margin-top:6px}
.footer__links{display:flex;gap:36px;font-size:14px;flex-wrap:wrap}
.site-footer .tag{font:italic 16px var(--serif);color:#9a948a}

@media (max-width:1180px){:root{--gutter:32px}}
@media (max-width:767px){
  :root{--gutter:20px}
  .site-header{padding:14px var(--gutter)}
  .menu-btn{display:block}
  .nav{display:none}
  .nav.is-open{display:flex;flex-direction:column;gap:0;position:absolute;left:0;right:0;top:100%;background:var(--bone);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:8px var(--gutter) 12px}
  .nav.is-open a{padding:12px 0;min-height:44px;font-size:17px;border-bottom:1px solid var(--hair)}
  .nav.is-open a:last-child{border-bottom:0}
  .nav.is-open a[aria-current="page"]{border-bottom:1px solid var(--hair);padding-bottom:12px;font-weight:700}
  .site-footer{padding:16px var(--gutter);flex-direction:column;gap:12px}
  .footer__links{gap:16px;font-size:12px}
}
@media (prefers-reduced-motion:reduce){.nav a{transition:none}}