@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:200 800;font-display:swap;src:url('/fonts/bricolage-grotesque-latin-wght-normal.woff2') format('woff2-variations');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');}
/* Frempong Labs / Jason Frempong — base + interaction states. */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#f7f2e9;color:#161311;font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0}
p{margin:0}
a{color:#AC522D;text-decoration:none}
a:hover{color:#87401F}
::selection{background:#e9dfc9}

a:focus-visible,button:focus-visible{outline:2px solid #AC522D;outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:0;background:#161311;color:#f7f2e9;padding:12px 18px;z-index:100;border-radius:0 0 10px 0}
.skip:focus{left:0}

/* pills (was style-hover) */
.pill-outline{font-family:'JetBrains Mono',monospace;font-size:13px;color:#161311;border:1px solid #161311;padding:9px 16px;border-radius:999px;transition:background .15s ease,color .15s ease;display:inline-block}
.pill-outline:hover{background:#161311;color:#f7f2e9}
.pill-clay{display:inline-block;background:#AC522D;color:#f7f2e9;font-weight:600;font-size:16px;padding:15px 30px;border-radius:999px;transition:background .15s ease}
.pill-clay:hover{background:#161311;color:#f7f2e9}
.pill-ghost{display:inline-block;border:1px solid #161311;color:#161311;font-weight:600;font-size:16px;padding:14px 26px;border-radius:999px;transition:background .15s ease,color .15s ease}
.pill-ghost:hover{background:#161311;color:#f7f2e9}

/* cards / rows */
.card-hover{transition:background .15s ease}
.card-hover:hover{background:#fbf6ec}
.row-link{display:block;text-decoration:none;color:inherit;transition:background .15s ease}
.row-link:hover{color:inherit;background:#fbf6ec}
.row-link:hover h3{color:#AC522D}
.link-dark{color:#161311}
.link-dark:hover{color:#AC522D}

/* form (contact) */
.field{background:#fffdf8;border:1px solid #e3d9c4;border-radius:10px;padding:13px 14px;font-size:16px;color:#161311;width:100%;font-family:inherit}
.field:focus{border-color:#AC522D;outline:none;box-shadow:0 0 0 3px rgba(172,82,45,.18)}
.btn-clay{background:#AC522D;border:none;color:#f7f2e9;border-radius:12px;font-weight:600;font-size:16px;transition:background .15s ease;text-decoration:none;display:inline-block;cursor:pointer;font-family:inherit}
.btn-clay:hover{background:#87401F;color:#f7f2e9}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

/* header — wraps gracefully on narrow screens / large system font sizes (2026-07-26) */
.lb-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;padding:22px 0;border-bottom:1px solid #e3d9c4}
.lb-brand{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:19px;letter-spacing:-.02em;color:#161311;text-decoration:none;white-space:nowrap}
.lb-brand:hover{color:#161311}
.lb-nav{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px}
.lb-nav a{white-space:nowrap}
.pill-outline{white-space:nowrap}

/* project cards / work pages (2026-07-26) */
.proj-card{display:block;background:#fffdf8;padding:30px;text-decoration:none;color:inherit;transition:background .15s ease}
.proj-card:hover{background:#fbf6ec;color:inherit}
.proj-card:hover .proj-name{color:#AC522D}
.pill-meta{font-family:'JetBrains Mono',monospace;font-size:12px;color:#746C5E;background:#fbf6ec;border:1px solid #e3d9c4;padding:5px 10px;border-radius:999px;display:inline-block;white-space:nowrap}
.proj-card .pill-meta{background:#f7f2e9}

@media print{
  *{background:#FFF !important;color:#000 !important}
  a{color:#000 !important;text-decoration:underline}
}