/* ============================================
   HAZEL GWEN MINDORO — PORTFOLIO
   Shared stylesheet used across all pages
   ============================================ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --p0:#fff5f8;--p1:#fde8ef;--p2:#f9c9d9;--p3:#f4a0be;--p4:#e96e9a;--p5:#d94d7d;--p6:#b03060;
  --cream:#fef9f5;--blush:#fdf0f4;
  --td:#2a1520;--tm:#7a4060;--ts:#b07090;
  --serif:'Playfair Display',Georgia,serif;
  --sans:'DM Sans',sans-serif;
}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  color:var(--td);
  overflow-x:hidden;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background-color:var(--cream);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(217,77,125,0.07) 1px, transparent 0);
  background-size:26px 26px;
  position:relative;
}
main{flex:1;position:relative}
a{cursor:pointer}

/* ---------- decorative flourish system ---------- */
.flourish{position:absolute;pointer-events:none;opacity:.5;z-index:0}
.dash-divider{display:flex;align-items:center;justify-content:center;gap:.5rem;margin:0 auto 2.4rem;max-width:200px;opacity:.55}
.dash-divider .dot{width:5px;height:5px;border-radius:50%;background:var(--p4)}
.dash-divider .line{flex:1;height:1px;border-top:1.5px dashed var(--p3)}
.corner-bloom{position:absolute;width:90px;height:90px;opacity:.4;pointer-events:none}

/* ---------- floating petals / leaves (botanical + abstract mix) ---------- */
.petal-field{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.petal{position:absolute;opacity:.5;animation:petalDrift 14s ease-in-out infinite}
.petal svg{display:block}
@keyframes petalDrift{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-22px) rotate(8deg)}
}
.ring-deco{position:absolute;border:1.5px dashed var(--p3);border-radius:50%;opacity:.35;pointer-events:none}
.sparkle-deco{position:absolute;color:var(--p3);opacity:.55;pointer-events:none;font-size:1rem}
@keyframes sparkleTwinkle{0%,100%{opacity:.25;transform:scale(.85)}50%{opacity:.7;transform:scale(1.1)}}
.sparkle-deco{animation:sparkleTwinkle 3.5s ease-in-out infinite}

/* ---------- COQUETTE DETAIL SYSTEM ---------- */
/* bow-deco holds a user-supplied image (bow.png/jpg). If no image src is set,
   it stays invisible instead of showing a broken-image icon. */
.bow-deco{position:absolute;pointer-events:none;z-index:2;filter:drop-shadow(0 5px 12px rgba(217,77,125,.3));width:48px}
.bow-deco.spin{animation:bowSway 5s ease-in-out infinite}
.bow-deco img{width:100%;height:auto;display:block}
.bow-deco img:not([src]),.bow-deco img[src=""]{display:none}
@keyframes bowSway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}

/* washi tape strips */
.tape{position:absolute;height:26px;background:repeating-linear-gradient(135deg,var(--p2) 0 8px,var(--p1) 8px 16px);opacity:.85;box-shadow:0 2px 8px rgba(217,77,125,.18);pointer-events:none;z-index:3}
.tape::before,.tape::after{content:'';position:absolute;top:0;bottom:0;width:8px;background:inherit}

/* wax seal */
.wax-seal{position:absolute;width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--p5),var(--p6));display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--serif);font-style:italic;font-size:1.1rem;box-shadow:0 6px 16px rgba(176,48,96,.35),inset 0 -2px 4px rgba(0,0,0,.15);pointer-events:none;z-index:3}
.wax-seal::after{content:'';position:absolute;inset:-3px;border-radius:50%;border:1px dotted rgba(255,255,255,.4)}

