/* GIULIA ROSSI — multidisciplinary creative
   Palette 2 only: Ship Gray #383339 · Thistle #D7BCD2 · Lavender Purple #9572AC · Dusty Gray #A29E9F */

:root{
  --deep:#2A262C;
  --ship:#383339;
  --thistle:#D7BCD2;
  --lavender:#9572AC;
  --dusty:#A29E9F;
  --display:'Anton',sans-serif;
  --body:'Space Grotesk',Arial,sans-serif;
  --scrawl:'Permanent Marker',cursive;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--deep);color:var(--thistle);font-family:var(--body);
  font-size:16px;line-height:1.55;overflow-x:hidden;
  cursor:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 32 32"><defs><clipPath id="a"><path d="M5 1 L5 26 L12 19 L16.5 30 L21.5 28 L17 17.5 L26 17.5 Z"/></clipPath></defs><path d="M5 1 L5 26 L12 19 L16.5 30 L21.5 28 L17 17.5 L26 17.5 Z" fill="%23D7BCD2" stroke="%232A262C" stroke-width="1.6"/><g clip-path="url(%23a)"><ellipse cx="8" cy="5" rx="1.9" ry="1.5" fill="%23383339"/><circle cx="8.5" cy="5" r=".7" fill="%239572AC"/><ellipse cx="12" cy="9.5" rx="1.7" ry="1.4" fill="%23383339"/><circle cx="11.6" cy="9.3" r=".6" fill="%239572AC"/><ellipse cx="7" cy="12.5" rx="1.6" ry="1.9" fill="%23383339"/><circle cx="7.2" cy="12.9" r=".7" fill="%239572AC"/><ellipse cx="11" cy="15.5" rx="1.5" ry="1.3" fill="%23383339"/><ellipse cx="7.5" cy="20" rx="1.6" ry="1.4" fill="%23383339"/><circle cx="7.9" cy="19.7" r=".6" fill="%239572AC"/><ellipse cx="14" cy="13" rx="1.2" ry="1" fill="%23383339"/><ellipse cx="17.5" cy="21.5" rx="1.6" ry="1.4" fill="%23383339"/><circle cx="17.2" cy="21.2" r=".6" fill="%239572AC"/><ellipse cx="19" cy="26" rx="1.4" ry="1.2" fill="%23383339"/></g><path d="M10 3.2 L10.5 4.5 L11.8 5 L10.5 5.5 L10 6.8 L9.5 5.5 L8.2 5 L9.5 4.5 Z" fill="white"/><path d="M14.5 17.5 L14.9 18.5 L15.9 18.9 L14.9 19.3 L14.5 20.3 L14.1 19.3 L13.1 18.9 L14.1 18.5 Z" fill="white"/></svg>') 5 1, auto;
}
a,button,.filter,.route-btn{
  cursor:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 32 32"><defs><clipPath id="a"><path d="M5 1 L5 26 L12 19 L16.5 30 L21.5 28 L17 17.5 L26 17.5 Z"/></clipPath></defs><path d="M5 1 L5 26 L12 19 L16.5 30 L21.5 28 L17 17.5 L26 17.5 Z" fill="%239572AC" stroke="%232A262C" stroke-width="1.6"/><g clip-path="url(%23a)"><ellipse cx="8" cy="5" rx="1.9" ry="1.5" fill="%23383339"/><circle cx="8.5" cy="5" r=".7" fill="%23D7BCD2"/><ellipse cx="12" cy="9.5" rx="1.7" ry="1.4" fill="%23383339"/><circle cx="11.6" cy="9.3" r=".6" fill="%23D7BCD2"/><ellipse cx="7" cy="12.5" rx="1.6" ry="1.9" fill="%23383339"/><circle cx="7.2" cy="12.9" r=".7" fill="%23D7BCD2"/><ellipse cx="11" cy="15.5" rx="1.5" ry="1.3" fill="%23383339"/><ellipse cx="7.5" cy="20" rx="1.6" ry="1.4" fill="%23383339"/><circle cx="7.9" cy="19.7" r=".6" fill="%23D7BCD2"/><ellipse cx="14" cy="13" rx="1.2" ry="1" fill="%23383339"/><ellipse cx="17.5" cy="21.5" rx="1.6" ry="1.4" fill="%23383339"/><circle cx="17.2" cy="21.2" r=".6" fill="%23D7BCD2"/><ellipse cx="19" cy="26" rx="1.4" ry="1.2" fill="%23383339"/></g><path d="M10 3.2 L10.5 4.5 L11.8 5 L10.5 5.5 L10 6.8 L9.5 5.5 L8.2 5 L9.5 4.5 Z" fill="white"/><path d="M14.5 17.5 L14.9 18.5 L15.9 18.9 L14.9 19.3 L14.5 20.3 L14.1 19.3 L13.1 18.9 L14.1 18.5 Z" fill="white"/></svg>') 5 1, pointer;
}
a{color:var(--thistle);text-decoration:none;}

