@font-face{font-family:"Neue Haas Grotesk Text";src:url('assets/neue-haas-grotesk-text-400.woff2') format('woff2');font-display:swap;font-style:normal;font-weight:400}
@font-face{font-family:Hero;src:url('assets/hero.ttf') format('truetype');font-display:swap;font-weight:700}
@font-face{font-family:"Swear Text Cilati";src:url('assets/swear-text-cilati-800.woff2') format('woff2');font-display:swap;font-style:normal;font-weight:800}
/* Hanken Grotesk (OFL, licence in assets/hanken-grotesk-OFL.txt): a free stand-in for chrisaalid.com's Graphik. */
@font-face{font-family:"Hanken Grotesk";src:url('assets/hanken-grotesk-variable.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
:root{--font-sans:"Hanken Grotesk",-apple-system,system-ui,"Segoe UI",sans-serif;--paper:#ecebe4;--ink:#292b27;--muted:#c8c9c2;--elastic:linear(0,.5737 7.6%,.8382 11.87%,.9463 14.19%,1.0292 16.54%,1.0886 18.97%,1.1258 21.53%,1.137 22.97%,1.1424 24.48%,1.1423 26.1%,1.1366 27.86%,1.1165 31.01%,1.0507 38.62%,1.0219 42.57%,.9995 46.99%,.9872 51.63%,.9842 58.77%,1.0011 81.26%,1)}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,sans-serif}.hero{min-height:100svh;display:grid;grid-template-rows:1fr;align-items:center;justify-items:center;padding:36px 24px;overflow:clip}.hero-mid{width:min(100%,1440px);display:flex;flex-direction:column;align-items:center;gap:44px;container-type:inline-size}h1{font-family:Hero,'Arial Narrow',Impact,sans-serif;font-weight:700;text-align:center;line-height:.98;letter-spacing:-.025em;margin:0}h1{font-size:clamp(43px,7.1vw,98px);white-space:nowrap}.cards{width:100%;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;pointer-events:none;padding:5px 0}.card{width:min(380px,29%);aspect-ratio:1;border-radius:40px;position:relative;flex-shrink:0;scale:1}.card:not(:last-child){margin-right:-6%}.card-art{width:100%;height:100%;border-radius:inherit;translate:calc(var(--x,0)*1px) calc(var(--y,0)*1px + var(--base-y));rotate:calc(var(--angle) - var(--velocity,0)*.25deg);box-shadow:0 16px 22px -12px #26271e45,0 5px 9px -4px #26271e1a}.card img,.card video,.card-color{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit;pointer-events:auto;user-select:none;-webkit-user-drag:none}.entering .card{animation:appear 1s var(--elastic) both;animation-delay:calc(.4s + var(--index)*.08s)}@keyframes appear{from{scale:0}to{scale:1}}
@media(max-width:600px){.hero{padding:28px 16px}.hero-mid{gap:35px}h1{font-size:clamp(31px,8.3vw,50px)}.card{border-radius:40px;width:27%}.card:not(:last-child){margin-right:-7%}}
@media(prefers-reduced-motion:reduce){.entering .card{animation:none}.card-art{translate:0 var(--base-y);rotate:var(--angle)}}

/* A fixed hit area keeps the turning head easy to point at. */
.avatar-link{position:fixed;top:24px;left:24px;z-index:5;display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:#d4d4d4;color:var(--ink);box-shadow:0 18px 32px -12px #292b2738;text-decoration:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.avatar-art{display:block;width:100%;height:100%;transition:transform 150ms cubic-bezier(.215,.61,.355,1);pointer-events:none}
.avatar-art svg{display:block;width:100%;height:100%}
.avatar-art svg path{fill:var(--ink)!important;stroke:var(--ink)!important}
.avatar-fallback{display:grid;place-items:center;width:100%;height:100%;font-size:18px;font-weight:bold}

.avatar-link:focus-visible,.back-link:focus-visible{outline:2px solid var(--ink);outline-offset:5px}
.about-page{min-height:100svh;max-width:850px;margin:auto;padding:150px 24px 80px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.about-eyebrow{font-size:10px;font-weight:700;letter-spacing:.14em;margin:0 0 32px}
.about-page h1{font-size:clamp(64px,12vw,140px)}
.about-intro{font-family:Hero,'Arial Narrow',Impact,sans-serif;font-size:clamp(28px,5vw,48px);margin:30px 0 12px}
.about-note{color:#72746b;font-size:14px;line-height:1.5}
.back-link{margin-top:35px;color:var(--ink);font-size:13px;text-underline-offset:5px}
@media(max-width:600px){.avatar-link{top:16px;left:16px;width:52px;height:52px}.about-page{padding-top:110px}}
@media(prefers-reduced-motion:reduce){.avatar-art{transition:none}.avatar-link:active .avatar-art{transform:none}}

/* Intro typography matches jennywen.ca. */
.hero-intro{margin:0;font-family:var(--font-sans);font-weight:400;font-size:18px;color:#000;text-align:center;max-width:clamp(440px,22vw + 300px,640px);letter-spacing:-.4px;padding:0 20px;line-height:1.625;white-space:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-stroke:0}
@media(max-width:767px){.hero-intro{font-size:18px;width:100vw;max-width:100vw;letter-spacing:-.4px;line-height:1.625;padding-left:max(24px,env(safe-area-inset-left),calc((100vw - 348px)/2));padding-right:max(24px,env(safe-area-inset-right),calc((100vw - 348px)/2))}}

/* Name matches jennywen.ca: Swear Text Cilati Extra Bold, 96px / 72px. */
.hero-name{margin:0 0 24px;font-family:"Swear Text Cilati",ui-serif,Georgia,Cambria,"Times New Roman",Times,serif;font-size:96px;font-weight:800;font-style:normal;line-height:1;letter-spacing:-.025em;color:#000;text-align:center;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
@media(max-width:767px){.hero-name{font-size:72px}}

/* Linear-inspired hero: fade and sharpen while settling from 20% below.
   Timing is adapted for this paragraph; no per-word clipping or rotation. */
.hero-name,.hero-intro,.work-label{animation:intro-focus 1000ms cubic-bezier(.22,1,.36,1);animation-delay:100ms;animation-fill-mode:backwards}
@keyframes intro-focus{from{opacity:0;filter:blur(10px);transform:translateY(20%)}to{opacity:1;filter:blur(0);transform:translateY(0)}}
@keyframes intro-fade{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.hero-name,.hero-intro,.work-label{animation:intro-fade 180ms cubic-bezier(.22,.61,.36,1);animation-delay:0ms;animation-fill-mode:backwards}}

/* Give the longer introduction two balanced lines on large screens. */
@media(min-width:1024px){.hero-intro{width:100%;max-width:860px;text-wrap:balance}}

/* Space the work label 80px after the intro and 60px before the cards. */
.hero-mid{gap:0}
.work-label{margin:40px 0 60px;font-family:var(--font-sans);font-size:18px;font-weight:400;line-height:1.4;color:#000;text-align:center;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

@media(max-width:767px){.work-label{font-size:18px}}

/* Keep laptop cards at the requested size; overlap absorbs limited row width. */
@media(min-width:1024px){
 .card{width:380px}
 .card:not(:last-child){margin-right:min(-6%,calc((100% - 1560px)/3))}
}

/* Perspective portrait tilt. The surrounding link stays still and clickable. */
.avatar-art{position:relative;border-radius:50%;overflow:hidden;transform:perspective(320px) rotateX(0deg) rotateY(0deg) translateZ(0);transform-origin:50% 50%;transition:transform 420ms cubic-bezier(.215,.61,.355,1);backface-visibility:hidden}
.avatar-link[data-tracking] .avatar-art{transition-duration:160ms}
.avatar-portrait{position:absolute;left:50%;top:50%;width:160%;height:160%;max-width:none;object-fit:contain;transform:translate(-50%,-50%);transition:transform 140ms cubic-bezier(.215,.61,.355,1);user-select:none;-webkit-user-drag:none}
.avatar-link:active .avatar-portrait{transform:translate(-50%,-50%) scale(.97)}
@media(prefers-reduced-motion:reduce){.avatar-art{transition:none;transform:none!important}.avatar-portrait{transition:none}.avatar-link:active .avatar-portrait{transform:translate(-50%,-50%)}}

/* Fit the tilted card silhouettes into the remaining viewport, with 40px clear below their shadows. */
.cards[data-fitted]{align-items:flex-start;justify-content:flex-start;height:var(--cards-height);padding:var(--cards-top) var(--cards-right) var(--cards-bottom) var(--cards-left);margin-top:var(--cards-gap)}
.cards[data-fitted] .card{width:var(--card-size)}
.cards[data-fitted] .card:not(:last-child){margin-right:var(--card-spacing)}
.site-header + .hero:has(.cards[data-fitted]){padding-bottom:64px}
.hero-mid:has(.cards[data-fitted]) .work-label{--work-min-gap:40px;margin-top:40px;margin-bottom:0}

/* The HTML card row stays visible while scripts, fonts and images load. */
.cards:not([data-fitted]) .card{width:23%}
.cards:not([data-fitted]) .card:not(:last-child){margin-right:-4.5%}

/* Claire.io-style company cursor: a 36px tile centered on the pointer. */
.company-link{position:relative;display:inline-block;color:inherit;text-decoration-line:underline;text-decoration-style:dashed;text-decoration-color:rgb(0 0 0 / 28%);text-decoration-thickness:1px;text-underline-offset:3px}
.company-link:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:2px}
.company-logo-cursor{position:fixed;left:0;top:0;width:36px;height:36px;z-index:20;pointer-events:none;border-radius:6px;overflow:hidden;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;transform:translate(-50%,-50%)}
.company-logo-cursor img{display:block;width:36px;height:36px;object-fit:contain}
@media(hover:hover) and (pointer:fine){.company-link:hover{cursor:none}}

/* Claire.io cursor: 10px rounded square, tracking the pointer without lag. */
.page-cursor{position:fixed;left:0;top:0;width:10px;height:10px;border-radius:50%;background:#acabad;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);pointer-events:none;z-index:9999}
@media(hover:hover) and (pointer:fine){
 html.custom-pointer,html.custom-pointer *,html.custom-pointer *::before,html.custom-pointer *::after{cursor:none!important}
 html:has(.company-logo-cursor:not([hidden])) .page-cursor,html:has(.about-cursor.is-visible) .page-cursor{visibility:hidden}
}
@media(hover:none),(pointer:coarse){.page-cursor{display:none}}

.card-video{background:#111}
.card-open{position:absolute;inset:0;z-index:1;width:100%;height:100%;padding:0;border:0;border-radius:inherit;background:transparent;pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent}
.card-open:focus-visible{outline:3px solid var(--ink);outline-offset:4px;box-shadow:0 0 0 4px #fff}

.card-site-link{display:block;position:relative;width:100%;height:100%;border-radius:inherit;pointer-events:auto;color:#292b27;text-decoration:none}
.card-site-link:focus-visible{outline:2px solid currentColor;outline-offset:5px}
.card-site-caption{position:absolute;left:12px;bottom:12px;padding:6px 10px;border-radius:20px;background:#fffffff0;box-shadow:0 2px 8px #00000014;font:12px/1.4 var(--font-sans);letter-spacing:.01em}

/* Shared horizontal grid for the header and main content. */
:root{--content-max:1440px;--content-gutter:24px}
.hero{padding-inline:var(--content-gutter)}
.hero-mid{width:min(100%,var(--content-max))}
.hero-intro{align-self:flex-start;width:100%;max-width:820px;padding-inline:0;text-align:left;text-wrap:pretty}
@media(max-width:600px){:root{--content-gutter:16px}}

.work-label{align-self:flex-start;text-align:left}
.card video.card-media-contain{object-fit:contain;background:#fff}

/* Narrow layouts follow content instead of filling the viewport height. */
@media(max-width:1000px){
 .site-header + .hero:has(.cards[data-fitted]){padding-bottom:40px}
}

/* Two readable rows in narrow windows, with room for the rotated corners. */
@media(max-width:900px){
 .cards,.cards[data-fitted]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;row-gap:28px;height:auto;padding:6px;margin-top:32px}
 .cards:not([data-fitted]) .card,.cards[data-fitted] .card{width:100%;--base-y:0% !important}
 .cards:not([data-fitted]) .card:not(:last-child),.cards[data-fitted] .card:not(:last-child){margin-right:0}
 .cards .card:nth-child(odd){--angle:2deg !important}
 .cards .card:nth-child(even){--angle:-2deg !important}
}
/* Narrow screens: one flat, still card per row. */
@media(max-width:900px){
 .cards,.cards[data-fitted]{grid-template-columns:minmax(0,1fr);row-gap:40px}
 /* Position the art so its overflow clips the project peek inside the card. */
 .cards .card-art{position:relative}
 .cards .card:nth-child(n){--angle:0deg !important}
 .cards .card-art{translate:none !important;rotate:none !important}
 .entering .card{animation:none}
}

/* Keep the fourth project in front of the fifth where their cards overlap. */
.cards > .card:nth-child(4){z-index:1}

.card-art:has(.thunder-thumbnail){overflow:hidden;background:#fff}
.card video.thunder-thumbnail{transform:scale(1.45);transform-origin:center}

/* Hanken Grotesk spacing for 17-18px reading text, across every breakpoint above. */
.hero-intro,.work-label{letter-spacing:-.01em;line-height:1.45}

/* Visually hidden text for headings and project summaries read by screen readers and search engines. */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}