:root {
  --canvas: #0d0a09;
  --plate: #1a1614;
  --ink: #efeae6;
  --ink-2: #948d88;
  --ink-meta: #6b6460;
  --line: rgba(239, 239, 239, .11);
  --underline: rgba(239, 239, 239, .26);

  --w: 42rem;
  --r-top: 128px;
  --r-section: 76px;

  --display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", system-ui, "Segoe UI", Inter, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--canvas); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 400 14px/1.6 var(--sans);
  letter-spacing: -.006em;
  font-feature-settings: "cv11", "ss03";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, p, dl, dd { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
::selection { background: rgba(239, 239, 239, .22); }
a:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; border-radius: 1px; }

.axis { max-width: var(--w); margin: 0 auto; padding: var(--r-top) 32px 96px; }

/* Identity */
.id { display: flex; align-items: center; gap: 15px; }
.id__avatar { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; }
.id__name { font-size: 17px; font-weight: 500; line-height: 1.2; letter-spacing: -.012em; }
.id__role { margin-top: 2px; color: var(--ink-2); line-height: 1.25; }

.intro { margin-top: 34px; font-size: 15.5px; line-height: 1.78; }
.links { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 26px; font-size: 14.5px; }

.link {
  color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 1px;
  text-decoration-color: var(--underline); text-underline-offset: 3px;
  transition: text-decoration-color .13s;
}
.link:hover { text-decoration-color: var(--ink); }
.name { font-weight: 500; }
.dim { color: var(--ink-2); }

/* Sections */
.section { margin-top: var(--r-section); }
.heading { margin: 0 0 18px; font-family: var(--display); font-size: 17px; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; color: var(--ink); }

.item + .item { margin-top: 22px; }
.item__row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; font-size: 15px; line-height: 1.45; }
.meta { flex: none; font-size: 12.5px; line-height: 1.5; color: var(--ink-meta); font-variant-numeric: tabular-nums; white-space: nowrap; }
.item__desc { margin-top: 3px; color: var(--ink-2); font-size: 14px; line-height: 1.6; }

.plate {
  display: block; margin-bottom: 16px; overflow: hidden;
  aspect-ratio: 16 / 9; border-radius: 12px; background: var(--plate);
  box-shadow: inset 0 0 0 1px var(--line);
}
.plate img { width: 100%; height: 100%; object-fit: cover; transition: opacity .2s; }
.plate:hover img { opacity: .9; }

.caps div { display: grid; grid-template-columns: 112px 1fr; gap: 14px; }
.caps div + div { margin-top: 10px; }
.caps dt { color: var(--ink-meta); font-size: 12.5px; padding-top: 2px; }
.caps dd { color: var(--ink-2); font-size: 14px; line-height: 1.6; }

.footer { margin-top: var(--r-section); padding-top: 24px; border-top: 1px solid var(--line); color: var(--ink-2); }

@media (max-width: 760px) {
  :root { --r-top: 72px; --r-section: 60px; }
  .axis { padding-left: 22px; padding-right: 22px; }
  .item__row { display: block; }
  .meta { display: block; margin-top: 3px; }
  .caps div { grid-template-columns: 1fr; gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* Case studies */
.back { display: inline-block; font-size: 13px; color: var(--ink-2); text-decoration-color: transparent; }
.back:hover { color: var(--ink); }
.case__head { margin-top: 56px; }
.case__head .intro { margin-top: 14px; color: var(--ink); }
.case__site { margin-top: 14px; color: var(--ink-2); }
.case__meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line); }
.case__meta dt { font-size: 12.5px; color: var(--ink-meta); }
.case__meta dd { margin-top: 2px; }

/* Images break out of the text column as wide as they can without touching the
   contents sidebar (left 80px + 176px wide + 24px gap = 280px each side), capped at 54rem.
   Once the sidebar hides, they can use the full width. */