/* grain overlay */
.grain{position:fixed;inset:0;pointer-events:none;opacity:.18;z-index:999;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");}

/* marquee */
.marquee{overflow:hidden;background:var(--lavender);color:var(--deep);padding:9px 0;
  font-weight:700;letter-spacing:2px;font-size:13px;white-space:nowrap;user-select:none;}
.marquee .mq{display:inline-flex;animation:mq 28s linear infinite;will-change:transform;}
.marquee .mq > span{display:inline-block;white-space:nowrap;}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee.footer-mq{background:var(--ship);color:var(--thistle);border-top:1px solid var(--lavender);}

/* header */
header{padding:20px 5vw;display:flex;justify-content:space-between;align-items:center;gap:16px;
  border-bottom:2px dashed var(--lavender);position:sticky;top:0;background:rgba(42,38,44,.92);
  backdrop-filter:blur(8px);z-index:100;flex-wrap:wrap;}
.logo{font-family:var(--display);font-size:21px;letter-spacing:.5px;text-transform:uppercase;line-height:1;}
.logo em{font-style:normal;color:var(--lavender);font-family:var(--scrawl);font-size:11px;
  display:block;margin-top:4px;letter-spacing:1px;text-transform:none;}
nav{display:flex;gap:6px;flex-wrap:wrap;}
nav a{border:2px solid var(--lavender);padding:7px 15px;font-weight:700;font-size:12px;
  letter-spacing:1.5px;border-radius:2px;transition:.15s;}
nav a:hover{transform:rotate(-2deg) scale(1.06);background:var(--thistle);color:var(--deep);}
nav a.active{background:var(--lavender);color:var(--deep);transform:rotate(1.5deg);}

/* layout */
main{max-width:1150px;margin:0 auto;padding:0 5vw;}
section{padding:64px 0;position:relative;}
.torn{border-bottom:2px dashed var(--dusty);}

/* type */
h1,h2{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.95;}
h1{font-size:clamp(52px,11vw,140px);letter-spacing:1px;}
h2{font-size:clamp(30px,5vw,54px);margin-bottom:18px;letter-spacing:.5px;}
h3{font-family:var(--display);font-weight:400;font-size:clamp(20px,3vw,30px);
  text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;}
.scrawl{font-family:var(--scrawl);color:var(--lavender);}
.scrawl.light{color:var(--thistle);}
p.lead{font-size:18px;max-width:680px;}
p.muted{color:var(--dusty);max-width:680px;}

/* stickers */
.sticker{display:inline-block;background:var(--thistle);color:var(--deep);font-size:10px;
  font-weight:700;padding:4px 11px;border-radius:2px;margin:3px 4px 0 0;transform:rotate(-2deg);
  letter-spacing:1.5px;transition:.15s;}
.sticker.alt{background:var(--lavender);transform:rotate(1.5deg);}
.sticker.ghost{background:transparent;border:1.5px solid var(--dusty);color:var(--dusty);}
.sticker:hover{transform:rotate(0deg) scale(1.08);}

/* sparkle accents */
.spark{position:absolute;color:var(--lavender);font-size:24px;user-select:none;animation:tw 3s ease-in-out infinite;}
@keyframes tw{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.25)}}

