/* VELCATRIA / BLOOM AFTER DARK — Atelier edition
   Matte surfaces, illustrated linework and tactile microinteractions.
   The sakura artwork is hand-tuned procedural SVG; falling petals use Canvas.
*/
:root {
  --night:#171321;
  --nightdeep:#100e18;
  --plum:#392449;
  --lavender:#B995E8;
  --pink:#F17BCB;
  --blue:#35C9FF;
  --white:#F5EAF8;
  --hair:rgba(185,149,232,.23);
  --serif:'Bodoni Moda','Bodoni MT','Didot',Georgia,serif;
  --mono:'DM Mono',Consolas,monospace;
  --sans:'DM Sans','Helvetica Neue',Arial,sans-serif;
}
*,*::before,*::after {box-sizing:border-box}
html {scroll-behavior:smooth}
body {margin:0;overflow-x:hidden;background:var(--nightdeep);color:var(--white);font-family:var(--sans);-webkit-font-smoothing:antialiased}
a {color:inherit;text-decoration:none}
a:focus-visible {outline:2px solid var(--blue);outline-offset:4px}
::selection {color:var(--night);background:var(--pink)}
#petals {position:fixed;inset:0;width:100%;height:100%;z-index:9;pointer-events:none;opacity:.92}
.grain {position:fixed;inset:0;z-index:10;pointer-events:none;opacity:.13;mix-blend-mode:screen;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.91' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E")}
.site {position:relative;isolation:isolate;min-height:100vh;background:radial-gradient(ellipse 70% 65% at 76% 36%,#271832 0%,var(--night) 67%,#15121f 100%);overflow:hidden}
.site::before {content:"";pointer-events:none;position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,transparent 6.3%,rgba(185,149,232,.055) 6.35%,transparent 6.4%,transparent 93.65%,rgba(185,149,232,.055) 93.7%,transparent 93.75%)}
main {position:relative}

/* Opening — deliberate omission of any masthead/menu. */
.hero {position:relative;max-width:1800px;min-height:542px;margin:auto;overflow:hidden;border-bottom:1px solid var(--hair)}
.hero-chromatic {position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 33% 50% at 73% 40%,rgba(148,53,143,.16),transparent 82%),radial-gradient(ellipse 17% 18% at 91% 13%,rgba(53,201,255,.055),transparent 92%)}
.botanical {position:absolute;width:780px;height:806px;right:2.8%;top:-151px;z-index:1;pointer-events:none;transform:rotate(-11deg);transform-origin:57% 50%;will-change:transform;filter:drop-shadow(0 0 18px rgba(241,123,203,.08));opacity:.96}
.botanical-halo {position:absolute;inset:19% 6% 11% 12%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(119,63,145,.3),rgba(57,36,73,.12) 55%,transparent 72%);filter:blur(35px)}
.botanical-svg {display:block;position:relative;width:100%;height:auto;user-select:none}
.botanical-ring {position:absolute;width:61%;height:61%;right:8.5%;top:15.5%;border:1px solid rgba(185,149,232,.085);border-radius:50%;z-index:-1}
.hero-identity {position:relative;z-index:3;max-width:calc(100% - 180px);padding:88px 0 30px 8.4%}
h1 {font:400 clamp(90px,10.9vw,172px)/.98 var(--serif);letter-spacing:-.088em;margin:20px 0 17px -8px;text-transform:lowercase;white-space:nowrap;text-shadow:0 2px 40px rgba(23,19,33,.36)}
.name-period {color:var(--pink);font-style:italic;letter-spacing:-.06em}
.hero-italic {font:400 clamp(26px,2.5vw,37px)/1.24 var(--serif);letter-spacing:-.035em;margin:0 0 20px;color:var(--white)}
.hero-italic em {font-weight:400;color:var(--lavender)}
.commission-link {display:flex;align-items:center;position:relative;width:min(100%,468px);gap:16px;margin-top:41px;padding:18px 17px 18px 13px;border:1px solid rgba(241,123,203,.58);border-radius:4px 18px 4px 18px;background:#25162e;box-shadow:6px 6px 0 rgba(8,6,14,.32);transition:background .32s ease,border-color .32s ease,box-shadow .32s ease,transform .32s ease;overflow:hidden}
.commission-link::before {content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(241,123,203,.13),transparent 70%);transform:translateX(-110%);transition:transform .55s cubic-bezier(.16,1,.3,1)}
.commission-link::after {content:"";position:absolute;inset:5px;border:1px solid rgba(241,123,203,.10);border-radius:2px 14px 2px 14px;pointer-events:none}
.commission-link:hover,.commission-link:focus-visible {background:#32203e;border-color:var(--pink);box-shadow:9px 9px 0 rgba(8,6,14,.32);transform:translate(-2px,-2px)}
.commission-link:hover::before,.commission-link:focus-visible::before {transform:translateX(0)}
.commission-symbol {z-index:1;font:34px var(--serif);color:var(--pink);line-height:1;padding-left:5px;transition:transform .45s}
.commission-link:hover .commission-symbol {transform:rotate(45deg)}
.commission-details {position:relative;z-index:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.commission-details small {font:400 9px var(--mono);letter-spacing:.12em;color:var(--lavender)}
.commission-details strong {font:400 20px/1.3 var(--serif);white-space:nowrap;color:var(--white);letter-spacing:-.02em}
.commission-arrow {position:relative;z-index:1;margin-left:auto;font:400 26px var(--serif);color:var(--pink);transition:transform .35s}
.commission-link:hover .commission-arrow {transform:translate(4px,-4px)}
.artist-label {position:absolute;z-index:5;right:11.5%;bottom:39px;display:flex;align-items:center;gap:17px;padding:14px 21px 14px 14px;background:#171321;border:1px solid rgba(241,123,203,.52);box-shadow:8px 8px 0 rgba(23,19,33,.7);transform:rotate(4deg)}
.portrait-frame {width:98px;height:98px;flex:none;border:1px solid rgba(185,149,232,.5);overflow:hidden}
.portrait-frame img {width:100%;height:100%;object-fit:cover;display:block}
.portrait-words {display:flex;flex-direction:column;gap:5px}
.portrait-words span {font:400 9px var(--mono);letter-spacing:.12em;color:var(--lavender)}
.portrait-words strong {font:italic 400 25px var(--serif);letter-spacing:-.03em}
.artist-label-edge {align-self:flex-start;color:var(--pink);font:400 9px var(--mono);margin:-3px -7px 0 12px}

/* Social gallery: five individual matte prints, never translucent glass. */
.socials {position:relative;z-index:4;max-width:1550px;margin:auto;padding:24px 6.3% 28px}
.socials-title {display:flex;align-items:baseline;gap:10px;padding:0 2px 14px;color:var(--lavender)}
.socials-label {font:400 9px var(--mono);letter-spacing:.17em}
.socials-title strong {font:400 23px var(--serif);letter-spacing:-.04em;color:var(--white)}
.socials-title strong span {color:var(--pink)}
.socials-hint {margin-left:auto;font:400 8px var(--mono);letter-spacing:.13em;color:rgba(185,149,232,.66)}
.social-grid {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:13px;align-items:stretch;perspective:1200px}
.social-card {
  --card-accent:var(--pink);
  --card-accent-rgb:241,123,203;
  --mx:50%;--my:30%;--tilt-x:0deg;--tilt-y:0deg;
  display:flex;flex-direction:column;justify-content:space-between;min-width:0;min-height:184px;
  position:relative;isolation:isolate;overflow:hidden;padding:15px 16px 17px;
  border:1px solid rgba(185,149,232,.42);border-radius:3px 18px 3px 18px;
  background:#1d1629;
  box-shadow:0 7px 0 rgba(8,6,14,.18),inset 0 0 0 1px rgba(245,234,248,.035);
  transform:perspective(800px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition:transform .48s cubic-bezier(.16,1,.3,1),border-color .38s,background-color .38s,box-shadow .38s;
  -webkit-tap-highlight-color:transparent;
}
.social-card::before {content:"";position:absolute;pointer-events:none;inset:7px;border:1px solid rgba(185,149,232,.095);border-radius:1px 12px 1px 12px;z-index:-1}
.social-card::after {content:"";position:absolute;pointer-events:none;z-index:3;top:15px;left:14px;width:3px;height:3px;border-radius:50%;background:var(--card-accent);box-shadow:0 0 0 3px rgba(var(--card-accent-rgb),.09);opacity:0;transition:opacity .3s}
.social-card--instagram {--card-accent:#F17BCB;--card-accent-rgb:241,123,203}
.social-card--x {--card-accent:#B995E8;--card-accent-rgb:185,149,232}
.social-card--kofi {--card-accent:#e9a7d9;--card-accent-rgb:233,167,217}
.social-card--vgen {--card-accent:#F17BCB;--card-accent-rgb:241,123,203;background:#28172f;border-color:rgba(241,123,203,.62)}
.social-card--mail {--card-accent:#35C9FF;--card-accent-rgb:53,201,255}
.card-spot {position:absolute;z-index:-1;inset:0;pointer-events:none;opacity:0;background:radial-gradient(190px circle at var(--mx) var(--my),rgba(var(--card-accent-rgb),.19),transparent 75%),linear-gradient(158deg,rgba(var(--card-accent-rgb),.07),transparent 55%);transition:opacity .45s}
.card-etch {position:absolute;pointer-events:none;right:-12px;top:0;height:100%;width:auto;color:var(--card-accent);opacity:.23;transform:translate(9px,9px) rotate(2deg);transition:opacity .6s,transform .9s cubic-bezier(.16,1,.3,1)}
.card-etch--star {right:-8px;top:-8px;height:112%}
.card-upper {position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-start;gap:5px}
.card-icon {width:43px;height:43px;flex:none;color:var(--card-accent);transition:transform .65s cubic-bezier(.16,1,.3,1),color .35s}
.card-index {font:400 8px var(--mono);letter-spacing:.06em;color:rgba(185,149,232,.78);padding-top:3px;white-space:nowrap}
.card-copy {position:relative;z-index:2;display:flex;flex-direction:column;gap:7px;margin:30px 25px 0 0}
.card-name {font:400 clamp(22px,2.05vw,31px)/1.1 var(--serif);letter-spacing:-.052em;white-space:nowrap;transition:transform .42s cubic-bezier(.16,1,.3,1)}
.card-subtitle {font:400 8px var(--mono);letter-spacing:.07em;color:rgba(185,149,232,.85);white-space:nowrap}
.card-arrow {position:absolute;z-index:2;right:14px;bottom:15px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1px solid rgba(185,149,232,.38);color:var(--white);font:400 19px var(--serif);transition:border-color .36s,background .36s,transform .48s cubic-bezier(.16,1,.3,1),color .36s}
.card-arrow span {display:block;line-height:1;transform:translateY(-1px)}
.card-progress {position:absolute;z-index:3;bottom:0;left:0;right:0;height:2px;background:var(--card-accent);transform:scaleX(0);transform-origin:left center;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.social-card:hover,.social-card:focus-visible {background:#291b35;border-color:var(--card-accent);box-shadow:0 12px 0 rgba(8,6,14,.22),0 20px 34px rgba(8,6,14,.24),inset 0 0 0 1px rgba(245,234,248,.04);transform:perspective(800px) translateY(-5px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y))}
.social-card:hover .card-spot,.social-card:focus-visible .card-spot {opacity:1}
.social-card:hover .card-etch,.social-card:focus-visible .card-etch {opacity:.47;transform:translate(-2px,-5px) rotate(-1deg)}
.social-card:hover .card-icon,.social-card:focus-visible .card-icon {transform:translateY(-3px) rotate(-7deg) scale(1.06)}
.social-card:hover .card-name,.social-card:focus-visible .card-name {transform:translateY(-3px)}
.social-card:hover .card-arrow,.social-card:focus-visible .card-arrow {transform:translate(2px,-2px);color:var(--night);background:var(--card-accent);border-color:var(--card-accent)}
.social-card:hover .card-progress,.social-card:focus-visible .card-progress {transform:scaleX(1)}
/* Five distinct little animations — not a repeated generic hover. */
.social-card--instagram:hover .icon-instagram {transform:translateY(-3px) rotate(-7deg) scale(1.08)}
.social-card--x:hover .card-etch {transform:translate(-12px,-9px) rotate(-3deg)}
.coffee-steam {transform-origin:50% 15%;opacity:0;transition:opacity .35s,transform .55s}
.social-card--kofi:hover .coffee-steam,.social-card--kofi:focus-visible .coffee-steam {opacity:1;transform:translateY(-3px)}
.social-card--kofi:hover .coffee-heart {animation:heart-beat .85s ease-in-out}
.social-card--vgen:hover .card-etch--star,.social-card--vgen:focus-visible .card-etch--star {opacity:.48;transform:translate(-7px,-6px) rotate(15deg) scale(1.05)}
.mail-flap {transform-origin:50% 28%;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.social-card--mail:hover .mail-flap,.social-card--mail:focus-visible .mail-flap {transform:translateY(-4px)}
@keyframes heart-beat {0%,100%{transform:scale(1)}40%{transform:scale(1.08)}}

footer {min-height:66px;margin:0 6.5%;display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid rgba(185,149,232,.12);font:400 9px var(--mono);letter-spacing:.12em;color:rgba(245,234,248,.55)}
footer a {color:rgba(245,234,248,.72)}footer a:hover {color:var(--pink)}footer a span {color:var(--pink)}
.footer-center {color:rgba(185,149,232,.5)}.star {color:var(--pink);margin-right:12px;font-size:16px;vertical-align:middle}

@media (min-width:1700px) {
  .hero {min-height:646px}
  .botanical {width:920px;height:945px;top:-157px;right:2%}
  .hero-identity {padding-top:125px}
  .artist-label {bottom:65px}
  .portrait-frame {width:112px;height:112px}
  .socials {padding-top:28px;padding-bottom:34px}
  .social-card {min-height:197px}
}
@media (max-width:1250px) {
  .hero-identity {max-width:100%;padding-left:6.8%;padding-top:83px}
  h1 {font-size:clamp(85px,12vw,139px)}
  .botanical {right:-115px;top:-100px;width:718px;height:750px;opacity:.84}
  .artist-label {right:6%;bottom:26px}
  .socials {padding-inline:5%}
  .social-grid {gap:10px}
  .social-card {padding:13px 12px 16px;min-height:173px}
  .card-name {font-size:clamp(19px,2.25vw,29px)}
  .card-etch {opacity:.17}
  .card-arrow {width:29px;height:29px;right:10px;bottom:11px}
  .card-copy {margin-right:19px}
}
@media (max-width:860px) {
  .social-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
  .social-card {min-height:179px}
  .social-card:nth-last-child(-n+2) {min-height:169px}
  .hero {min-height:560px}
}
@media (max-width:600px) {
  .site {background:radial-gradient(ellipse 105% 45% at 90% 27%,#2b1a39 0%,#171321 80%)}
  .hero {min-height:580px}
  .hero-identity {max-width:100%;padding:62px 22px 25px}
  h1 {font-size:clamp(65px,13.3vw,97px);margin:18px 0 17px -5px;letter-spacing:-.078em}
  .hero-italic {font-size:clamp(25px,6.6vw,32px);margin-bottom:13px;max-width:355px}
  .commission-link {margin-top:29px;max-width:420px;padding:16px 11px 16px 11px;gap:10px}
  .commission-symbol {font-size:28px}
  .commission-details small {font-size:8px}
  .commission-details strong {font-size:18px;white-space:normal}
  .commission-arrow {font-size:23px}
  .botanical {width:660px;height:680px;right:-320px;top:90px;transform:rotate(-10deg);opacity:.89}
  .botanical::before {content:'';position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,#171321 0%,rgba(23,19,33,.7) 25%,rgba(23,19,33,.05) 58%,transparent 100%)}
  .hero-chromatic {background:radial-gradient(ellipse 55% 50% at 90% 60%,rgba(147,67,174,.12),transparent 86%)}
  .artist-label {left:22px;right:auto;bottom:30px;transform:rotate(-3deg);padding:9px 11px 9px 9px;gap:11px}
  .portrait-frame {width:68px;height:68px}
  .portrait-words span {font-size:7px}
  .portrait-words strong {font-size:21px}
  .artist-label-edge {font-size:7px}
  .socials {padding:28px 22px 31px}
  .socials-title {gap:9px;padding-bottom:16px}
  .socials-title strong {font-size:25px}
  .socials-hint {font-size:7px}
  .social-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
  .social-card {min-height:169px;padding:13px 13px 16px;border-radius:3px 16px 3px 16px}
  .social-card:nth-last-child(-n+2) {min-height:169px}
  .social-card:last-child {grid-column:1/-1;min-height:130px}
  .social-card:last-child .card-etch {height:157px;right:0;top:-12px}
  .card-icon {width:39px;height:39px}
  .card-name {font-size:clamp(22px,6vw,28px)}
  .card-copy {margin:27px 22px 0 0;gap:6px}
  /* On narrow touch screens the arrow lives in the upper corner. It never
     collides with the link label or the description. */
  .card-index {display:none}
  .card-arrow {width:31px;height:31px;right:12px;top:14px;bottom:auto}
  .card-copy {margin-right:0}
  .social-card:last-child {flex-direction:row;align-items:center;min-height:112px}
  .social-card:last-child .card-upper {flex:0 0 auto}
  .social-card:last-child .card-copy {margin:0 8px 0 17px}
  .social-card:last-child .card-arrow {position:relative;top:auto;right:auto;bottom:auto;margin-left:auto;flex:0 0 auto}
  footer {margin:0 22px;min-height:78px;font-size:8px}
  .footer-center {display:none}
}
@media (max-width:390px) {
  .hero {min-height:558px}
  .hero-identity {padding:52px 20px 15px}
  h1 {font-size:clamp(59px,13.2vw,70px)}
  .hero-italic {font-size:24px}
  .botanical {right:-365px;top:95px}
  .commission-details strong {font-size:16px}
  .socials {padding-inline:17px}
  .social-card {min-height:160px;padding:12px}
  .social-card:nth-last-child(-n+2) {min-height:160px}
  .card-name {font-size:clamp(20px,5.9vw,25px)}
  .card-subtitle {font-size:7px}
  .artist-label {left:18px}
  footer {margin:0 17px}
}
@media (max-width:345px) {
  h1 {font-size:58px}
  .hero-identity {padding-left:16px;padding-right:16px}
  .socials {padding-inline:13px}
  .social-grid {gap:8px}
  .card-name {font-size:20px}
  .card-copy {margin-right:15px}
  .card-arrow {width:26px;height:26px;right:9px;bottom:10px}
}
@media (hover:none) {
  .social-card {transform:none!important}
  .social-card:active {border-color:var(--card-accent);background:#291b35}
}
@media (prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto}
  *,*::before,*::after {animation:none!important;transition:none!important}
  .social-card {transform:none!important}
}

/* ===== Pixel cat (cat-links.js + cat.js) =====
   She sleeps above the link cards; clicking a link makes her jump onto it,
   and the link opens once she has landed. */
.site .cg-sprite>i {filter:drop-shadow(0 0 1px rgba(185,149,232,.55)) drop-shadow(0 0 7px rgba(185,149,232,.18))}
.social-card.cg-pressed,.social-card.cg-pressed:hover,.social-card.cg-pressed:focus-visible {transform:perspective(800px) translateY(var(--cg-press,3px))!important;transition-duration:.08s;border-color:var(--card-accent)}
.commission-link.cg-pressed,.commission-link.cg-pressed:hover,.commission-link.cg-pressed:focus-visible {transform:translateY(var(--cg-press,3px));box-shadow:3px 3px 0 rgba(8,6,14,.32);transition-duration:.08s}
footer a.cg-pressed {transform:translateY(var(--cg-press,3px))}

/* ===== Fit the links on one screen (desktop) =====
   On shorter browser windows the hero shrinks a little (less top space, a slightly
   smaller name, shorter cards), so all five link cards stay fully visible without
   scrolling. On tall screens every value hits its maximum, so the design is unchanged. */
@media (min-width:861px) {
  .hero {min-height:clamp(380px,calc(100vh - 292px),542px)}
  .hero-identity {padding-top:clamp(30px,calc((100vh - 560px) * .5),88px)}
  h1 {font-size:clamp(84px,min(10.9vw,19vh),172px)}
  .social-card {min-height:clamp(150px,21vh,184px)}
}
@media (min-width:861px) and (max-width:1250px) {
  .hero-identity {padding-top:clamp(30px,calc((100vh - 560px) * .5),83px)}
  h1 {font-size:clamp(80px,min(12vw,19vh),139px)}
  .social-card {min-height:clamp(150px,21vh,173px)}
}
@media (min-width:1700px) {
  .hero {min-height:clamp(420px,calc(100vh - 300px),646px)}
  .hero-identity {padding-top:clamp(40px,calc((100vh - 640px) * .6),125px)}
  .social-card {min-height:clamp(160px,21.8vh,197px)}
}
@media (min-width:861px) and (max-width:1000px) {
  /* narrow desktop: tuck the artist label into the right corner so it never covers the VGen button */
  .artist-label {right:14px;gap:12px;padding:10px 14px 10px 10px}
  .portrait-frame {width:66px;height:66px}
  .portrait-words strong {font-size:21px}
}