.media {
  --clear: 280px;
  margin: 28px 0 0;
  width: clamp(100%, 100vw - 2 * var(--clear), 54rem);
  position: relative; left: 50%; transform: translateX(-50%);
}
@media (max-width: 1180px) { .media { --clear: 22px; } }
.media img, .media video {
  display: block; width: 100%; height: auto;
  border-radius: 12px; background: var(--plate);
  box-shadow: inset 0 0 0 1px var(--line);
}
.media--pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.media + .media { margin-top: 12px; }
.media--hero { margin-top: 44px; }
.media--hero img { aspect-ratio: 16 / 10; object-fit: cover; }

.case { margin-top: 12px; }
.case__h { margin-top: 64px; font-size: 15.5px; font-weight: 500; line-height: 1.3; }
.case__p { margin-top: 12px; color: var(--ink-2); font-size: 15px; line-height: 1.7; }
.case__h + .case__p { margin-top: 10px; }
.media + .case__p { margin-top: 28px; }

.next { margin-top: 92px; }
.next__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 18px; border-radius: 14px;
  background: var(--plate); border: 1px solid var(--line);
  transition: background .2s, border-color .2s;
}
.next__btn:hover, .next__btn:focus-visible {
  background: color-mix(in srgb, var(--accent, var(--ink)) 8%, var(--plate));
  border-color: color-mix(in srgb, var(--accent, var(--ink)) 45%, transparent);
}
.next__text { display: flex; flex-direction: column; gap: 2px; }
.next__label { font-size: 12.5px; color: var(--ink-meta); }
.next__title { font-family: var(--display); font-weight: 600; font-size: 18px; letter-spacing: -.015em; }
.next__arrow {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--canvas); border: 1px solid var(--line); color: var(--ink-2);
  transition: transform .2s, color .2s;
}
.next__btn:hover .next__arrow { transform: translateX(3px); color: var(--ink); }

@media (max-width: 760px) {
  .case__meta { grid-template-columns: 1fr 1fr; row-gap: 18px; }
  .media--pair { grid-template-columns: 1fr; }
}

/* Dither hero */
.hero { position: absolute; inset: 0 0 auto 0; height: 40vh; min-height: 260px; overflow: hidden; pointer-events: none; }
.hero__canvas { display: block; width: 100%; height: 100%; }
.hero__fade { position: absolute; inset: 25% 0 0 0; background: linear-gradient(to top, var(--canvas), color-mix(in srgb, var(--canvas) 80%, transparent) 45%, transparent); }
.hero--fallback { background: linear-gradient(90deg, rgba(8, 148, 255, .22), rgba(201, 89, 221, .22), rgba(255, 46, 84, .22), rgba(255, 144, 4, .22)); }
@keyframes heroIn { to { opacity: 1; } }
.axis--hero { position: relative; z-index: 1; padding-top: max(20vh, 150px); }

.id__display { font-family: var(--display); font-weight: 600; font-size: 28px; line-height: 1.1; letter-spacing: -.025em; }
.pill { display: inline-block; padding: 2px 8px; border-radius: 4px; background: rgba(239, 234, 230, .05); color: var(--ink-2); font-size: 11.5px; }
.intro--dim { margin-top: 14px; color: var(--ink-2); }
header + .intro { margin-top: 24px; }

/* Highlights */
.bullets { padding-left: 18px; list-style: disc; color: var(--ink-2); font-size: 15px; }
.bullets li { padding-left: 4px; line-height: 1.65; }
.bullets li + li { margin-top: 10px; }
.bullets li::marker { color: var(--ink-meta); }
.hi { color: var(--ink); }