/* hero */
.hero{padding:90px 0 70px;position:relative;}
.hero-inner{display:flex;align-items:center;justify-content:space-between;gap:44px;flex-wrap:wrap;}
.hero-text{flex:1;min-width:280px;}
.hero-photo{width:min(320px,78vw);margin:0;position:relative;transform:rotate(2.5deg);
  background:var(--thistle);padding:10px 10px 40px;box-shadow:0 16px 44px rgba(0,0,0,.5);}
.hero-photo img{width:100%;display:block;}
.hero-photo .tape{position:absolute;top:-12px;left:50%;transform:translateX(-50%) rotate(-4deg);
  width:110px;height:26px;background:rgba(215,188,210,.55);border:1px solid rgba(42,38,44,.15);z-index:2;}
.hero-photo figcaption{position:absolute;bottom:8px;left:0;right:0;text-align:center;
  font-family:var(--scrawl);color:var(--ship);font-size:15px;}
.hero .anno{position:absolute;font-family:var(--scrawl);color:var(--lavender);font-size:15px;}
.rotator-line{font-family:var(--scrawl);font-size:clamp(17px,2.6vw,24px);color:var(--thistle);margin:22px 0 12px;}
#rotator{color:var(--lavender);border-bottom:2px solid var(--lavender);}
.hero .sub{max-width:560px;color:var(--dusty);font-size:17px;}

/* cards */
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:26px;}
.pillar-card{border:2px solid var(--lavender);border-radius:3px;padding:24px 20px;
  background:rgba(149,114,172,.10);transition:.18s;position:relative;display:block;}
.pillar-card:hover{transform:rotate(-1.3deg) translateY(-4px);background:rgba(149,114,172,.2);}
.pillar-card h3{margin-bottom:8px;}
.pillar-card p{color:var(--dusty);font-size:14px;}
.pillar-card .go{font-family:var(--scrawl);color:var(--lavender);font-size:13px;
  display:block;margin-top:14px;}

/* work collage cards (home) */
.work-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:26px;margin-top:30px;}
.work-card{background:var(--ship);border-radius:3px;padding:14px 14px 18px;position:relative;
  box-shadow:0 8px 24px rgba(0,0,0,.35);transition:.18s;display:block;}
.work-card:nth-child(odd){transform:rotate(-1.4deg);}
.work-card:nth-child(even){transform:rotate(1.2deg);}
.work-card:hover{transform:rotate(0) scale(1.03);z-index:2;}
.work-card .tape{position:absolute;top:-10px;left:50%;transform:translateX(-50%) rotate(-3deg);
  width:90px;height:22px;background:rgba(215,188,210,.45);border-radius:1px;}
.work-visual{height:170px;border-radius:2px;margin-bottom:12px;display:flex;align-items:center;
  justify-content:center;font-family:var(--scrawl);color:var(--dusty);font-size:13px;
  background:linear-gradient(135deg,var(--deep),var(--ship) 55%,rgba(149,114,172,.35));overflow:hidden;position:relative;}
.work-visual img{width:100%;height:100%;object-fit:cover;}
.work-card h3{font-size:19px;}
.work-card .yr{color:var(--dusty);font-size:12px;letter-spacing:1px;}
.work-card p{color:var(--dusty);font-size:13px;margin:7px 0 9px;}

/* reel strip */
.reel{display:flex;gap:14px;overflow-x:auto;padding:10px 2px 18px;scrollbar-width:thin;}
.reel-card{min-width:180px;width:180px;height:320px;border-radius:8px;overflow:hidden;position:relative;
  background:var(--ship);border:1px solid rgba(215,188,210,.25);flex-shrink:0;
  box-shadow:0 10px 30px rgba(0,0,0,.45);transition:.18s;}
