html{scroll-behavior:smooth;background:#F6F4EF;overflow-x:hidden}
body{margin:0;background:#F6F4EF;color:#171C1A;font-family:"Instrument Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-wrap:pretty}
*{box-sizing:border-box}
a{color:inherit;text-decoration:none}
a:hover{color:inherit}
::selection{background:#5B7F8A;color:#fff}

@keyframes nl-emerge{0%{opacity:0;filter:blur(12px);transform:translateY(14px)}100%{opacity:1;filter:blur(0);transform:none}}
@keyframes nl-cue{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(7px);opacity:.85}}
@keyframes nl-ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* Hover states — the design canvas used a `style-hover` attribute (editor-only),
   ported here as real classes since inline styles can't express :hover. */
.nl-link-fade{transition:opacity .3s}
.nl-link-fade:hover{opacity:.6}

.nl-lift:hover{transform:translateY(-2px)}

.nl-lift-deep:hover{transform:translateY(-2px);background:#0F221D}

.nl-lift-nav:hover{transform:translateY(-1px)}

/* Featured-work thumbnail frame. The hatch-pattern background shows briefly
   while each photo loads (or if an image ever fails to load). */
.nl-work-frame{
  overflow:hidden;
  background:#E7E1D6;
  background-image:repeating-linear-gradient(135deg,rgba(23,51,43,.05) 0 1px,rgba(23,51,43,0) 1px 11px);
  box-shadow:0 24px 60px -34px rgba(20,33,29,.55),inset 0 0 0 1px rgba(23,51,43,.1);
}

/* Featured-work hover (brighten on mouseenter — driven by main.js) uses a plain
   transition here so the JS-set filter animates smoothly. */
[data-pimg]{transition:filter .8s cubic-bezier(.22,.61,.36,1)}