/* Work rows */
.wrow { display: flex; align-items: center; gap: 14px; padding: 14px 0; }
.wrow__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 15px; line-height: 1.45; }
.wrow__text .dim { font-size: 14px; }
.thumb { flex: none; width: 40px; height: 40px; border-radius: 10px; overflow: hidden; background: var(--plate); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb--mono { display: grid; place-items: center; font-family: var(--display); font-weight: 600; font-size: 19px; color: var(--ink); }
a.wrow .name { transition: color .15s; }
a.wrow:hover .name { text-decoration: underline; text-decoration-color: var(--underline); text-underline-offset: 3px; }
a.wrow:hover .thumb img { opacity: .9; }

@media (max-width: 760px) {
  .axis--hero { padding-top: max(18vh, 120px); }
  .wrow .meta { display: none; }
}

/* Case-study banner: taller, so the dithered image reads */
.hero--case { height: 52vh; min-height: 320px; }
.hero--case .hero__fade { inset: 30% 0 0 0; background: linear-gradient(to top, var(--canvas) 30%, color-mix(in srgb, var(--canvas) 88%, transparent) 60%, transparent); }
.axis--case { padding-top: max(34vh, 220px); }
.axis--case .case__head { margin-top: 40px; }
.back { color: var(--ink); }
@media (max-width: 760px) {
  .hero--case { height: 42vh; }
  .axis--case { padding-top: max(26vh, 170px); }
}

/* Logo tiles in the work list */
.thumb--logo { display: grid; place-items: center; }
.thumb--logo img { width: 22px; height: 22px; object-fit: contain; }

/* Brands */
.brands { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.brands li {
  display: grid; place-items: center; height: 64px;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  transition: background .15s;
}
.brands li:hover { background: rgba(239, 234, 230, .02); }
/* Every wordmark rendered pure white, regardless of source colors */
.brand { display: block; height: 26px; width: auto; max-width: 70%; filter: brightness(0) invert(1); opacity: .72; transition: opacity .15s; }
.brands li:hover .brand { opacity: 1; }
.marquee__track a { display: block; }
.marquee__track a:hover .brand, .marquee__track a:focus-visible .brand { opacity: 1; }
/* Optically balanced by eye: equal ink area as a start, then tuned for stroke weight */
.brand--kraken { height: 22.8px; }
.brand--brex { height: 26.7px; }
.brand--solflare { height: 24.7px; }
.brand--polygon { height: 26.7px; }
.brand--opensea { height: 27.3px; }
.brand--y00ts { height: 25.4px; }
.brand--degods { height: 25.4px; }
.brand--boba { height: 31.2px; }
.brand--solcasino { height: 31.9px; }
.brand--bags { height: 26.0px; }
.brand--donategg { height: 27.3px; }
@media (max-width: 560px) { .brands { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.memoji { display: block; width: 52px; height: auto; margin-bottom: 14px; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .35)); }

.wrow__title { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wrow__title .role { color: var(--ink-2); }
a.wrow:hover .role { text-decoration: none; }

/* Floating brand strip */
.marquee { margin-top: 44px; }
.marquee__label { font-family: var(--display); font-size: 17px; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; color: var(--ink); }
.marquee__viewport {
  display: flex; overflow: hidden; margin-top: 26px; padding: 8px 0;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
}
.marquee__track {
  flex: none; display: flex; align-items: center; gap: 64px; padding-right: 64px;
  animation: marquee 38s linear infinite;
}
.marquee__viewport:hover .marquee__track { animation-play-state: paused; }
.marquee .brand { max-width: none; }
@keyframes marquee { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; flex-wrap: wrap; row-gap: 20px; }
  .marquee__track[aria-hidden] { display: none; }
  .marquee__viewport { -webkit-mask-image: none; mask-image: none; }
}

/* Name meta row: role pill + social links */
.id__meta { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.socials { display: flex; align-items: center; gap: 12px; color: var(--ink-2); }
.socials a { display: grid; place-items: center; width: 22px; height: 22px; transition: color .15s; }
.socials a:hover { color: var(--ink); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pill__dot { margin: 0 6px; color: var(--ink-meta); }

/* Experience timeline */
.timeline { position: relative; list-style: none; margin: 0; padding: 0; }
.tl { position: relative; display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; padding-bottom: 26px; }
.tl:last-child { padding-bottom: 0; }
.tl::before {                                    /* rail segment to the next node */
  content: ""; position: absolute; left: 19.5px; top: 44px; bottom: 4px;
  width: 1px; background: linear-gradient(var(--line), var(--line)) no-repeat;
}
.tl:last-child::before { display: none; }
.tl__node {
  position: relative; z-index: 1; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--plate); box-shadow: inset 0 0 0 1px var(--line);
}
.tl__node img { width: 22px; height: 22px; object-fit: contain; }
.tl--current .tl__node {                        /* the node's own border carries the Apple gradient */
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--plate), var(--plate)) padding-box,
    conic-gradient(from 200deg, #0894ff, #c959dd, #ff2e54, #ff9004, #0894ff) border-box;
  box-shadow: none;
}
.tl__body { padding-top: 1px; }
.tl__body .meta { display: block; }
.tl__title { margin-top: 2px; font-size: 15px; line-height: 1.45; }
.tl__body .item__desc { margin-top: 4px; }

/* About: short paragraphs, benji-style */
.about { margin-top: 24px; font-size: 15.5px; line-height: 1.65; }
.about p + p { margin-top: 12px; }

/* Local time + Clover */
.here { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: var(--r-section); color: var(--ink-meta); font-size: 14px; font-variant-numeric: tabular-nums; }
.clover { width: 22px; height: 22px; overflow: visible; }
/* line-art Clover: page-coloured fill, outlined in the text grey, eyes too */
.clover__body, .clover__eyes ellipse {
  fill: var(--canvas); stroke: var(--ink-meta); stroke-width: 1.3; vector-effect: non-scaling-stroke; stroke-linejoin: round;
}
.clover__eyes { transform-box: fill-box; transform-origin: center; animation: blink 4.6s infinite; }
@keyframes blink {
  0%, 92%, 100% { transform: scaleY(1); }
  94% { transform: scaleY(.1); }
  96% { transform: scaleY(1); }
  97.5% { transform: scaleY(.1); }
  99% { transform: scaleY(1); }
}

/* Page load: black first, the gradient fades up crisp (no stretching the pixels), then the content staggers in (benji.org) */
@keyframes heroFade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes staggerIn {
  0% { opacity: 0; transform: translateY(8px); filter: blur(4px); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}
html.ready .home .hero { animation: heroFade 1.6s ease-out both; }
html.ready .home .axis--hero > *,
html.ready .home .axis--hero > header > * { animation: staggerIn .6s ease both; }
html.ready .home .axis--hero > header { animation: none; }
html.ready .home .axis--hero > header > :nth-child(1) { animation-delay: .75s; }
html.ready .home .axis--hero > header > :nth-child(2) { animation-delay: .8s; }
html.ready .home .axis--hero > header > :nth-child(3) { animation-delay: .85s; }
html.ready .home .axis--hero > .about { animation: none; }
html.ready .home .about > * { animation: staggerIn .6s ease both; }
html.ready .home .about > :nth-child(1) { animation-delay: .9s; }
html.ready .home .about > :nth-child(2) { animation-delay: .95s; }
html.ready .home .about > :nth-child(3) { animation-delay: 1s; }
html.ready .home .about > :nth-child(4) { animation-delay: 1.05s; }
html.ready .home .about > :nth-child(5) { animation-delay: 1.1s; }
html.ready .home .axis--hero > :nth-child(3) { animation-delay: 1.15s; }
html.ready .home .axis--hero > :nth-child(4) { animation-delay: 1.2s; }
html.ready .home .axis--hero > :nth-child(5) { animation-delay: 1.25s; }
html.ready .home .axis--hero > :nth-child(n+6) { animation-delay: 1.3s; }
@media (prefers-reduced-motion: reduce) {
  html:not(.seen) .hero, html.ready .home .axis--hero *, .clover__eyes { animation: none !important; }
}

/* Case-study contents sidebar (benji.org) */
.toc { position: fixed; z-index: 5; top: 5rem; left: 5rem; width: 11rem; opacity: 0; transition: opacity .4s ease; }
.toc[data-ready] { opacity: 1; }
.toc__back {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 0;
  font-size: 14px; font-weight: 500; color: var(--ink-2); transition: color .12s;
}
.toc__back:hover { color: var(--ink); }
.toc__nav { margin-top: 30px; }
.toc__title { margin-bottom: 14px; font-size: 13px; font-weight: 500; opacity: 0; transition: opacity .3s; }
.toc__title a { color: var(--ink); }
.toc__nav[data-scrolled] .toc__title { opacity: 1; }
.toc__nav ul { display: flex; flex-direction: column; gap: 9px; }
.toc__nav li a { display: block; font-size: 13px; line-height: 1.3; color: var(--ink-meta); transition: color .12s; }
.toc__nav li a:hover, .toc__nav li[data-active] a { color: var(--ink); }
.case__h { scroll-margin-top: 80px; }
@media (max-width: 1180px) {
  .toc { position: absolute; top: 28px; left: 50%; width: min(var(--w), 100vw) ; transform: translateX(-50%); padding: 0 32px; }
  .toc__nav { display: none; }
}
@media (max-width: 760px) { .toc { padding: 0 22px; } }

/* Hand-drawn margin doodles, tinted by the page accent */
.doodle { position: relative; display: block; height: 0; color: var(--accent, var(--ink-2)); }
.doodle svg { position: absolute; top: 18px; width: 72px; height: 72px; opacity: .9; }
.doodle[data-side="left"] svg { right: calc(100% + 3rem); }
.doodle[data-side="right"] svg { left: calc(100% + 3rem); }
@media (max-width: 1100px) { .doodle { display: none; } }

.case__head .id__name { font-family: var(--display); font-weight: 600; font-size: 26px; letter-spacing: -.022em; line-height: 1.15; }

/* Home banner: let the mesh gradient breathe before it melts into the page */
.home .hero { height: 46vh; min-height: 300px; }
.home .hero__fade { inset: 45% 0 0 0; background: linear-gradient(to top, var(--canvas) 10%, color-mix(in srgb, var(--canvas) 55%, transparent) 55%, transparent); }

/* ---------- Link spotlight + TL;DR ---------- */
.spot {
  position: fixed; z-index: 60; pointer-events: none; border-radius: 7px;
  box-shadow: 0 0 0 200vmax rgba(8, 6, 5, .58);
  opacity: 0; transition: opacity .28s ease, left .42s var(--morph), top .42s var(--morph), width .42s var(--morph), height .42s var(--morph);
}
.tldr {
  --morph: cubic-bezier(.3, 1.2, .4, 1);
  position: fixed; z-index: 61; pointer-events: none; overflow: hidden;
  border-radius: 14px;
  background: color-mix(in srgb, var(--plate) 88%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px rgba(0, 0, 0, .35);
  opacity: 0; transform: translateY(6px) scale(.97); transform-origin: 50% 0;
  transition: opacity .2s ease, transform .25s cubic-bezier(.2,.8,.2,1),
              left .42s var(--morph), top .42s var(--morph), width .42s var(--morph), height .42s var(--morph);
}
.spot { --morph: cubic-bezier(.3, 1.2, .4, 1); }
.tldr__inner { width: max-content; max-width: 290px; padding: 12px 14px 13px; transition: opacity .12s ease, filter .12s ease; }
.tldr__inner.is-swapping { opacity: 0; filter: blur(3px); }
.tldr[data-side="above"] { transform-origin: 50% 100%; transform: translateY(-6px) scale(.97); }
html.spotlit .spot, html.spotlit .tldr { opacity: 1; }
html.spotlit .tldr { transform: none; }
.no-anim { transition: none !important; }
.tldr { font-family: var(--sans); }
.tldr__head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tldr__title { font-family: var(--display); font-weight: 600; font-size: 13px; letter-spacing: -.01em; color: var(--ink); }
.tldr__pron { font-family: var(--mono); font-size: 11px; color: var(--ink-meta); }
.tldr__body { margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--ink); }
.tldr__site { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); font-family: var(--mono); font-size: 11px; color: var(--ink-meta); }


/* Austin skyline sketch footer */
.skyline { position: relative; margin-top: -40px; color: var(--ink-meta); opacity: .75; pointer-events: none; }
.skyline svg { display: block; width: 100%; height: auto; }
.skyline__water { opacity: .5; }
.home .axis--hero { padding-bottom: 56px; }

/* Subtle stroke on case-study images, drawn over the image edge */
.media img, .media video { outline: 1px solid var(--line); outline-offset: -1px; }

/* Case banners: a long hand-drawn scene drifting across the gradient, full height, fading out at the top */
.hero__scene {
  --h: max(52vh, 320px);                          /* the full banner */
  --tile: calc(var(--h) * 2.6667);                  /* scene canvas is 1600 × 600 */
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--h);
  color: rgba(255, 255, 255, .62);
  background: currentColor;
  -webkit-mask-image: var(--scene), linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.45) 14%, #000 40%);
          mask-image: var(--scene), linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.45) 14%, #000 40%);
  -webkit-mask-size: var(--tile) 100%, 100% 100%;
          mask-size: var(--tile) 100%, 100% 100%;
  -webkit-mask-repeat: repeat-x, no-repeat;
          mask-repeat: repeat-x, no-repeat;
  -webkit-mask-position: 0 100%, 0 0;
          mask-position: 0 100%, 0 0;
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  animation: sceneDrift 110s linear infinite;
  pointer-events: none;
}
@keyframes sceneDrift { to { -webkit-mask-position: calc(-1 * var(--tile)) 100%, 0 0; mask-position: calc(-1 * var(--tile)) 100%, 0 0; } }
@media (max-width: 760px) { .hero__scene { --h: max(42vh, 320px); } }
@media (prefers-reduced-motion: reduce) { .hero__scene { animation: none; } }