.reel-card:hover{transform:translateY(-6px) rotate(-1deg);}
.reel-card video,.reel-card img{width:100%;height:100%;object-fit:cover;display:block;}
.reel-card .np{position:absolute;bottom:0;left:0;right:0;padding:22px 10px 8px;font-size:11px;
  letter-spacing:1px;background:linear-gradient(transparent,rgba(42,38,44,.9));}
.reel-card .np b{display:block;font-size:12px;}
.reel-card.pending{display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:var(--scrawl);color:var(--dusty);font-size:13px;padding:16px;}

/* manifesto */
.manifesto{background:var(--ship);margin:0 -100vw;padding:34px 100vw;}
.manifesto h2{margin:0;font-size:clamp(26px,4.5vw,50px);color:var(--thistle);}
.manifesto h2 span{color:var(--lavender);}

/* clients wall */
.wall{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:22px;align-items:baseline;}
.wall .name{font-family:var(--display);text-transform:uppercase;font-size:clamp(17px,2.4vw,26px);
  color:var(--dusty);transition:.15s;position:relative;}
.wall .name:hover{color:var(--thistle);transform:rotate(-1.5deg);}
.wall .name.hl{color:var(--thistle);text-decoration:underline;text-decoration-color:var(--lavender);
  text-decoration-thickness:3px;text-underline-offset:6px;}
.wall .with{font-family:var(--scrawl);font-size:12px;color:var(--lavender);display:block;margin-top:2px;}

/* CTA band */
.cta-band{text-align:left;padding:70px 0;}
.btn{display:inline-block;background:var(--lavender);color:var(--deep);font-weight:700;
  letter-spacing:2px;font-size:14px;padding:15px 30px;border-radius:2px;border:none;
  font-family:var(--body);transition:.18s;margin-top:18px;}
.btn:hover{transform:rotate(-1.5deg) scale(1.05);background:var(--thistle);color:var(--deep);}
.btn.ghost{background:transparent;border:2px solid var(--lavender);color:var(--thistle);}

/* ===== WORK PAGE — glass discography ===== */
.stage{position:relative;padding:70px 0 30px;
  background:radial-gradient(ellipse at 50% 30%,rgba(149,114,172,.28),transparent 65%);}
.fan{display:flex;justify-content:center;align-items:center;gap:0;perspective:900px;
  min-height:380px;flex-wrap:nowrap;overflow:visible;}
.glass{width:230px;height:330px;border-radius:14px;position:relative;flex-shrink:0;
  background:rgba(215,188,210,.08);border:1px solid rgba(215,188,210,.35);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 18px 50px rgba(0,0,0,.5), inset 0 1px 0 rgba(215,188,210,.35);
  transition:.25s;overflow:hidden;padding:14px;}
.glass .cover{height:60%;border-radius:8px;background:linear-gradient(140deg,var(--ship),rgba(149,114,172,.5));
  display:flex;align-items:center;justify-content:center;font-family:var(--scrawl);
  color:var(--thistle);font-size:13px;text-align:center;padding:8px;overflow:hidden;}
.glass .cover img{width:100%;height:100%;object-fit:cover;border-radius:8px;}
.glass h3{font-size:17px;margin:12px 0 2px;}
.glass .role{font-size:10px;letter-spacing:1.5px;color:var(--dusty);}
.glass:nth-child(1){transform:rotateY(18deg) translateX(40px) scale(.85);z-index:1;opacity:.75;}
.glass:nth-child(2){transform:rotateY(9deg) translateX(20px) scale(.93);z-index:2;opacity:.9;}
.glass:nth-child(3){z-index:3;transform:scale(1.05);}
.glass:nth-child(4){transform:rotateY(-9deg) translateX(-20px) scale(.93);z-index:2;opacity:.9;}
.glass:nth-child(5){transform:rotateY(-18deg) translateX(-40px) scale(.85);z-index:1;opacity:.75;}
.glass:hover{transform:scale(1.1)!important;z-index:9;opacity:1;}
.playerbar{max-width:640px;margin:34px auto 0;background:rgba(215,188,210,.1);
  border:1px solid rgba(215,188,210,.3);backdrop-filter:blur(10px);border-radius:40px;
  padding:12px 24px;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;}
