/* Fonts: drop MonaSans.woff2 into assets/fonts/ to self-host (recommended). CDN fallback below. */
@font-face{font-family:"Mona Sans";font-weight:200 900;font-display:swap;
  src:url("/assets/fonts/MonaSans.woff2") format("woff2"),
      url("https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5/files/mona-sans-latin-wght-normal.woff2") format("woff2")}
:root{--ink:#071013;--cream:#F9FBF2;--ph:#D9D9D9;--snap:#555555;--pad:36px;--r:6px;
  --display:64px;--nav:24px;--body:20px;--card-h:clamp(64px,12.5svh,104px);--card-w:calc(var(--card-h)*16/9);--gap:14px}
@media (max-width:1099px){:root{--pad:28px;--display:48px;--nav:20px;--body:18px}}
@media (max-width:640px){:root{--pad:20px;--display:34px;--body:16px}}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ink);color:var(--cream);-webkit-text-size-adjust:100%}
body{font-family:"Mona Sans",system-ui,sans-serif;min-height:100svh;display:flex;flex-direction:column;gap:var(--gap);padding:29px 0 15px;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.display{font-weight:900;font-size:var(--display);line-height:1.4;text-transform:uppercase}
.body{font-weight:400;font-size:var(--body);line-height:1.4}

/* nav */
.nav{height:48px;padding:0 var(--pad);display:flex;align-items:flex-start;flex:none}
.nav>*{flex:1 1 0;display:flex;padding-top:1px}
.nav-left img{width:100px;height:48px;display:block}
.nav-links{flex:0 0 auto;gap:54px;font-weight:900;font-size:var(--nav);line-height:1.4;text-transform:uppercase;color:var(--cream)}
.nav-links a{position:relative}.nav-links a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:3px;background:var(--cream)}
.nav-right{justify-content:flex-end;align-items:center;gap:16px}
.nav-right img{width:104px;height:35px;display:block}
.burger{display:none;width:36px;height:36px;border:0;background:none;cursor:pointer;flex-direction:column;gap:7px;align-items:center;justify-content:center}
.burger i{display:block;width:26px;height:3px;border-radius:2px;background:var(--cream)}
@media (max-width:640px){.nav-right{flex:1 1 0}}

/* pages */
main{flex:1 1 auto;min-height:320px;padding:0 var(--pad);display:flex}
.panel{flex:1;background:var(--cream);color:var(--ink);border-radius:var(--r);position:relative;overflow:hidden}
.panel .display{padding:22px;color:var(--ink)}
#stage{width:100%;height:100%;display:block;touch-action:pan-y}

/* marquee */
.marquee{flex:none;overflow:hidden;position:relative;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.track{display:flex;gap:var(--gap);width:max-content;will-change:transform;position:relative}
.group{display:flex;flex-direction:column-reverse;flex:none;will-change:opacity;transition:opacity .3s cubic-bezier(.22,.61,.36,1)}
.cards{display:flex;gap:var(--gap)}
.card img{pointer-events:none}
.card{position:relative;overflow:hidden;width:var(--card-w);height:var(--card-h);background:var(--cream);border-radius:var(--r);flex:none;display:block;-webkit-user-drag:none}
.label{font-weight:900;font-size:clamp(22px,5.2svh,52px);line-height:1.4;text-transform:uppercase;white-space:nowrap;color:var(--cream)}
.marquee[data-active] .group{opacity:.1}
.marquee[data-active="art"] .group[data-cat="art"],.marquee[data-active="design"] .group[data-cat="design"],.marquee[data-active="tech"] .group[data-cat="tech"]{opacity:1}
.snap{left:0;top:0;position:fixed;z-index:50;width:320px;height:180px;border-radius:var(--r);background:#F9FBF2;overflow:hidden;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity .25s cubic-bezier(.22,.61,.36,1);box-shadow:0 14px 34px rgba(0,0,0,.4)}
.snap.on{opacity:1}

/* cursor */
.cur{position:fixed;left:0;top:0;pointer-events:none;z-index:2147483647;opacity:0;will-change:transform}
@media (pointer:fine){html.has-cursor,html.has-cursor *{cursor:none!important}}


/* home: always fit the viewport so the strip is always visible; hero stays a landscape rectangle */
body.home{height:100dvh;overflow:hidden}
body.home main{min-height:0;container-type:size;align-items:center}
body.home .panel{flex:none;width:100%;height:min(100%,62cqw)}

/* phone: hero can be a tall box filling the space above the strip */
@media (max-width:640px){body.home .panel{height:100%}}

@media (prefers-reduced-motion:reduce){.group,.snap{transition:none}}

/* content protection: no selecting, dragging, long-press saving or printing of the site's media and text */
html{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
img,video{-webkit-user-drag:none;user-drag:none;pointer-events:none}
::selection{background:transparent}
@media print{html{display:none}}

/* top-right logo is clickable (swaps W+M / WXM) */
.nav-right>img{pointer-events:auto}