/* scalloped frame edge (for photos) */
.scallop-frame{position:relative}
.scallop-frame::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background-image:radial-gradient(circle at 10px 0, transparent 9px, #fff 9.5px);
  background-size:20px 12px;background-position:top center;background-repeat:repeat-x;
  -webkit-mask-image:linear-gradient(#000,#000);
}

/* corner ribbon tag */
.ribbon-tag{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--p4),var(--p5));color:#fff;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;padding:.35rem 1rem;border-radius:0 0 8px 8px;box-shadow:0 6px 14px rgba(217,77,125,.3);z-index:3;font-weight:500}
.ribbon-tag::before,.ribbon-tag::after{content:'';position:absolute;bottom:-6px;width:0;height:0;border-style:solid}
.ribbon-tag::before{left:-6px;border-width:0 6px 6px 0;border-color:transparent var(--p6) transparent transparent}
.ribbon-tag::after{right:-6px;border-width:6px 6px 0 0;border-color:var(--p6) transparent transparent transparent}

/* heart/bow bullet for lists */
.bow-bullet::before{content:'♡ ';color:var(--p4)}

/* stitched dashed border (sewing-pattern coquette feel) */
.stitched{border:1.5px dashed var(--p3) !important}

/* ---------- custom cursor ---------- */
#cur{position:fixed;width:12px;height:12px;background:var(--p4);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .18s,height .18s,background .18s;opacity:0}
#cur-r{position:fixed;width:36px;height:36px;border:1.5px solid var(--p3);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width .2s,height .2s,opacity .2s;opacity:0}

/* ---------- nav ---------- */
nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;padding:.85rem 2.4rem;background:rgba(254,249,245,.94);backdrop-filter:blur(14px);border-bottom:1.5px dashed var(--p3)}
.logo{font-family:var(--serif);font-size:1.25rem;color:var(--p5);font-style:italic;text-decoration:none;display:flex;align-items:center;gap:.4rem}
.logo::after{content:'';width:14px;height:14px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 46'%3E%3Cpath d='M23 23c-3-9-11-13-17-9-4 3-3 10 4 11 5 1 10-1 13-2z' fill='%23d94d7d'/%3E%3Cpath d='M23 23c3-9 11-13 17-9 4 3 3 10-4 11-5 1-10-1-13-2z' fill='%23e96e9a'/%3E%3Ccircle cx='23' cy='23' r='3.4' fill='%23fff5f8'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;display:inline-block}
.nav-links{display:flex;gap:.5rem;list-style:none;background:#fff;border:1.5px solid var(--p2);border-radius:50px;padding:.35rem;box-shadow:0 6px 20px rgba(217,77,125,.1)}
.nav-links a{font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--tm);text-decoration:none;transition:all .22s;position:relative;padding:.5rem 1rem;border-radius:50px;font-weight:500;display:inline-block}
.nav-links a:hover{color:#fff;background:linear-gradient(135deg,var(--p4),var(--p5))}
.nav-links a.active{color:#fff;background:linear-gradient(135deg,var(--p4),var(--p5));box-shadow:0 4px 14px rgba(217,77,125,.35)}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;width:26px;height:20px;flex-direction:column;justify-content:space-between}
.nav-toggle span{display:block;height:2px;background:var(--p5);border-radius:2px;transition:transform .25s,opacity .25s}

/* ---------- page wrapper (offset for fixed nav) ---------- */
.page{padding-top:78px}

/* ---------- generic section ---------- */
section{padding:5.5rem 2rem;position:relative}
.sec-head{text-align:center;margin-bottom:3.2rem;position:relative;z-index:1}
.sec-label{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ts);display:block;margin-bottom:.7rem}
.sec-title{font-family:var(--serif);font-size:clamp(1.8rem,3.8vw,2.8rem);font-weight:400;color:var(--td)}
.sec-title em{color:var(--p4);font-style:italic}
.blush{background:var(--blush)}

/* ---------- buttons ---------- */
.btn-fill{background:linear-gradient(135deg,var(--p4),var(--p5));color:#fff;border:none;padding:.85rem 2.1rem;border-radius:50px;font-family:var(--sans);font-size:.78rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;text-decoration:none;transition:box-shadow .25s,transform .2s;display:inline-flex;align-items:center;gap:.4rem;box-shadow:0 8px 24px rgba(217,77,125,.28)}
.btn-fill:hover{box-shadow:0 12px 32px rgba(217,77,125,.4);transform:translateY(-2px)}
.btn-ghost{background:rgba(255,255,255,.6);color:var(--p5);border:1.5px solid var(--p3);padding:.85rem 2rem;border-radius:50px;font-family:var(--sans);font-size:.78rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;text-decoration:none;transition:background .2s,transform .2s;display:inline-flex;align-items:center;gap:.4rem}
.btn-ghost:hover{background:var(--p1);transform:translateY(-2px)}

/* ---------- decorative blobs ---------- */
.blob{position:absolute;border-radius:50%;filter:blur(72px);pointer-events:none}
@keyframes fb{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-28px) scale(1.04)}}
@keyframes fb3{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-18px)}}