.playerbar .np-label{font-size:11px;letter-spacing:1.5px;color:var(--dusty);}
.filters{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:26px;}
.filter{background:transparent;border:2px solid var(--lavender);color:var(--thistle);
  padding:7px 16px;font-weight:700;font-size:11px;letter-spacing:1.5px;border-radius:2px;
  font-family:var(--body);transition:.15s;}
.filter:hover{transform:rotate(-2deg);}
.filter.on{background:var(--lavender);color:var(--deep);}

/* tracklist */
.tracklist{margin-top:44px;}
.track{display:flex;align-items:center;gap:16px;padding:16px 8px;border-bottom:1px dashed var(--dusty);
  transition:.15s;flex-wrap:wrap;}
.track:hover{background:rgba(149,114,172,.1);padding-left:16px;}
.track .no{font-family:var(--scrawl);color:var(--lavender);font-size:16px;min-width:34px;}
.track .t-head{flex:1;min-width:220px;}
.track .t-title{font-family:var(--display);text-transform:uppercase;font-size:clamp(17px,2.6vw,26px);display:block;line-height:1.05;}
.track .t-sub{display:block;color:var(--dusty);font-size:12px;letter-spacing:1.5px;margin-top:4px;text-transform:uppercase;}
.track.hidden{display:none;}

/* desk collage — heronika-style: main pic + scattered windows + folders */
.deskCollage{position:relative;padding:36px 0 46px;}
.dc-main{position:relative;margin:0 auto;max-width:min(460px,84%);z-index:2;
  border:2px solid var(--lavender);background:var(--ship);}
.dc-main img{width:100%;height:auto;display:block;}
.dc-main .handles i{position:absolute;width:9px;height:9px;background:var(--thistle);
  border:1px solid var(--deep);z-index:3;}
.dc-main .handles i:nth-child(1){top:-5px;left:-5px;}
.dc-main .handles i:nth-child(2){top:-5px;right:-5px;}
.dc-main .handles i:nth-child(3){bottom:-5px;left:-5px;}
.dc-main .handles i:nth-child(4){bottom:-5px;right:-5px;}
.dc-main .fname{position:absolute;bottom:-13px;left:50%;transform:translateX(-50%);
  background:var(--lavender);color:var(--deep);font-size:11px;padding:3px 10px;
  border-radius:2px;white-space:nowrap;z-index:3;}
.dc-item{position:absolute;width:190px;background:var(--thistle);padding:24px 5px 5px;
  box-shadow:0 14px 34px rgba(0,0,0,.5);z-index:3;transition:.18s;}
.dc-item::before{content:'';position:absolute;top:8px;left:9px;width:7px;height:7px;
  border-radius:50%;background:var(--lavender);
  box-shadow:12px 0 0 var(--dusty),24px 0 0 var(--ship);}
.dc-item img{width:100%;height:auto;display:block;}
.dc-item:hover{transform:scale(1.06) rotate(0deg)!important;z-index:5;}
.dc-folder{position:absolute;z-index:4;text-align:center;width:110px;border:none;
  background:transparent;font-family:var(--body);}
.dc-folder .icon{font-size:52px;display:block;filter:hue-rotate(230deg) saturate(.55);
  transition:.15s;line-height:1;}
.dc-folder:hover .icon{transform:scale(1.12) rotate(-3deg);}
.dc-folder .flabel{display:block;background:var(--lavender);color:var(--deep);font-size:11px;
  font-weight:700;padding:2px 8px;border-radius:2px;margin-top:4px;}
