/* Pixel-name header over #hero (white) (see header.js). #hero's own content is hidden by the head <style>. */
@font-face {
  font-family: "Pixelify Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/_gf/pixelify/pixelify-latin.woff2) format("woff2");
}
#lh-head {
  position: absolute; left: 0; right: 0; top: 0; height: 100vh; z-index: 2; overflow: hidden;
  background: transparent; color: #111;
  display: block;
}
/* film grain */
#lh-head::before { display: none;
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.lh-intro-lines { position: absolute; left: 50%; top: 30%; translate: -50% 0; width: max-content; max-width: 92%; text-align: center; font: 500 clamp(11px, 1.05vw, 15px)/1.45 "Geist Mono", ui-monospace, monospace; letter-spacing: .02em; text-transform: uppercase; }
.lh-intro-lines p { margin: 0; }
.lh-br { display: block; }
.lh-intro-lines p + p { margin-top: 1.1em; }
.lh-intro-lines em { font-style: normal; color: #224bf0; }
.lh-name {
  position: absolute; left: 50%; top: 45%; translate: -50% 0; margin: 0; white-space: nowrap; line-height: .9; letter-spacing: -0.01em;
  font: 700 min(20.5vw, 34vh)/.9 "Pixelify Sans", "Geist Mono", monospace;
}
/* entrance: lines, then the name, in pixel steps */
.lh-intro-lines, .lh-name { opacity: 0; transform: translateY(16px); transition: opacity .5s steps(5), transform .5s steps(5); }
#lh-head.ready .lh-intro-lines { opacity: 1; transform: none; }
#lh-head.ready .lh-name { opacity: 1; transform: none; transition-delay: .15s; }

.lh-trail { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.lh-st { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.lh-st svg {
  display: block; width: clamp(64px, 6.4vw, 92px); height: auto; translate: -50% -50%;
  animation: lh-st-in .12s steps(2) both;
}
@keyframes lh-st-in { from { scale: .55; } to { scale: 1; } }

@media (max-width: 809.98px) {
  .lh-br { display: inline; }
  .lh-intro-lines { width: calc(100% - 24px); max-width: none; }
  .lh-name { font-size: 22vw; white-space: normal; text-align: center; line-height: .85; width: calc(100% - 24px); }
}
@media (prefers-reduced-motion: reduce) { .lh-intro-lines, .lh-name { transition: none; } }

/* ---- intro keywords: hover/tap pops ---- */
.lh-intro-lines { font-size: clamp(12px, 1.12vw, 16px); line-height: 2; }
.kw { position: relative; display: inline-block; white-space: nowrap; cursor: default; outline: none; transition: color .2s; }
.kw::after { content: ""; position: absolute; left: 0; right: 0; bottom: 1px; border-bottom: 1.5px dotted currentColor; opacity: .22; transition: opacity .2s; }
.kw:hover::after, .kw.on::after { opacity: .6; }
.kw-ul::after, .kw-hl::after { display: none; }
.kw.on, .kw:focus-visible { color: #224bf0; }
.kw-hl { color: #224bf0; }
.kw-pop { position: absolute; left: 50%; bottom: 100%; display: flex; gap: 2px; align-items: flex-end; translate: -50% 0; pointer-events: none; padding-bottom: 6px; }
.kw-i { display: block; width: 34px; height: 34px; opacity: 0; transform: translateY(10px) scale(.3);
  transition: transform .18s ease, opacity .12s linear; transition-delay: 0s; }
.kw-i svg, .kw-i img { display: block; width: 100%; height: 100%; }
.kw-img { width: 58px; height: 58px; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 2px #111, 0 6px 14px rgba(0,0,0,.18); }
.kw-img img { object-fit: cover; }
.kw.on .kw-i { opacity: 1; transform: translateY(var(--y)) rotate(var(--r)); transition: transform .5s cubic-bezier(.3, 1.7, .5, 1), opacity .15s linear; transition-delay: var(--d); }
/* squiggle under "meaningful design" */
.kw-sq { position: absolute; left: -2%; width: 104%; bottom: -6px; height: 8px; overflow: visible; pointer-events: none; }
.kw-sq path { fill: none; stroke: #224bf0; stroke-width: 2.4; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 260; stroke-dashoffset: 260; }
#lh-head.ready .kw-sq path { animation: kw-draw .9s .9s cubic-bezier(.6, 0, .3, 1) forwards; }
#lh-head.ready .kw-ul.on .kw-sq path { animation: kw-redraw .7s cubic-bezier(.6, 0, .3, 1) forwards; }
@keyframes kw-draw { to { stroke-dashoffset: 0; } }
@keyframes kw-redraw { 0% { stroke-dashoffset: 260; } 100% { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .kw-i { transition: none !important; } .kw-sq path { animation: none !important; stroke-dashoffset: 0; } }
@media (max-width: 809.98px) { .kw-i { width: 28px; height: 28px; } .kw-img { width: 48px; height: 48px; } }

.lh-sub { color: #4a4f5c; font-size: .92em; }
.lh-sub .kw-hl { color: #224bf0; }


/* big corner pixel blocks of the original hero: removed */
html.lh-work #hero .framer-exrder, html.lh-work #hero .framer-197a109, html.lh-work #hero .framer-VkOuH { display: none !important; }
/* small twinkling pixels around the text (positions from header.js) */
.lh-tw { position: absolute; inset: 0; pointer-events: none; }
.lh-tw i { position: absolute; width: var(--s); height: var(--s); background: var(--c); opacity: 0;
  animation: lh-tw var(--d) steps(1) var(--dl) infinite; }
.lh-tw i.tw-plus { box-shadow: var(--s) 0 var(--c), calc(var(--s) * -1) 0 var(--c), 0 var(--s) var(--c), 0 calc(var(--s) * -1) var(--c); }
@keyframes lh-tw { 0% { opacity: 0; } 18% { opacity: .45; } 30% { opacity: 1; } 62% { opacity: .45; } 74%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lh-tw i { animation: none; opacity: .7; } }

/* company logos in the "prev design intern" line */
.lh-logo { display: inline-block; width: 1.5em; height: 1.5em; margin-right: .45em; vertical-align: -.42em; border-radius: 5px; overflow: hidden;
  box-shadow: 0 0 0 1.5px rgba(17, 17, 17, .12), 0 2px 5px rgba(17, 30, 90, .15); background: #fff; transition: transform .35s cubic-bezier(.3, 1.7, .5, 1); }
.lh-logo img, .lh-logo svg { display: block; width: 100%; height: 100%; }
.lh-logo svg { padding: 1px; box-sizing: border-box; }
.kw.on .lh-logo { transform: rotate(-8deg) scale(1.12); }

/* tools line: Figma / Framer logos + a terminal-style "vibe coding" chip */
.lh-tools { margin-top: .5em !important; }
.lh-intro-lines p.lh-tools + p.lh-sub { margin-top: .7em; }
.kw-vibe::after { display: none; }
.lh-vibe { display: inline-flex; align-items: center; gap: .45em; padding: .1em .6em .1em .5em; border-radius: 6px; background: #111; color: #7dff9b;
  font-weight: 600; box-shadow: 0 0 0 1.5px #111, 3px 3px 0 #224bf0; transition: transform .3s cubic-bezier(.3, 1.7, .5, 1), box-shadow .3s; }
.lh-vibe b { color: #fff; font-weight: 700; }
.lh-caret { display: inline-block; width: .55em; height: 1.05em; margin-left: -.15em; background: #7dff9b; animation: lh-caret 1s steps(1) infinite; }
@keyframes lh-caret { 50% { opacity: 0; } }
.kw-vibe.on .lh-vibe { transform: translate(-2px, -2px); box-shadow: 0 0 0 1.5px #111, 5px 5px 0 #224bf0; }
@media (prefers-reduced-motion: reduce) { .lh-caret { animation: none; } }

/* "currently @ Ping AI" with a live dot; the intern line breaks below it */
.lh-br2 { display: block; height: .35em; }
.lh-now { color: #111; }
.lh-live { display: inline-block; width: .55em; height: .55em; margin-right: .55em; vertical-align: .08em; background: #2fd36b; box-shadow: 0 0 0 0 rgba(47, 211, 107, .6); animation: lh-live 1.6s steps(4) infinite; }
@keyframes lh-live { 0% { box-shadow: 0 0 0 0 rgba(47, 211, 107, .6); } 100% { box-shadow: 0 0 0 .55em rgba(47, 211, 107, 0); } }
@media (prefers-reduced-motion: reduce) { .lh-live { animation: none; } }

/* Ping AI wordmark inline (replaces the word "Ping") */
.lh-wordmark { display: inline-block; height: .95em; width: auto; vertical-align: -.12em; margin-right: .1em; transition: transform .35s cubic-bezier(.3, 1.7, .5, 1); }
.kw.on .lh-wordmark { transform: rotate(-6deg) scale(1.1); }

/* "Who am I" blue intro section: removed (the header now carries the intro) */
html.lh-work #intro { display: none !important; }

/* toolkit + previous roles, under the Selected Work intro (markup from header.js, placed by work.js) */
.lh-kit { margin-top: 28px; display: grid; gap: 14px; font: 500 13px/1.6 "Geist Mono", ui-monospace, monospace; letter-spacing: .02em; text-transform: uppercase; color: #111; }
.lh-kit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.lh-kit-k { width: 72px; color: #8a8f99; }
.lh-kit .kw-pop { z-index: 5; }
@media (max-width: 809.98px) { .lh-kit-k { width: 100%; } .lh-kit-row { gap: 8px 16px; } }

/* ---- v41: headline / tagline / meta structure (centred), sentence case ---- */
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 500 700; font-display: swap; src: url(/_gf/caveat/caveat-latin.woff2) format("woff2"); }
#lh-head .lh-intro-lines { text-transform: none; letter-spacing: 0; font-family: "Geist", system-ui, sans-serif; line-height: 1.45; }
#lh-head .lh-intro-lines p + p { margin-top: .35em; }
.lh-h1, .lh-h2 { font-size: clamp(17px, 1.65vw, 24px); font-weight: 500; color: #111; letter-spacing: -.01em; }
.lh-h2 { font-weight: 400; color: #222; }
.lh-h1 { margin-bottom: .1em !important; }
#lh-head .lh-meta { font-size: clamp(13px, 1.1vw, 16px); color: #7a808c; font-weight: 400; }
#lh-head p.lh-h2 + p.lh-meta { margin-top: 1.3em; }
.lh-script { position: relative; display: inline-block; font: 600 1.45em/1 "Caveat", cursive; letter-spacing: 0; padding: 0 .08em; vertical-align: -.06em; }
.lh-script .kw-sq { bottom: -.16em; height: .3em; }
.lh-pen { display: inline-block; width: .95em; height: .95em; margin-left: .05em; vertical-align: -.05em; transition: transform .35s cubic-bezier(.3, 1.7, .5, 1); }
.lh-pen svg { display: block; width: 100%; height: 100%; }
.kw-designs.on .lh-pen { transform: translate(3px, -3px) rotate(-12deg); }
.lh-code { font: 600 .95em/1 "Geist Mono", ui-monospace, monospace; letter-spacing: -.02em; }
.lh-glitch { display: inline-block; width: .62em; text-align: center; color: transparent; position: relative; }
.lh-glitch::before { content: "u"; position: absolute; left: 0; right: 0; color: #224bf0; animation: lh-glitch 2.4s steps(1) infinite; }
@keyframes lh-glitch { 0%, 55% { content: "u"; color: #111; } 60% { content: "▚"; color: #224bf0; } 66% { content: "█"; color: #224bf0; } 72% { content: "_"; color: #224bf0; } 78% { content: "▞"; color: #224bf0; } 84%, 100% { content: "u"; color: #111; } }
.kw-designs::after, .kw-builds::after { display: none; }
.kw-builds.on .lh-code { color: #224bf0; }
#lh-head .lh-meta .kw-hl { color: #4a4f5c; }
#lh-head .lh-meta .kw-hl:hover, #lh-head .lh-meta .kw.on { color: #224bf0; }
@media (prefers-reduced-motion: reduce) { .lh-glitch::before { animation: none; } }
#lh-head p.lh-h1 { font-size: clamp(20px, 1.95vw, 28px); }
#lh-head p.lh-h2 { font-size: clamp(16px, 1.5vw, 22px); color: #2a2d33; }

/* pixel name canvas (header.js): the h1 keeps its layout/text but its ink is drawn as particles */
.lh-px-cv { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 1; }
#lh-head.lh-px .lh-name { color: transparent; opacity: 1; transform: none; transition: none; }
#lh-head.lh-px .lh-name::selection { color: #111; background: rgba(34, 75, 240, .2); }

/* Seattle time + weather in the meta line */
.lh-wx { white-space: nowrap; }
.lh-wx .lh-sep { margin: 0 .3em 0 .05em; }
.lh-wx-i { display: inline-block; width: 1.25em; height: 1.25em; vertical-align: -.28em; margin-right: .3em; }
.lh-wx-i svg { display: block; width: 100%; height: 100%; }
.lh-time { font-variant-numeric: tabular-nums; color: #4a4f5c; }
.lh-temp:not(:empty)::before { content: " "; }

/* v45 headline: "fluent in pixels & prompts" */
.lh-pixw { display: inline-block; font: 700 1.12em/1 "Pixelify Sans", monospace; color: #224bf0; letter-spacing: .01em; text-shadow: 2px 2px 0 rgba(34, 75, 240, .18);
  transition: transform .35s cubic-bezier(.3, 1.7, .5, 1), text-shadow .35s; }
.kw-designs.on .lh-pixw { transform: translate(-2px, -2px); text-shadow: 4px 4px 0 rgba(34, 75, 240, .3); }
.lh-h1 .lh-code { display: inline-flex; align-items: center; gap: .18em; font: 600 .9em/1 "Geist Mono", ui-monospace, monospace; padding: .16em .4em; border-radius: 5px;
  background: #111; color: #7dff9b; vertical-align: .06em; }
.lh-h1 .lh-code b { color: #fff; font-weight: 700; }
.lh-h1 .lh-code .lh-caret { width: .5em; height: .95em; margin-left: .05em; }
.kw-builds.on .lh-code { color: #7dff9b; box-shadow: 3px 3px 0 #224bf0; }

/* v51 headline: "from [Figma] to [>_working product]" */
.lh-h1 .lh-logo { width: 1.15em; height: 1.15em; vertical-align: -.2em; margin-right: .3em; border-radius: 6px; }
.lh-figw { font-weight: 600; }
.kw-designs.on .lh-figw { color: #224bf0; }

/* ================= pixel language beyond the hero ================= */
/* hero bottom: pixel dissolve into the work section */
.lh-edge { position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 2; }
.lh-edge i { position: absolute; background: #f9f8f8; }
/* small labels get a pixel bullet */
#lh-work .lw-eyebrow::before, #lh-vibe .lw-eyebrow::before, #lh-inv .lw-eyebrow::before { content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 10px 1px 0; background: #224bf0; vertical-align: middle;
  box-shadow: 8px 0 0 rgba(34, 75, 240, .35); margin-right: 18px; }
.lw-card .lw-eyebrow::before { display: none !important; }
.lw-hd::before { content: ""; display: inline-block; width: 10px; height: 10px; margin: 0 12px 2px 0; background: #111; vertical-align: middle; }
/* muted headline words in the pixel face */
.lw-h .mu { font-family: "Pixelify Sans", monospace; font-weight: 600; letter-spacing: 0; color: #9aa3b5; }

/* ---- "I'm probably — [pill]" rotator ---- */
#lh-head p.lh-rot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5em .6em; margin-top: 1.1em; font-size: clamp(15px, 1.3vw, 19px); color: #224bf0; font-weight: 500; }
.lh-pill { position: relative; display: inline-block; height: 2.3em; border-radius: 999px; background: #224bf0; color: #fff; overflow: hidden;
  transition: width .45s cubic-bezier(.3, 1.3, .5, 1); box-shadow: 0 .3em 1em rgba(34, 75, 240, .22); }
.lh-pill-in { position: absolute; left: 0; top: 0; height: 100%; display: inline-flex; align-items: center; gap: .7em; padding: 0 .32em 0 1em; white-space: nowrap;
  transition: transform .38s steps(5), opacity .38s steps(5); }
.lh-pill-in.enter { transform: translateY(100%); opacity: 0; transition: none; }
.lh-pill-in.out { transform: translateY(-100%); opacity: 0; }
.lh-pill-ic { display: inline-flex; gap: .28em; }
.lh-pill-ic img { width: 1.7em; height: 1.7em; border-radius: 22%; background: #fff; object-fit: cover; display: block; box-shadow: 0 0 0 1px rgba(255,255,255,.35);
  transform: scale(0); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); transition-delay: calc(.12s + var(--k) * .07s); }
.lh-pill-in.on .lh-pill-ic img { transform: none; }
@media (prefers-reduced-motion: reduce) { .lh-pill, .lh-pill-in, .lh-pill-ic img { transition: none; } }

/* ---- v57: two parts. 1 = headline with the pill in it, 2 = grey tagline + meta ---- */
#lh-head p.lh-h1.lh-rot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .3em .4em; margin: 0 0 1.5em !important;
  font-size: clamp(24px, 2.5vw, 38px); font-weight: 500; color: #111; letter-spacing: -.02em; line-height: 1.2; }
#lh-head .lh-rot .lh-pill { height: 1.55em; box-shadow: 0 .25em .9em rgba(34, 75, 240, .22); }
#lh-head .lh-rot .lh-pill-in { gap: .45em; padding: 0 .22em 0 .6em; }
#lh-head .lh-rot .lh-pill-ic { gap: .18em; }
#lh-head .lh-rot .lh-pill-ic img { width: 1.15em; height: 1.15em; border-radius: 24%; }
#lh-head p.lh-h2 { font-size: clamp(14px, 1.2vw, 17px); color: #4a4f5c; font-weight: 400; line-height: 1.5; }
#lh-head p.lh-h2 + p.lh-meta { margin-top: .55em; }
@media (max-width: 809.98px) { #lh-head p.lh-h1.lh-rot { font-size: 23px; margin-bottom: 1.1em !important; } }
#lh-head .lh-rot .lh-arr { color: #224bf0; }
#lh-head .lh-role { font-weight: 600; color: #111; }
#lh-head p.lh-h1.lh-rot + p.lh-meta { margin-top: 0; }
#lh-head p.lh-hi { margin: 0 0 .45em; font-size: clamp(16px, 1.45vw, 22px); color: #4a4f5c; font-weight: 400; letter-spacing: -.01em; }
#lh-head p.lh-hi b { color: #111; font-weight: 600; }
#lh-head p.lh-hi + p.lh-h1 { margin-top: 0; }

/* v64: tighter gap between the hero and Selected Work (Framer pads #work 200px) */
html body #work { padding-top: clamp(56px, 7vw, 104px) !important; }