@property --tilt-x{syntax:"<number>";inherits:true;initial-value:.5}@property --tilt-y{syntax:"<number>";inherits:true;initial-value:.5}@property --tilt-active{syntax:"<number>";inherits:true;initial-value:0}@property --tilt-tint{syntax:"<number>";inherits:true;initial-value:0}@layer components{.tilt-card{--tilt-hue:155;--tilt-face-from:oklch(100% calc(.02 * var(--tilt-tint)) var(--tilt-hue));--tilt-face-to:oklch(95.5% calc(.045 * var(--tilt-tint)) var(--tilt-hue));--tilt-glow:oklch(93% calc(.08 * var(--tilt-tint)) var(--tilt-hue));--tilt-edge:oklch(45% calc(.1 * var(--tilt-tint)) var(--tilt-hue));--tilt-rim:oklch(62% calc(.12 * var(--tilt-tint)) var(--tilt-hue));--tilt-ring:oklch(88% calc(.04 * var(--tilt-tint)) var(--tilt-hue));--tilt-ink:oklch(18% calc(.03 * var(--tilt-tint)) var(--tilt-hue));--tilt-ink-2:oklch(38% calc(.04 * var(--tilt-tint)) var(--tilt-hue));--tilt-dots:black;--tilt-shadow:#00000029;--tilt-range:14deg;--tilt-lift:1.25em;--tilt-glare-size:14em;--tilt-rx:calc((.5 - var(--tilt-y)) * var(--tilt-range));--tilt-ry:calc((var(--tilt-x) - .5) * var(--tilt-range));--tilt-at:calc(var(--tilt-x) * 100%) calc(var(--tilt-y) * 100%);color:var(--tilt-ink);background:radial-gradient(18em 18em at var(--tilt-at), color-mix(in oklab, var(--tilt-glow) calc(var(--tilt-active) * 50%), transparent), transparent 62%), linear-gradient(155deg, var(--tilt-face-from), var(--tilt-face-to));box-shadow:0 1px 1px var(--tilt-shadow), 0 14px 34px -14px var(--tilt-shadow), 0 44px 66px -34px var(--tilt-shadow);transform-style:preserve-3d;transform:perspective(60em) rotateX(var(--tilt-rx)) rotateY(var(--tilt-ry));transition:--tilt-x var(--motion-move) var(--ease-reveal), --tilt-y var(--motion-move) var(--ease-reveal), --tilt-active var(--motion-base) var(--ease-out), --tilt-tint var(--motion-move) var(--ease-out);border-radius:1.25em;display:grid;position:relative;&[data-tilt-active]{--tilt-active:1;transition-duration:var(--motion-base), var(--motion-base), var(--motion-base), var(--motion-move)}&[data-tilt-active],&:has(:focus-visible){--tilt-tint:1}&:after{--tilt-edge-angle:atan2(calc(var(--tilt-y) - .5), calc(var(--tilt-x) - .5));--tilt-rim-now:color-mix(in oklab, var(--tilt-rim) calc(var(--tilt-active) * 100%), var(--tilt-ring));content:"";border-radius:inherit;background:conic-gradient(from calc(var(--tilt-edge-angle) + 90deg), var(--tilt-rim-now), var(--tilt-ring) 70deg, var(--tilt-ring) 290deg, var(--tilt-rim-now));pointer-events:none;padding:1.5px;position:absolute;inset:0;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}}html[data-theme=dark] .tilt-card{--tilt-face-from:oklch(34% calc(.08 * var(--tilt-tint)) var(--tilt-hue));--tilt-face-to:oklch(15% calc(.04 * var(--tilt-tint)) var(--tilt-hue));--tilt-glow:oklch(72% calc(.13 * var(--tilt-tint)) var(--tilt-hue));--tilt-edge:oklch(80% calc(.12 * var(--tilt-tint)) var(--tilt-hue));--tilt-rim:color-mix(in oklab, var(--tilt-edge) 85%, white);--tilt-ring:color-mix(in oklab, var(--tilt-edge) 12%, transparent);--tilt-ink:oklch(98% calc(.01 * var(--tilt-tint)) var(--tilt-hue));--tilt-ink-2:oklch(86% calc(.035 * var(--tilt-tint)) var(--tilt-hue));--tilt-dots:white;--tilt-shadow:#0009}@media (prefers-color-scheme:dark){html:not([data-theme=light]) .tilt-card{--tilt-face-from:oklch(34% calc(.08 * var(--tilt-tint)) var(--tilt-hue));--tilt-face-to:oklch(15% calc(.04 * var(--tilt-tint)) var(--tilt-hue));--tilt-glow:oklch(72% calc(.13 * var(--tilt-tint)) var(--tilt-hue));--tilt-edge:oklch(80% calc(.12 * var(--tilt-tint)) var(--tilt-hue));--tilt-rim:color-mix(in oklab, var(--tilt-edge) 85%, white);--tilt-ring:color-mix(in oklab, var(--tilt-edge) 12%, transparent);--tilt-ink:oklch(98% calc(.01 * var(--tilt-tint)) var(--tilt-hue));--tilt-ink-2:oklch(86% calc(.035 * var(--tilt-tint)) var(--tilt-hue));--tilt-dots:white;--tilt-shadow:#0009}}.tilt-card__texture,.tilt-card__glare{border-radius:inherit;mix-blend-mode:soft-light;pointer-events:none;position:absolute;inset:0}.tilt-card__texture{background-image:radial-gradient(var(--tilt-dots) 1px, transparent 1.4px);mask:radial-gradient(circle var(--tilt-glare-size) at var(--tilt-at), #000, transparent 72%);opacity:calc(.04 + var(--tilt-active) * .22);background-size:11px 11px}.tilt-card__glare{background:radial-gradient(circle var(--tilt-glare-size) at var(--tilt-at), #fffc, transparent 70%);opacity:calc(var(--tilt-active) * .9)}.tilt-card__content{transform:translateZ(var(--tilt-lift));flex-direction:column;padding:1.5em;display:flex}@media (prefers-reduced-motion:reduce){.tilt-card{transform:none}}}.section.banner.home{--section-padding-block:3em 0;& h1{font-size:calc(5.7 * var(--vw));letter-spacing:-.035em;text-wrap:balance;max-inline-size:none;margin-block-end:.35em;line-height:.98}& .banner__head>p{font-size:var(--font-size-statement);max-inline-size:none;line-height:1.2}& .home-services{grid-auto-rows:auto auto auto;column-gap:1.5em;margin-block-start:2em;list-style:none;display:grid;@media (width>=40em){grid-template-columns:repeat(var(--count), minmax(0, 1fr))}@media (width>=60em){margin-block-start:3em}}& .home-service{grid-row:span 3;grid-template-rows:subgrid;display:grid;@media (width<40em){margin-block-end:1em}& .tilt-card{grid-row:1/-1;grid-template-rows:subgrid;&:has(a:focus-visible){outline:3px solid var(--clr-focus-ring);outline-offset:3px}}& .tilt-card__content{grid-row:1/-1;grid-template-rows:subgrid;padding-block-start:1.75em;padding-inline:2.25em;display:grid}& h2{overflow-wrap:break-word;color:inherit;margin-block:0 .4em;font-size:1.5em;line-height:1.1;& a{color:inherit;text-decoration:none;&:after{content:"";position:absolute;inset:0}&:focus-visible{outline:none}}}}& .home-service__icon{block-size:1.75em;inline-size:auto;color:var(--tilt-edge);justify-self:start;margin-block-end:.85em}@media (width<40em){& .home-service,& .home-service .tilt-card{grid-row:auto;grid-template-rows:none}& .home-service{& .tilt-card__content{grid-row:auto;grid-template-rows:auto 1fr;grid-template-columns:minmax(0,1fr) auto;column-gap:1.25em;padding-inline-end:2.25em}}& .home-service__icon{grid-area:1/2/-1;align-self:center;block-size:3em;margin:0}}& .home-service__sub{max-inline-size:36ch;color:var(--tilt-ink-2);margin:0}@media (prefers-reduced-motion:no-preference){& .home-service{animation:rise var(--motion-slow) var(--ease-reveal) calc(.53s + var(--i) * var(--motion-stagger)) both}}}.section.home-work{--section-padding-block:1.5em 3em;@media (width>=60em){--section-padding-block:3em}& .home-work__head{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.5em 2em;display:flex;& h2{margin:0}}& .home-work__projects{gap:2em;margin-block-start:2em;list-style:none;display:grid;@media (width>=40em){grid-template-columns:repeat(3,minmax(0,1fr))}}}@media (prefers-reduced-motion:no-preference){.section.home-work:not(:has([data-shot-shared])){animation:rise var(--motion-slow) var(--ease-reveal) var(--motion-draw) both}}@media (width>=80em){html[data-page=home]{--wide-col-gap:max(2em, 2.5 * var(--vw));& .section.banner.home{--section-padding-block:3em 1.5em;& .banner__head>p{font-size:max(var(--font-size-statement), 2.1 * var(--vw))}}& .section.home-work{& .home-work__projects{gap:var(--wide-col-gap)}& .project p.muted{max-inline-size:46ch}@media (width>=165em){& .project article{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:baseline;column-gap:2em;display:grid}& .project article>.project-shot{grid-column:1/-1}& .project article>:not(.project-shot){grid-column:1}& .project article>p.muted{grid-area:2/2/span 3}}}}}