/* Sketched comets across the home banner */
.comet {
  position: absolute; z-index: 1; height: auto; pointer-events: none;
  color: rgba(255, 255, 255, .85);
  transform-origin: 100% 50%;
  opacity: 0;
  animation: cometFall 1.8s cubic-bezier(.3, .1, .6, 1) forwards;
}
@keyframes cometFall {
  0%   { opacity: 0; transform: translate(0, 0) rotate(var(--rot)) scaleX(.4); }
  15%  { opacity: 1; }
  70%  { opacity: .9; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scaleX(1); }
}

/* ---------- Loading screen (first visit) ---------- */
.loader {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  background: var(--canvas); color: var(--ink);
  transition: opacity .7s ease, filter .7s ease, transform .9s cubic-bezier(.2, .8, .2, 1);
}
.loader.is-done { opacity: 0; filter: blur(10px); transform: scale(1.04); pointer-events: none; }
.loader__clover { width: 84px; height: 84px; overflow: visible; }
.loader__draw { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; animation: sketchIn 1.1s cubic-bezier(.6, .1, .3, 1) .1s forwards; }
.loader__draw--eye { animation-duration: .45s; animation-delay: 1.25s; }   /* only after the outline is complete */
.loader__eyes { transform-box: fill-box; transform-origin: center; animation: blink 3.2s 1.9s infinite; }
@keyframes sketchIn { 0% { stroke-dashoffset: 1; opacity: 0; } 2% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }
.loader__label {
  display: flex; gap: 12px; align-items: baseline;
  font: 400 12px/1 var(--mono); letter-spacing: .02em; color: var(--ink-meta);
}
.loader__pct { min-width: 4ch; text-align: center; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.loader__bar { width: 160px; height: 1.5px; border-radius: 2px; background: var(--line); overflow: hidden; }
.loader__bar i {
  display: block; height: 100%; transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, #0894ff, #c959dd, #ff2e54, #ff9004);
}
html.is-loading, html.is-loading body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .loader__draw { animation: none; stroke-dashoffset: 0; opacity: 1; }
  .loader__eyes { animation: none; }
}