.dc-folder .scrawl{display:block;font-size:12px;margin-top:5px;}
@media (max-width:760px){
  .dc-item{position:static;display:inline-block;width:44%;margin:12px 2% 0;transform:none!important;}
  .dc-folder{position:static;display:inline-block;margin:14px 2% 0;}
  .deskCollage{padding-bottom:20px;}
}

/* folder lightbox — natural ratios, no crop */
.lightbox{position:fixed;inset:0;background:rgba(42,38,44,.95);z-index:1000;
  overflow-y:auto;padding:70px 5vw 40px;display:none;}
.lightbox.open{display:block;}
.lightbox .lb-cols{columns:3 240px;column-gap:14px;max-width:1100px;margin:0 auto;}
.lightbox .lb-cols img{width:100%;height:auto;display:block;margin-bottom:14px;
  background:var(--thistle);padding:5px;box-sizing:border-box;break-inside:avoid;}
.lightbox .lb-title{position:fixed;top:20px;left:5vw;font-family:var(--scrawl);
  color:var(--lavender);font-size:16px;}
.lightbox .lb-close{position:fixed;top:14px;right:5vw;background:var(--lavender);
  color:var(--deep);border:none;font-weight:700;letter-spacing:1px;font-size:12px;
  padding:9px 18px;border-radius:2px;z-index:1001;}
.lightbox .lb-close:hover{background:var(--thistle);}

/* case study collage gallery — taped prints, zine energy, neat rhythm */
.collage{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-auto-rows:105px;
  grid-auto-flow:dense;gap:16px;margin-top:26px;padding:8px 4px;}
.collage figure{margin:0;position:relative;background:var(--thistle);padding:6px;
  box-shadow:0 10px 24px rgba(0,0,0,.4);grid-row:span 2;transition:.18s;}
.collage figure img{width:100%;height:100%;object-fit:cover;display:block;}
.collage figure.tall{grid-row:span 3;}
.collage figure.wide{grid-column:span 2;grid-row:span 2;}
.collage figure:nth-child(4n+1){transform:rotate(-1.4deg);}
.collage figure:nth-child(4n+2){transform:rotate(.9deg);}
.collage figure:nth-child(4n+3){transform:rotate(-.5deg);}
.collage figure:nth-child(4n+4){transform:rotate(1.3deg);}
.collage figure:nth-child(3n)::before{content:'';position:absolute;top:-10px;left:50%;
  transform:translateX(-50%) rotate(-4deg);width:72px;height:18px;
  background:rgba(162,158,159,.55);border:1px solid rgba(42,38,44,.1);z-index:2;}
.collage figure:hover{transform:rotate(0deg) scale(1.04);z-index:3;}
@media (max-width:560px){.collage{grid-auto-rows:90px;gap:12px;}}

/* case study block */
.case{border:2px solid var(--lavender);border-radius:3px;padding:30px;margin-top:34px;background:rgba(149,114,172,.07);}
.case .label{font-family:var(--scrawl);color:var(--lavender);font-size:14px;}
.case ul{list-style:none;margin:12px 0;}
.case li{padding-left:20px;position:relative;color:var(--dusty);margin-bottom:6px;}
.case li:before{content:"✶";position:absolute;left:0;color:var(--lavender);}

/* ===== WHAT I DO ===== */
.pillar{padding:56px 0;border-bottom:2px dashed var(--dusty);}
.pillar .lead-line{font-family:var(--scrawl);font-size:clamp(17px,2.6vw,23px);color:var(--thistle);margin:14px 0;}
.booklist{list-style:none;margin:18px 0;}
.booklist li{padding:9px 0 9px 26px;position:relative;color:var(--dusty);border-bottom:1px dotted rgba(162,158,159,.35);}
.booklist li:before{content:"→";position:absolute;left:0;color:var(--lavender);}
.receipt{font-family:var(--scrawl);color:var(--lavender);font-size:14px;margin-top:12px;display:block;}

/* ===== ABOUT — desktop clutter ===== */
.desk{position:relative;min-height:430px;background:var(--ship);border-radius:3px;overflow:hidden;
  margin-bottom:50px;display:flex;align-items:center;justify-content:center;}
.portrait-ph{width:280px;height:350px;background:linear-gradient(150deg,var(--deep),rgba(149,114,172,.4));
  border:2px solid var(--lavender);position:relative;display:flex;align-items:center;justify-content:center;
  font-family:var(--scrawl);color:var(--dusty);text-align:center;padding:16px;}
.handles i{position:absolute;width:9px;height:9px;background:var(--thistle);border:1px solid var(--deep);}
.handles i:nth-child(1){top:-5px;left:-5px;} .handles i:nth-child(2){top:-5px;right:-5px;}
.handles i:nth-child(3){bottom:-5px;left:-5px;} .handles i:nth-child(4){bottom:-5px;right:-5px;}
.fname{position:absolute;bottom:-30px;left:50%;transform:translateX(-50%);background:var(--lavender);
  color:var(--deep);font-size:11px;padding:3px 10px;border-radius:2px;white-space:nowrap;}
.notif{position:absolute;top:26px;right:4%;background:rgba(42,38,44,.94);border:1px solid var(--dusty);
  border-radius:8px;padding:14px 18px;max-width:250px;font-size:12px;box-shadow:0 10px 30px rgba(0,0,0,.4);}
.notif b{display:block;margin-bottom:4px;}
.notif .n-btns{display:flex;gap:10px;margin-top:8px;}
.notif .n-btns span{color:var(--lavender);font-weight:700;font-size:11px;}
.folder{position:absolute;font-size:40px;filter:hue-rotate(230deg) saturate(.6);}
.defcard{position:absolute;bottom:30px;left:4%;background:rgba(215,188,210,.95);color:var(--deep);
  border-radius:6px;padding:16px 20px;max-width:300px;font-size:13px;box-shadow:0 12px 34px rgba(0,0,0,.45);}
.defcard b{font-size:16px;}
.defcard i{color:var(--lavender);}
.bio-wrap{display:grid;grid-template-columns:1fr;gap:8px;max-width:720px;position:relative;}
.margin-note{font-family:var(--scrawl);color:var(--lavender);font-size:14px;margin:10px 0 18px;transform:rotate(-1deg);}
.value{margin-bottom:26px;max-width:680px;}
.value b{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:20px;
  display:block;margin-bottom:5px;letter-spacing:.5px;}
.value p{color:var(--dusty);}

/* ===== CONTACT ===== */
.bigmail{font-size:clamp(15px,4.4vw,52px);white-space:nowrap;letter-spacing:.5px;}
.bigmail:hover{color:var(--lavender);}
.routing{margin:40px 0;}
.route-btn{background:transparent;border:2px solid var(--lavender);color:var(--thistle);
  font-family:var(--body);font-weight:700;letter-spacing:1.5px;font-size:13px;padding:13px 22px;
  border-radius:2px;margin:0 8px 10px 0;transition:.18s;}
.route-btn:hover,.route-btn.on{background:var(--lavender);color:var(--deep);transform:rotate(-1.5deg);}
.contact-note{color:var(--dusty);font-size:14px;max-width:520px;}

/* footer */
footer{border-top:2px dashed var(--lavender);padding:26px 5vw;display:flex;
  justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--dusty);align-items:center;}
footer .soc a{margin-right:8px;}

/* 404 */
.notfound{min-height:60vh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;}

@media (max-width:760px){
  .fan{flex-wrap:wrap;gap:18px;min-height:0;}
  .glass{transform:none!important;opacity:1!important;}
  .notif{position:static;margin:12px;max-width:none;}
  .defcard{position:static;margin:12px;max-width:none;}
  .desk{flex-direction:column;padding:30px 0 50px;}
}