/* ---------- footer ---------- */
footer{background:var(--td);color:var(--ts);text-align:center;padding:1.5rem;font-size:.72rem;letter-spacing:.04em}
footer em{color:var(--p3);font-style:normal}
footer a{color:var(--ts);text-decoration:none}
footer a:hover{color:var(--p3)}

/* ---------- scroll reveal ---------- */
.fi{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.fi.vis{opacity:1;transform:translateY(0)}

/* ---------- page transition ---------- */
body.page-enter{opacity:0}
body.page-enter-active{opacity:1;transition:opacity .35s ease}

/* ============================================
   HOME PAGE — magazine cover, coquette edition
   ============================================ */
.home-hero{min-height:calc(100vh - 78px);display:flex;align-items:center;justify-content:center;padding:3rem 1.5rem 4rem;position:relative;overflow:hidden}
.b1{width:540px;height:540px;background:radial-gradient(circle,#fce4ec 0%,transparent 75%);top:-130px;right:-110px;animation:fb 9s ease-in-out infinite}
.b2{width:380px;height:380px;background:radial-gradient(circle,#f9c9d9 0%,transparent 75%);bottom:-60px;left:-80px;animation:fb 7s ease-in-out infinite;animation-delay:-4s}
.b3{width:260px;height:260px;background:radial-gradient(circle,var(--p2) 0%,transparent 75%);top:45%;left:50%;opacity:.5;animation:fb3 8s ease-in-out infinite;animation-delay:-2s}

/* the "magazine" frame */
.mag-cover{
  position:relative;z-index:1;width:100%;max-width:980px;
  background:linear-gradient(180deg,#fffdfb,#fff6f9);
  border:1.5px solid var(--p2);
  border-radius:6px;
  box-shadow:0 30px 70px rgba(217,77,125,.18),0 2px 0 #fff inset;
  padding:1.6rem 1.8rem 2rem;
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:1.6rem;
  align-items:center;
}
.mag-masthead{grid-column:1 / -1;display:flex;align-items:baseline;justify-content:space-between;border-bottom:2px solid var(--td);padding-bottom:.7rem;margin-bottom:.4rem}
.mag-title{font-family:var(--serif);font-size:1.5rem;font-style:italic;letter-spacing:.02em;color:var(--td)}
.mag-issue{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ts)}

.mag-photo-wrap{position:relative}
.mag-photo{aspect-ratio:4/5;border-radius:4px;background:linear-gradient(150deg,var(--p1),var(--p3));display:flex;align-items:center;justify-content:center;overflow:hidden;border:6px solid #fff;box-shadow:0 18px 40px rgba(217,77,125,.22),0 0 0 1px var(--p2);position:relative}
.mag-photo img{width:100%;height:100%;object-fit:cover}
.mag-photo-fallback{font-family:var(--serif);font-size:3.4rem;color:var(--p5);font-style:italic}
.mag-coverline{position:absolute;font-family:var(--sans);font-size:.62rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--p6);background:rgba(255,255,255,.88);padding:.3rem .65rem;border-radius:30px;box-shadow:0 4px 10px rgba(217,77,125,.18);z-index:4}

.mag-copy{display:flex;flex-direction:column;justify-content:center;position:relative}
.mag-kicker{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--p5);font-weight:500;margin-bottom:.5rem;display:flex;align-items:center;gap:.4rem}
.mag-kicker::before{content:'';width:16px;height:1px;background:var(--p4)}
.mag-headline{font-family:var(--serif);font-size:clamp(2.1rem,4.4vw,3.1rem);font-weight:400;line-height:1.04;color:var(--td);margin-bottom:.9rem}
.mag-headline em{color:var(--p4);font-style:italic}
.mag-dek{font-size:.92rem;color:var(--tm);line-height:1.7;margin-bottom:1.3rem;font-weight:300}
.mag-dek strong{color:var(--p5);font-weight:500}
.mag-bylines{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1.5rem}
.mag-byline{font-size:.74rem;color:var(--ts);letter-spacing:.03em;display:flex;align-items:center;gap:.45rem}
.mag-byline::before{content:'♡';color:var(--p3);font-size:.7rem}

.mag-links{display:flex;gap:.6rem;flex-wrap:wrap}
.home-link{background:rgba(255,255,255,.7);border:1px solid var(--p2);color:var(--p5);font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;padding:.6rem 1.3rem;border-radius:50px;text-decoration:none;transition:all .25s;display:inline-flex;align-items:center;gap:.4rem;backdrop-filter:blur(6px)}
.home-link:hover{background:linear-gradient(135deg,var(--p4),var(--p5));border-color:var(--p4);color:#fff;transform:translateY(-2px);box-shadow:0 10px 28px rgba(217,77,125,.3)}
.home-link.primary{background:linear-gradient(135deg,var(--p4),var(--p5));color:#fff;border-color:transparent;box-shadow:0 8px 22px rgba(217,77,125,.28)}

.mag-footer-strip{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:center;border-top:1px dashed var(--p3);margin-top:1.2rem;padding-top:.8rem;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ts)}

@media(max-width:760px){
  .mag-cover{grid-template-columns:1fr;padding:1.3rem 1.2rem 1.6rem}
  .mag-photo{max-width:280px;margin:0 auto}
  .mag-copy{text-align:center;align-items:center}
  .mag-kicker{justify-content:center}
  .mag-bylines{align-items:center}
  .mag-links{justify-content:center}
  .mag-footer-strip{flex-direction:column;gap:.3rem;text-align:center}
}

/* ============================================
   WORK page
   ============================================ */
.fbar{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin-bottom:2.6rem;position:relative;z-index:1}
.fb{border:1px solid var(--p2);background:transparent;padding:.4rem 1.1rem;border-radius:50px;font-family:var(--sans);font-size:.76rem;color:var(--tm);cursor:pointer;transition:all .2s}
.fb:hover,.fb.on{background:var(--p4);border-color:var(--p4);color:#fff}
.gg{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;max-width:1100px;margin:0 auto;position:relative;z-index:1}
.gi{position:relative;border-radius:14px;overflow:hidden;cursor:pointer;transition:transform .3s cubic-bezier(.25,.46,.45,.94);aspect-ratio:1/1}
.gi.w{grid-column:span 2;aspect-ratio:2/1}
.gi.t{grid-row:span 2;aspect-ratio:1/2}
.gi:hover{transform:scale(1.025);z-index:2}
.gi:hover .gov{opacity:1}
.gi:hover .gbg,.gi:hover .gi-img{transform:scale(1.07)}
.gbg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.6rem;transition:transform .5s ease}
.gi-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.gbg svg{opacity:.3}
.gbg span{font-size:.68rem;color:var(--tm);letter-spacing:.05em}
.gov{position:absolute;inset:0;background:linear-gradient(to top,rgba(42,21,32,.75) 0%,transparent 65%);opacity:0;transition:opacity .3s;display:flex;align-items:flex-end;padding:1.1rem}
.gmeta h3{font-family:var(--serif);font-size:.95rem;font-weight:400;color:#fff}
.gmeta p{font-size:.7rem;color:rgba(255,255,255,.7);margin-top:2px;letter-spacing:.05em}
.gtag{position:absolute;top:.8rem;left:.8rem;background:rgba(255,255,255,.92);color:var(--p5);font-size:.6rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:20px}

/* video grid (work page) */
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.2rem;max-width:1100px;margin:3rem auto 0;position:relative;z-index:1}
.vcard{border-radius:16px;overflow:hidden;background:#fff;border:1px solid var(--p2);cursor:pointer;transition:transform .3s,box-shadow .3s}
.vcard:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(217,77,125,.15)}
.vthumb{aspect-ratio:16/9;background:var(--p1);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.vthumb .cbg{position:absolute;inset:0;transition:transform .5s}
.vcard:hover .cbg{transform:scale(1.05)}
.playbtn{width:48px;height:48px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;box-shadow:0 4px 20px rgba(42,21,32,.15);transition:transform .2s,background .2s}
.vcard:hover .playbtn{transform:scale(1.1);background:var(--p4)}
.vcard:hover .playbtn svg path{fill:#fff}
.vinfo{padding:1rem 1.2rem 1.2rem}
.vinfo h3{font-family:var(--serif);font-size:1rem;font-weight:400;margin-bottom:3px}
.vinfo p{font-size:.78rem;color:var(--ts)}

/* ============================================
   SERVICES page
   ============================================ */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.1rem;max-width:1050px;margin:0 auto;position:relative;z-index:1}
.svc{background:linear-gradient(165deg,#fff,var(--p0));border:1px solid var(--p2);border-radius:18px;padding:1.7rem 1.5rem;transition:transform .3s,box-shadow .3s;position:relative;overflow:hidden}
.svc::after{content:'';position:absolute;top:-30px;right:-30px;width:80px;height:80px;background:radial-gradient(circle,var(--p2) 0%,transparent 70%);opacity:.6;pointer-events:none}
.svc:hover{transform:translateY(-6px);box-shadow:0 18px 48px rgba(217,77,125,.16)}
.svc-ico{font-size:1.7rem;margin-bottom:.9rem;position:relative;z-index:1}
.svc h3{font-family:var(--serif);font-size:1rem;font-weight:400;margin-bottom:.45rem;color:var(--td);position:relative;z-index:1}
.svc p{font-size:.8rem;color:var(--ts);line-height:1.72;position:relative;z-index:1}

.proc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.1rem;max-width:1000px;margin:0 auto;position:relative;z-index:1}
.pstep{background:linear-gradient(165deg,#fff,var(--p0));border:1px solid var(--p2);border-radius:16px;padding:1.5rem;position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s}
.pstep:hover{transform:translateY(-4px);box-shadow:0 14px 36px rgba(217,77,125,.14)}
.pnum{font-family:var(--serif);font-size:3.2rem;font-weight:400;color:var(--p2);position:absolute;top:.3rem;right:.8rem;line-height:1;font-style:italic}
.pstep h3{font-family:var(--serif);font-size:.98rem;font-weight:400;color:var(--td);margin-bottom:.45rem;position:relative;z-index:1}
.pstep p{font-size:.78rem;color:var(--ts);line-height:1.7;position:relative;z-index:1}

/* ============================================
   EXPERIENCE page
   ============================================ */
.exp-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;position:relative;z-index:1}
.exp-item{display:grid;grid-template-columns:140px 1fr;gap:0 2rem;padding:1.8rem 0;border-bottom:1px solid var(--p2);position:relative}
.exp-item:last-child{border-bottom:none}
.exp-item::before{content:'';position:absolute;left:140px;top:2.2rem;width:10px;height:10px;border-radius:50%;background:var(--p3);transform:translateX(-50%);border:2px solid #fff;box-shadow:0 0 0 1px var(--p3)}
.exp-date{font-size:.72rem;color:var(--ts);letter-spacing:.04em;padding-top:.15rem;text-align:right;padding-right:1.5rem;line-height:1.5}
.exp-date strong{display:block;font-size:.62rem;color:var(--p4);font-weight:500;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.3rem}
.exp-body h3{font-family:var(--serif);font-size:1.05rem;font-weight:400;color:var(--td);margin-bottom:.2rem}
.exp-body .co{font-size:.78rem;color:var(--ts);margin-bottom:.6rem;font-style:italic}
.exp-body p{font-size:.8rem;color:var(--tm);line-height:1.7}

.skills-wrap{max-width:960px;margin:0 auto;display:flex;flex-direction:column;gap:1.8rem;position:relative;z-index:1}
.skill-group h3{font-family:var(--serif);font-size:.95rem;font-weight:400;color:var(--td);margin-bottom:.8rem;display:flex;align-items:center;gap:.5rem}
.skill-group h3::before{content:'';display:block;width:18px;height:1px;background:var(--p4)}
.skill-pills{display:flex;flex-wrap:wrap;gap:.45rem}
.sp{background:#fff;border:1px solid var(--p2);color:var(--tm);font-size:.75rem;padding:.32rem .85rem;border-radius:50px;transition:all .2s}
.sp:hover{background:var(--p1);border-color:var(--p3);color:var(--p5);transform:translateY(-1px)}

/* ============================================
   ABOUT page
   ============================================ */
.about-inner{display:grid;grid-template-columns:1fr 1.5fr;gap:3.5rem;align-items:center;max-width:980px;margin:0 auto;position:relative;z-index:1}
.aph{aspect-ratio:4/5;border-radius:22px;background:linear-gradient(145deg,var(--p1),var(--p3));display:flex;align-items:center;justify-content:center;text-align:center;color:var(--ts);font-size:.75rem;line-height:2;letter-spacing:.04em;position:relative;overflow:hidden;box-shadow:0 20px 50px rgba(217,77,125,.18);border:4px solid #fff}
.aph img{width:100%;height:100%;object-fit:cover}
.aph::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 55%,rgba(233,110,154,.18));pointer-events:none}
.aph::before{content:'✿';position:absolute;top:14px;right:14px;font-size:1.3rem;color:#fff;opacity:.85;z-index:2}
.aph-ico{font-size:2.8rem;display:block;margin-bottom:.4rem}
.atx .atag{font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ts);display:block;margin-bottom:.7rem}
.atx h2{font-family:var(--serif);font-size:clamp(1.7rem,3vw,2.4rem);font-weight:400;line-height:1.22;margin-bottom:1.1rem;color:var(--td)}
.atx h2 em{color:var(--p4);font-style:italic}
.atx p{font-size:.88rem;color:var(--tm);line-height:1.85;font-weight:300;margin-bottom:.9rem}
.adet{font-size:.76rem;color:var(--ts);display:flex;align-items:center;gap:.4rem;margin-bottom:.35rem}
.adet::before{content:'🌸';font-size:.68rem}

.vals{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;max-width:800px;margin:0 auto;position:relative;z-index:1}
.vp{display:flex;align-items:center;gap:.55rem;background:#fff;border:1px solid var(--p2);border-radius:50px;padding:.55rem 1.2rem;transition:all .2s}
.vp:hover{background:var(--p1);border-color:var(--p3);transform:translateY(-2px)}
.vi{font-size:.95rem}
.vp strong{font-size:.8rem;color:var(--p5);font-weight:500}
.vp span{font-size:.74rem;color:var(--ts)}

/* ============================================
   BEYOND WORK page (personality)
   ============================================ */
.bw-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem;max-width:1050px;margin:0 auto;position:relative;z-index:1}
.bw-card{background:linear-gradient(165deg,#fff,var(--p0));border:1px solid var(--p2);border-radius:18px;padding:1.8rem;transition:transform .25s,box-shadow .25s;position:relative;overflow:hidden}
.bw-card::after{content:'';position:absolute;bottom:-30px;left:-30px;width:80px;height:80px;background:radial-gradient(circle,var(--p2) 0%,transparent 70%);opacity:.55;pointer-events:none}
.bw-card:hover{transform:translateY(-5px);box-shadow:0 16px 40px rgba(217,77,125,.16)}
.bw-ico{font-size:1.8rem;margin-bottom:.8rem;position:relative;z-index:1}
.bw-card h3{font-family:var(--serif);font-size:1.02rem;font-weight:400;margin-bottom:.5rem;color:var(--td);position:relative;z-index:1}
.bw-card p{font-size:.8rem;color:var(--ts);line-height:1.72;position:relative;z-index:1}

.quote-block{max-width:680px;margin:0 auto;text-align:center;padding:3rem 2rem;position:relative}
.quote-block::before{content:'"';font-family:var(--serif);font-size:5rem;color:var(--p2);position:absolute;top:-1rem;left:50%;transform:translateX(-50%);font-style:italic;line-height:1}
.quote-block p{font-family:var(--serif);font-size:1.3rem;font-style:italic;color:var(--tm);line-height:1.6;position:relative;z-index:1}

/* ============================================
   CONTACT page
   ============================================ */
.contact-hero{background:linear-gradient(150deg,var(--p4) 0%,var(--p5) 100%);text-align:center;padding:5.5rem 2rem;position:relative;overflow:hidden}
.contact-hero::before{content:'';position:absolute;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.12) 0%,transparent 70%);top:-100px;left:-80px}
.contact-hero::after{content:'';position:absolute;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.1) 0%,transparent 70%);bottom:-90px;right:-60px}
.ct-label{font-size:.65rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.55);display:block;margin-bottom:.8rem;position:relative;z-index:1}
.ct-title{font-family:var(--serif);font-size:clamp(2rem,4vw,3.2rem);font-weight:400;color:#fff;margin-bottom:.5rem;position:relative;z-index:1}
.ct-title em{color:var(--p1);font-style:italic}
.ct-sub{color:rgba(255,255,255,.72);font-size:.88rem;font-weight:300;margin-bottom:.4rem}
.ct-email{font-size:1.05rem;color:#fff;margin-bottom:2.4rem}
.clinks{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;position:relative;z-index:1}
.cbtn{background:#fff;color:var(--p5);border:none;padding:.78rem 1.7rem;border-radius:50px;font-family:var(--sans);font-size:.78rem;font-weight:500;cursor:pointer;text-decoration:none;transition:transform .2s,background .2s;letter-spacing:.04em;display:flex;align-items:center;gap:.45rem}
.cbtn:hover{transform:translateY(-3px);background:var(--p0)}
.cbtn.out{background:transparent;border:1.5px solid rgba(255,255,255,.45);color:#fff}
.cbtn.out:hover{background:rgba(255,255,255,.11)}

.contact-form-wrap{max-width:560px;margin:0 auto;padding:4rem 2rem}
.cform{display:flex;flex-direction:column;gap:1rem}
.cform label{font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tm);margin-bottom:-.5rem}
.cform input,.cform textarea{border:1px solid var(--p2);border-radius:12px;padding:.8rem 1rem;font-family:var(--sans);font-size:.85rem;color:var(--td);background:#fff;transition:border-color .2s}
.cform input:focus,.cform textarea:focus{outline:none;border-color:var(--p4)}
.cform textarea{resize:vertical;min-height:110px}
.cform button{align-self:flex-start;margin-top:.5rem}

/* ============================================
   RESPONSIVE
   ============================================ */
@media(max-width:768px){
  nav{padding:.8rem 1.2rem}
  .nav-toggle{display:flex}
  .nav-links{position:fixed;top:60px;left:1rem;right:1rem;background:#fff;flex-direction:column;gap:.25rem;padding:.6rem;border:1.5px solid var(--p2);border-radius:20px;box-shadow:0 12px 30px rgba(217,77,125,.16);transform:translateY(-12px);opacity:0;transition:transform .25s ease,opacity .25s ease;pointer-events:none}
  .nav-links.open{transform:translateY(0);opacity:1;pointer-events:auto}
  .nav-links a{padding:.75rem 1rem;width:100%;font-size:.78rem;border-radius:14px;text-align:center}
  .page{padding-top:64px}
  .home-hero{min-height:calc(100vh - 64px)}
  .about-inner{grid-template-columns:1fr}
  .aph{aspect-ratio:1/1;max-width:300px;margin:0 auto}
  .exp-item{grid-template-columns:1fr;gap:.3rem}
  .exp-item::before{display:none}
  .exp-date{text-align:left;padding-right:0}
  .gg{grid-template-columns:repeat(2,1fr)}
  .gi.w,.gi.t{grid-column:span 1;grid-row:span 1;aspect-ratio:1/1}
}
@media(max-width:480px){
  nav{padding:.9rem 1rem}
  .gg{grid-template-columns:1fr}
}