/* Role · Location · Links — plain text, sectioned by dots */
.pill { padding: 0; border-radius: 0; background: none; color: var(--ink-2); font-size: 13.5px; }
.pill__dot { margin: 0 8px; color: var(--ink-meta); }
.id__meta { gap: 0; }
.socials { gap: 10px; }

/* Solid text everywhere except labels, dates and meta */
.item__desc, .wrow__text .dim, .wrow__title .role, .bullets, .caps dd, .case__p, .row__role,
.item__row .dim, .tl__title .dim, .case__head .intro, .toc__back, .socials, .pill { color: var(--ink); }
.bullets li::marker { color: var(--ink-meta); }

/* Hide scrollbars everywhere; scrolling still works */
html { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar, *::-webkit-scrollbar { width: 0; height: 0; display: none; }
* { scrollbar-width: none; }
/* social glyphs: sized so their visible ink is the same height (~11px) */
.socials a { display: grid; place-items: center; }
.soc { display: block; }
.soc--in { transform: translateY(-.5px); }

/* ---------- 404 ---------- */
.lost__main { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center;
  max-width: 34rem; margin: 0 auto; padding: max(18vh, 130px) 22px 40px; }
.lost__art { width: min(420px, 90vw); height: auto; color: var(--ink); overflow: visible; }
.lost__draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: sketchIn 1s cubic-bezier(.6,.1,.3,1) forwards; }
.lost__draw:nth-of-type(1) { animation-delay: .1s; }
.lost__draw:nth-of-type(2) { animation-delay: .35s; }
.lost__draw:nth-of-type(3) { animation-delay: .6s; }
.lost__eyes { opacity: 0; animation: lostEyesIn .3s ease 1.7s forwards, lookAround 5s ease-in-out 2.2s infinite; }
.lost__eye { fill: currentColor; stroke: none; }
.lost__q { stroke-width: 2.4; opacity: 0; animation: qPop .4s ease 2s forwards, qBob 3s ease-in-out 2.4s infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.lost__q--2 { animation-delay: 2.3s, 2.7s; }
@keyframes lostEyesIn { to { opacity: 1; } }
@keyframes lookAround { 0%, 18% { transform: translate(0, 0); } 25%, 42% { transform: translate(-7px, 1px); } 50%, 68% { transform: translate(7px, -1px); } 75%, 100% { transform: translate(0, 0); } }
@keyframes qPop { from { opacity: 0; transform: scale(.6); } to { opacity: .8; transform: scale(1); } }
@keyframes qBob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(-6deg); } }
.lost__title { margin-top: 36px; font-family: var(--display); font-weight: 600; font-size: 28px; letter-spacing: -.025em; }
.lost__body { margin-top: 10px; font-size: 15.5px; line-height: 1.6; color: var(--ink); }
.lost__btn { margin-top: 30px; width: min(100%, 320px); text-align: left; }
.lost .skyline { margin-top: 40px; }
@media (prefers-reduced-motion: reduce) { .lost__draw { animation: none; stroke-dashoffset: 0; } .lost__eyes, .lost__q { animation: none; opacity: 1; } }

/* Work icons share the Experience node styling: hairline stroke, and the gradient ring on Boba */
.thumb--logo { box-shadow: inset 0 0 0 1px var(--line); }
.thumb--current {
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--plate), var(--plate)) padding-box,
    conic-gradient(from 200deg, #0894ff, #c959dd, #ff2e54, #ff9004, #0894ff) border-box;
  box-shadow: none;
}