/* Reset, page-wide type, navigation, buttons and the work filter. Every section runs edge to edge. */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); -webkit-text-size-adjust: 100%; }
html.is-locked { overflow: hidden; }
body { margin: 0; color: var(--text); font: 400 18px/1.5 var(--body); overflow-x: clip; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
/* The site never underlines text, in any state. Links highlight with color and a glow instead. */
a, a:hover, a:focus, a:active, a:visited, u, ins, abbr { text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 3px solid var(--ui); outline-offset: 3px; }
h1, h2, h3, p { margin: 0; }

/* Display type: wide, heavy and tight. Sized in vw so it spans the screen on any device. */
.display { font-weight: 800; letter-spacing: -0.02em; line-height: 0.95; text-transform: uppercase; }
.section-title { font-size: clamp(38px, 7.6vw, 150px); }
.lede { max-width: 56ch; color: var(--muted); font-size: clamp(18px, 1.5vw, 23px); line-height: 1.4; }

.nav { position: fixed; z-index: 20; inset: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; padding: 14px var(--gutter) 22px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.72), transparent); }
/* The name in the top left corner, on one line, as the hero name fades for the UX stage (--name-in from hero.js). */
.nav-name { margin-right: auto; font-family: 'Nebula', var(--body); font-size: clamp(13px, 1.6vw, 24px); font-weight: 400; line-height: 1; text-transform: uppercase; white-space: nowrap; color: #fff; text-shadow: 0 2px 6px #000, 0 0 14px #000; opacity: var(--name-in, 1); transition: opacity 0.2s; }
.nav-links { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 30px); font-size: 16px; }
.nav-links a { color: var(--text); opacity: 0.8; transition: opacity 0.2s, text-shadow 0.2s; }
.nav-links a:hover { opacity: 1; text-shadow: var(--glow-white); }
.nav-links a.btn { opacity: 1; color: var(--ink); }
@media (max-width: 720px) { .nav-links a:not(.btn):not(.nav-keep) { display: none; } }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 10px 28px; border-radius: 999px; font-weight: 600; font-size: 17px; text-decoration: none; transition: transform 0.25s var(--ease), background 0.2s, border-color 0.2s; }
.btn:hover { transform: translateY(-2px) scale(1.03); }
.btn-primary { background: var(--text); color: var(--ink); }
.btn-ghost { border: 1px solid rgba(255, 255, 255, 0.5); color: var(--text); background: rgba(0, 0, 0, 0.45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.btn-ghost:hover { border-color: var(--text); }
.nav .btn { min-height: 40px; padding: 6px 18px; font-size: 15px; }

/* Work filter, rendered by filter.js. On phones it becomes one swipeable row from edge to edge. */
.filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.chip { display: inline-flex; flex: none; align-items: center; gap: 8px; min-height: 44px; padding: 5px 17px; border: 2px solid rgba(255, 255, 255, 0.28); border-radius: 999px; background: rgba(0, 0, 0, 0.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 15px; font-weight: 500; transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.25s var(--ease); }
.chip { position: relative; }
/* Lifting the chip on hover moved it out from under a pointer near its bottom edge, which dropped the hover and could
   swallow the click. The invisible strip below it keeps the pointer on the chip while it is lifted. Touch screens get no
   hover, so one tap is always a click. */
.chip::after { content: ''; position: absolute; inset: -2px -2px -6px; }
@media (hover: hover) { .chip:hover { border-color: var(--text); transform: translateY(-2px); } }
.chip[aria-pressed='true'] { color: var(--ink); background: var(--text); border-color: var(--text); }
.chip-count { opacity: 0.6; font-size: 13px; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .filter { flex-wrap: nowrap; justify-content: flex-start; width: 100vw; overflow-x: auto; padding: 4px 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .filter::-webkit-scrollbar { display: none; }
}
.tag { display: inline-block; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }