:root{color-scheme:dark;--paper:#625568;--ink:#fff0f5;--muted:#e3d3df;--coral:#ffb4a5;--underline:#877d99;--primary:#e4bfd0;--primary-text:#51374b;--secondary:#c4dfed;--secondary-text:#443c54;--orbit:#ecc0d9;--ease:cubic-bezier(.16,1,.3,1)}*,*::before,*::after{box-sizing:border-box}html,body{height:100%}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}.page{height:100svh;height:100dvh;overflow:hidden;display:grid;place-items:center;padding:20px 22px;padding-top:calc(28px + env(safe-area-inset-top));padding-bottom:calc(28px + env(safe-area-inset-bottom));padding-left:calc(22px + env(safe-area-inset-left));padding-right:calc(22px + env(safe-area-inset-right))}.layout{position:relative;width:100%;max-width:1080px;max-height:100%;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;align-content:center;align-items:start;justify-items:start;row-gap:0}.col-figure{position:relative;z-index:1;grid-column:1;grid-row:2;justify-self:end;align-self:end;width:320px;margin:0;aspect-ratio:1448 / 2048}.col-links{position:relative;z-index:3;grid-column:1;grid-row:3;align-content:start;justify-self:start;animation:none}.figure{position:relative;width:100%;height:100%;animation:portrait-in 1.2s cubic-bezier(.22,.61,.36,1) .06s both;will-change:transform}.figure img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none;filter:brightness(.96) saturate(.94) drop-shadow(0 20px 26px rgba(40,31,51,.34)) drop-shadow(0 4px 10px rgba(40,31,51,.22));animation:character-drift 9.6s ease-in-out infinite;animation-delay:1.3s;will-change:transform}@media (hover:hover){.figure:hover img{animation-play-state:paused}}.spark{position:absolute;color:var(--orbit);pointer-events:none;will-change:transform;animation:spark-in 1.2s cubic-bezier(.22,.61,.36,1) both,spark-drift 8.3s ease-in-out infinite}@keyframes spark-drift{0%{transform:translate(0,0) rotate(0deg)}22%{transform:translate(4px,-9px) rotate(2deg)}48%{transform:translate(-5px,-4px) rotate(-1.6deg)}74%{transform:translate(2px,-7px) rotate(1deg)}100%{transform:translate(0,0) rotate(0deg)}}.spark--one{top:12%;right:-6%;font-size:22px;animation-delay:.22s,1.42s}.spark--two{left:-4%;bottom:34%;font-size:16px;color:var(--coral);animation-delay:.34s,2.4s;animation-duration:1.2s,10.7s;animation-name:spark-in,spark-drift-b}@keyframes spark-drift-b{0%{transform:translate(0,0) rotate(0deg)}18%{transform:translate(-4px,-6px) rotate(-2deg)}43%{transform:translate(3px,-10px) rotate(1.4deg)}69%{transform:translate(-3px,-3px) rotate(-.8deg)}100%{transform:translate(0,0) rotate(0deg)}}.col-text{display:grid;gap:0;min-width:0;align-content:start;justify-items:start}.col-text:not(.col-links){grid-column:1;grid-row:1;padding:0;animation:title-in 1.2s var(--ease) .06s both}.intro{padding-left:0;justify-self:start}h1{position:relative;isolation:isolate;margin:0;width:fit-content;font-size:clamp(56px,14vw,112px);font-weight:800;line-height:.92;letter-spacing:-.085em;white-space:nowrap;filter:drop-shadow(0 6px 12px rgba(40,31,51,.16))}h1::before{content:"";position:absolute;z-index:-1;left:4px;right:-14px;bottom:-4px;height:.17em;background:var(--underline);clip-path:polygon(4% 15%,100% 0,94% 85%,0 100%);transform:rotate(-4deg)}.about{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:0;width:fit-content;transform:rotate(-1.5deg);transform-origin:left center;filter:drop-shadow(0 4px 9px rgba(40,31,51,.1))}.about li{text-shadow:0 1px 4px rgba(40,31,51,.08);color:var(--muted);font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:17px;line-height:1.45;width:fit-content}.about li:nth-child(2){margin-left:14px;transform:rotate(1.2deg)}.links{display:grid;grid-auto-rows:min-content;gap:12px;width:244px;max-width:100%;margin:0;padding:0;list-style:none}.links li{width:100%;margin:0}.links li:nth-child(1){width:100%;margin-right:0}.links .ch-wrap{display:block;animation:levitate-soft 6.8s ease-in-out infinite;will-change:transform;filter:drop-shadow(0 6px 10px rgba(40,31,51,.16))}.links li:nth-child(2) .ch-wrap{animation-delay:-3.4s}.links li:hover .ch-wrap{animation-play-state:paused}.links li{animation:link-in 1.05s var(--ease) both}.links li:nth-child(1){animation-delay:.15s}.links li:nth-child(2){animation-delay:.3s}.links a{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:54px;padding:12px 14px;color:var(--primary-text);font-size:clamp(16px,3.8vw,21px);font-weight:800;letter-spacing:-.035em;text-decoration:none;transform:rotate(-4deg);filter:drop-shadow(0 7px 8px rgba(40,31,51,.14));transition:transform .3s var(--ease)}.links a::before{content:"";position:absolute;z-index:-1;inset:0;background:var(--primary);clip-path:polygon(0 0,88% 0,100% 28%,100% 100%,10% 100%,0 73%);transition:background-color .24s ease}.links a.gh{color:var(--secondary-text);transform:rotate(2.5deg)}.links a.gh::before{background:var(--secondary);clip-path:polygon(10% 0,100% 0,100% 72%,90% 100%,0 100%,0 28%)}.arrow{font-size:.95em;font-weight:700;line-height:1;letter-spacing:-.02em;transform:scaleY(.94);transition:transform .3s var(--ease)}.links a:focus-visible{outline:3px solid var(--coral);outline-offset:5px}@media (hover:hover){.links li:hover a{transform:translateY(-5px) rotate(0)}.links li:hover a::before{background:#eed0dd}.links li:hover a.gh::before{background:#d9edf7}}.links a:active{transform:scale(.96) rotate(0)}@media (max-width:559px){.layout{max-width:300px;margin:0 auto}.col-text:not(.col-links){position:relative;z-index:6;padding:0;margin-bottom:-14px}h1{font-size:clamp(64px,18vw,80px)}.about{margin-top:8px}.col-figure{justify-self:end;width:clamp(190px,58vw,235px);margin:0 0 -68px 0}.col-links{margin:6px 0 0;width:100%}.links{width:clamp(176px,54vw,204px);max-width:100%;gap:13px}.links a{min-height:50px;padding:11px 15px;font-size:18px}.links li{width:100%}.links li:nth-child(2){margin-left:5px;margin-right:-5px}.links .ch-wrap{animation:levitate-calm 9.4s ease-in-out infinite}.links li:nth-child(2) .ch-wrap{animation-delay:-4.7s}}@media (max-width:559px) and (max-height:700px){.layout{max-width:270px}h1{font-size:58px}.col-figure{width:190px;margin-bottom:-58px}.links{width:176px;gap:10px}.links a{min-height:44px;font-size:16px}}@media (min-width:560px){.layout{grid-template-columns:auto auto;grid-template-rows:auto auto;justify-content:center;justify-items:start;column-gap:clamp(16px,2vw,32px);row-gap:0;max-width:1080px;margin:0}.col-text:not(.col-links){grid-column:1;grid-row:1;justify-items:start;padding-bottom:0}.col-links{grid-column:1;grid-row:2;width:auto;justify-self:start;margin-top:0;z-index:auto}.col-figure{grid-column:2;grid-row:1 / span 2;z-index:auto;align-self:center;margin:0 0 0 10px;width:230px;justify-self:start}.intro{padding-left:0;justify-self:start}h1{font-size:clamp(84px,9vw,116px)}.links{width:215px;padding-left:0;margin-top:22px;gap:14px}.about li{font-size:clamp(16px,1.8vw,19px)}.about{margin-top:14px}.links li:nth-child(1){width:100%;margin-right:0}.links li{width:100%}.links li:nth-child(2){width:100%;margin-left:7px;margin-right:-7px}}@media (min-width:1100px){.col-figure{width:260px}}@keyframes title-in{from{opacity:0;transform:translateY(34px) rotate(1.5deg)}to{opacity:1;transform:translateY(0) rotate(0deg)}}@keyframes portrait-in{from{opacity:0;transform:translateY(50px) rotate(-3deg) scale(.94)}to{opacity:1;transform:translateY(0) rotate(0deg) scale(1)}}@keyframes link-in{from{opacity:0;transform:translateY(22px) rotate(-2deg) scale(.96)}to{opacity:1;transform:translateY(0) rotate(0deg) scale(1)}}@keyframes character-drift{0%,100%{transform:translate(0,0) rotate(0deg)}35%{transform:translate(-3px,-11px) rotate(-1deg)}70%{transform:translate(3px,-4px) rotate(.7deg)}}@keyframes levitate-soft{0%{transform:translate(0,0)}22%{transform:translate(1.5px,-3px)}46%{transform:translate(-1px,-4.5px)}68%{transform:translate(1.2px,-2px)}85%{transform:translate(-.6px,-3.4px)}100%{transform:translate(0,0)}}@keyframes levitate-calm{0%{transform:translate(0,0)}25%{transform:translate(.8px,-2px)}50%{transform:translate(-.6px,-2.8px)}75%{transform:translate(.5px,-1.2px)}100%{transform:translate(0,0)}}@keyframes spark-in{from{opacity:0;transform:translateY(20px) rotate(-12deg) scale(.7)}to{opacity:1;transform:translateY(0) rotate(0deg) scale(1)}}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important;transition:none !important}}
