/* Typography shared with the portfolio; Daal Scene keeps its own fonts. */
@font-face { font-family: "Clash Display"; src: url("../assets/clash-display-500.woff2") format("woff2"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: "Clash Display"; src: url("../assets/clash-display-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Clash Display"; src: url("../assets/clash-display-700.woff2") format("woff2"); font-weight: 700 900; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../assets/inter-variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root { --sans: "Inter", Arial, sans-serif; --wide: "Clash Display", Arial, sans-serif; --mono: "Inter", Arial, sans-serif; }
body, button, input, textarea, select { font-family: "Inter", Arial, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-family: "Clash Display", Arial, sans-serif !important; }
.portfolio-back { position: absolute; top: 20px; left: var(--gutter, 24px); z-index: 150; padding: 11px 16px; border-radius: 99px; background: #fafafa; color: #1f2022; font: 500 12px/1.3 "Inter", sans-serif; text-decoration: none; box-shadow: 0 1px 8px #0002; }
.portfolio-back:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
body:has(.portfolio-back) .hero-kick { margin-top: 54px; }
/* Match the portfolio's subtle, non-interactive grain. */
body::after { content: ""; position: fixed; inset: 0; z-index: 999; pointer-events: none; background: url("../assets/noise.svg") repeat; background-size: 180px 180px; opacity: .25; }