/* Felix Heil · base + ruler nav (shared by all pages) */
@font-face{font-family:Inter;src:url(/assets/artist/fonts/Inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(/assets/artist/fonts/IBMPlexSans.woff2) format("woff2");font-weight:100 700;font-display:swap}
@font-face{font-family:"Manufacturing Consent";src:url(/assets/artist/fonts/ManufacturingConsent.woff2) format("woff2");font-weight:400;font-display:block}

:root{
  --ink:#000;
  --ink-2:#0e0f0c;
  --muted:#767676;
  --muted-2:#6c6a6a;
  --chip:#a5a5a533;
  --pill:#e8e8e8;
  --card:#f0f0f0;
  --tick:#9a9a9a;
  --bg:#fff;
  --sans:Inter,system-ui,sans-serif;
  --plex:"IBM Plex Sans",system-ui,sans-serif;
  --black:"Manufacturing Consent",serif;
  --spring:linear(0,.008 1%,.032 2%,.13 4.4%,.26 6.6%,.681 13%,.891 17.1%,.968 19.125%,1.028 21.15%,1.073 23.175%,1.103 25.2%,1.114 26.75%,1.12 29.85%,1.115 31.4%,1.088 35.5%,1.035 41.5%,1.003 47.6%,.991 54%,.995 66%,1);
}
*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scrollbar-gutter:stable}
body{min-height:100svh;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);font-family:var(--sans);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:clip}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
img,video{display:block;max-width:100%}
ul,ol{list-style:none}
:focus-visible{outline:2px solid #000;outline-offset:4px}

.page{flex:1 0 auto;min-width:0;padding:48px 32px 16px}
@media (max-width:480px){.page{padding-left:16px;padding-right:16px}}

/* ---------- Ruler nav ---------- */
.nav{display:flex;flex-direction:column;align-items:center;align-self:stretch;gap:10px;padding:16px 0 8px;position:relative;z-index:20;background:var(--bg)}
.nav--sticky{position:sticky;top:0}
.nav-ruler{position:relative;width:100%;height:24px;overflow:hidden}
.nav-ruler:before{content:"";position:absolute;top:0;left:0;right:0;height:8px;
  background-image:linear-gradient(90deg,#0000 0 6px,var(--tick) 6px 7px,#0000 7px 13px);
  background-size:13px 8px;background-repeat:repeat-x;background-position:calc(50% + var(--ruler-x,0px)) 0;
  -webkit-mask-image:linear-gradient(90deg,#000 0 calc(50% - 1px),#0000 calc(50% - 1px) calc(50% + 1px),#000 calc(50% + 1px));
  mask-image:linear-gradient(90deg,#000 0 calc(50% - 1px),#0000 calc(50% - 1px) calc(50% + 1px),#000 calc(50% + 1px))}
.nav-ruler.is-live:before{display:none}
.nav-ruler>canvas{position:absolute;inset:0;display:block}
.nav-ruler:after{content:"";position:absolute;top:0;left:50%;width:1px;height:24px;background:#000;transform:translate(-.5px)}
.nav-ruler--short{max-width:560px;margin-inline:auto}
.nav-viewport{position:relative;width:100%;display:flex;align-items:center;height:44px}
.nav-pill{position:absolute;top:50%;left:50%;height:32px;width:60px;border-radius:200px;background:var(--pill);transform:translate(-50%,-50%);z-index:0;transition:width .42s cubic-bezier(.22,.61,.36,1)}
.nav-scroller{position:relative;z-index:1;width:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.nav-scroller::-webkit-scrollbar{display:none}
.nav-content{display:flex;align-items:center;gap:40px;width:max-content;padding-inline:50vw;height:44px}
.nav-item{flex:none;min-height:44px;display:flex;align-items:center;gap:6px;scroll-snap-align:center;position:relative}
.nav-marker{width:16px;height:16px;flex:0 0 16px;display:flex;align-items:center;justify-content:center;border-radius:5px;background:#e6e6e6;border:.25px solid #ccc9c980;color:#656565;font:600 11px/1 var(--sans);transition:transform .16s,background-color .16s,color .16s}
.nav-item.is-active .nav-marker{background:#d4d4d4;color:#000;transform:scale(1.25)}
.nav-link{display:grid;align-items:center;justify-items:center;min-width:40px;min-height:44px;white-space:nowrap;color:var(--muted);font:400 14px/normal var(--plex);transition:color .2s}
.nav-link:before{content:attr(data-label);grid-area:1/1;height:0;visibility:hidden;overflow:hidden;font-size:16px}
.nav-link>span{grid-area:1/1}
.nav-item.is-active .nav-link{color:#000;font-size:16px}
@media (hover:hover) and (pointer:fine){.nav-item:not(.is-active) .nav-link:hover{text-decoration:underline}}

/* ---------- shared text bits ---------- */
.chip{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:4px;background:var(--chip);color:#000;font:400 14px/normal var(--plex);transition:background-color .2s}
@media (hover:hover){.chip:hover{background:#a5a5a555}}
.u-link{color:#000;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (prefers-reduced-motion:reduce){*,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* Comfortable targets and wrapping for shared navigation and footers. */
a.chip,button.chip{min-height:44px;justify-content:center}
.tools-footer,.works-footer{flex-wrap:wrap;align-items:center}
.tools-footer nav,.works-footer nav{flex-wrap:wrap}
.tools-footer nav a,.works-footer nav a{display:inline-flex;align-items:center;min-height:44px}