/* =========================================================
   June Park — playful / neo-brutalist / risograph portfolio
   ========================================================= */

:root{
  --cream:#FFF3DE;
  --cream-deep:#FBE9C8;
  --ink:#241A2E;         /* deep plum-black */
  --ink-soft:#4a3d55;

  --coral:#FF5D5D;
  --tangerine:#FF9F1C;
  --grape:#7B4BFF;
  --sky:#2EC4E6;
  --lime:#A3E635;
  --pink:#FF7BC5;

  --night:#241A2E;       /* dark section bg */

  --shadow:6px 6px 0 var(--ink);
  --shadow-lg:10px 10px 0 var(--ink);
  --radius:22px;
  --border:3px solid var(--ink);

  --maxw:1200px;
  --font-display:"Bricolage Grotesque", system-ui, sans-serif;
  --font-body:"DM Sans", system-ui, sans-serif;
  --font-hand:"Gloria Hallelujah", cursive;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* subtle paper dot texture */
  background-image:radial-gradient(var(--cream-deep) 1.1px, transparent 1.2px);
  background-size:22px 22px;
}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.02;margin:0;letter-spacing:-.02em}
a{color:inherit}
:focus-visible{outline:3px solid var(--grape);outline-offset:3px;border-radius:6px}

.skip-link{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--cream);padding:.7rem 1.1rem;border-radius:0 0 12px 0;z-index:200}
.skip-link:focus{left:0}

/* ---------------- layout helpers ---------------- */
section{padding:clamp(64px,9vw,120px) clamp(20px,5vw,64px);position:relative}
.eyebrow{
  font-family:var(--font-body);
  font-weight:700;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--coral);margin:0 0 1rem;
}
.eyebrow-ink{color:var(--ink-soft)}
.section-head{max-width:760px;margin:0 auto clamp(40px,5vw,64px);text-align:center}
.section-title{font-size:clamp(2rem,5.4vw,3.6rem);font-weight:800}
.section-lead{font-size:1.12rem;color:var(--ink-soft);margin:1rem auto 0;max-width:56ch}
.wink{color:var(--grape);font-family:var(--font-body);white-space:nowrap}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-display);font-weight:700;font-size:1.02rem;
  padding:.85rem 1.5rem;border:var(--border);border-radius:100px;
  text-decoration:none;cursor:pointer;background:var(--cream);
  box-shadow:var(--shadow);transition:transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.btn:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--ink)}
.btn-primary{background:var(--coral);color:var(--cream)}
.btn-ghost{background:var(--cream)}
.btn-big{font-size:1.2rem;padding:1.05rem 1.9rem}

/* ---------------- NAV ---------------- */
.nav{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.7rem clamp(16px,4vw,40px);
  background:var(--cream-deep);border-bottom:3px solid var(--ink);
}
.brand{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;font-family:var(--font-display);font-weight:800;font-size:1.4rem}
.brand-mark{display:inline-flex;transform:rotate(-6deg);transition:transform .3s ease}
.brand:hover .brand-mark{transform:rotate(8deg) scale(1.05)}
.brand-star{color:var(--coral);margin:0 .12em;font-size:.75em;vertical-align:.15em}
.nav-links{display:flex;align-items:center;gap:.4rem}
.nav-links a{
  text-decoration:none;font-weight:600;padding:.5rem .9rem;border-radius:100px;
  transition:background .15s ease,color .15s ease;
}
.nav-links a:not(.nav-cta):hover{background:var(--cream);color:var(--grape)}
.nav-cta{
  background:var(--grape);color:var(--cream);border:2.5px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);font-family:var(--font-display);
  transition:transform .14s ease,box-shadow .14s ease;
}
.nav-cta:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink);background:var(--grape) !important;color:var(--cream) !important}
.nav-cta:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}

.nav-toggle{display:none;flex-direction:column;gap:5px;width:46px;height:42px;
  background:var(--cream);border:var(--border);border-radius:12px;box-shadow:3px 3px 0 var(--ink);cursor:pointer;align-items:center;justify-content:center}
.nav-toggle span{display:block;width:22px;height:3px;background:var(--ink);border-radius:3px;transition:transform .2s ease,opacity .2s ease}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

.mobile-menu{
  display:none;flex-direction:column;gap:.2rem;
  position:sticky;top:60px;z-index:99;background:var(--cream-deep);
  border-bottom:3px solid var(--ink);padding:.6rem 20px 1.1rem;
}
.mobile-menu.open{display:flex;animation:drop .25s ease}
@keyframes drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.mobile-menu a{text-decoration:none;font-family:var(--font-display);font-weight:700;font-size:1.3rem;padding:.6rem .3rem;border-bottom:2px dashed var(--cream)}
.mobile-menu a:hover{color:var(--grape)}
.mm-cta{color:var(--coral) !important;border-bottom:none !important}

/* ---------------- HERO ---------------- */
.hero{
  padding-top:clamp(48px,7vw,88px);padding-bottom:clamp(40px,6vw,72px);
  overflow:hidden;
}
.hero-inner{max-width:var(--maxw);margin:0 auto;position:relative;z-index:2;text-align:center}
.hero-title{
  font-size:clamp(2.6rem,8vw,5.6rem);font-weight:800;letter-spacing:-.035em;
  margin:.4rem auto .1rem;max-width:16ch;
}
.hl{position:relative;white-space:nowrap;padding:0 .08em;color:var(--ink)}
.hl::after{content:"";position:absolute;left:-.04em;right:-.04em;bottom:.06em;height:.42em;z-index:-1;border-radius:6px;transform:rotate(-1.4deg)}
.hl-lime::after{background:var(--lime)}
.hl-sky::after{background:var(--sky)}
.hl-coral::after{background:var(--coral);opacity:.8}
.hero-sub{font-size:clamp(1.05rem,2.3vw,1.3rem);color:var(--ink-soft);max-width:56ch;margin:1.6rem auto 0}
.hero-sub strong{color:var(--grape)}
.hero-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:2.2rem}
.hero-stats{
  list-style:none;display:flex;gap:clamp(1rem,4vw,3rem);justify-content:center;flex-wrap:wrap;
  margin:3rem auto 0;padding:0;
}
.hero-stats li{font-size:.98rem;color:var(--ink-soft)}
.hero-stats b{display:block;font-family:var(--font-display);font-size:1.9rem;color:var(--ink);line-height:1}

/* floating decorations */
.deco{position:absolute;pointer-events:none;z-index:1}
.blob{border-radius:46% 54% 62% 38% / 55% 45% 55% 45%;border:3px solid var(--ink);filter:none}
.b1{width:150px;height:150px;background:var(--tangerine);top:6%;left:4%;animation:float 7s ease-in-out infinite}
.b2{width:110px;height:110px;background:var(--sky);bottom:8%;right:6%;animation:float 8s ease-in-out infinite reverse;border-radius:60% 40% 40% 60% / 45% 60% 40% 55%}
.squiggle{width:130px;top:18%;right:8%;animation:float 6s ease-in-out infinite}
.s1 svg{width:100%}
.star{font-size:2.4rem;color:var(--grape);animation:spin 9s linear infinite}
.st1{top:12%;left:16%;color:var(--pink)}
.st2{bottom:20%;left:9%;color:var(--tangerine);font-size:1.8rem;animation-duration:12s}
.dot{width:26px;height:26px;border-radius:50%;background:var(--coral);border:3px solid var(--ink)}
.d1{top:30%;right:18%;animation:float 5s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-18px) rotate(6deg)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* hero entrance (safe: above the fold, plays on load, no invisible content) */
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.hero-inner>*{animation:rise .6s cubic-bezier(.2,.7,.2,1) both}
.hero-inner .eyebrow{animation-delay:.02s}
.hero-title{animation-delay:.1s}
.hero-sub{animation-delay:.22s}
.hero-actions{animation-delay:.34s}
.hero-stats{animation-delay:.46s}

/* ---------------- MARQUEE ---------------- */
.marquee{background:var(--ink);color:var(--cream);border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);overflow:hidden;padding:.85rem 0}
.marquee-track{display:flex;width:max-content;animation:scroll 26s linear infinite}
.marquee-track span{font-family:var(--font-display);font-weight:700;font-size:1.3rem;white-space:nowrap;padding-right:1rem}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------------- WORK ---------------- */
.work{background:var(--cream)}
.filters{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin:0 auto clamp(32px,4vw,48px)}
.chip{
  font-family:var(--font-display);font-weight:700;font-size:.98rem;
  padding:.55rem 1.2rem;border:var(--border);border-radius:100px;background:var(--cream);
  cursor:pointer;box-shadow:3px 3px 0 var(--ink);transition:transform .12s ease,box-shadow .12s ease,background .12s ease,color .12s ease;
}
.chip:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.chip.is-active{background:var(--grape);color:var(--cream)}

.work-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.5vw,32px)}
.card{
  background:var(--cream);border:var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;
  transition:transform .18s ease,box-shadow .18s ease;
}
.card:hover{transform:translate(-4px,-6px) rotate(-.6deg);box-shadow:var(--shadow-lg)}
.card-media{background:var(--c,var(--cream-deep));border-bottom:3px solid var(--ink);aspect-ratio:4/3;overflow:hidden}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.card:hover .card-media img{transform:scale(1.06) rotate(.6deg)}
.card-body{padding:1.3rem 1.4rem 1.5rem}
.card-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.7rem}
.card-tags span{font-size:.72rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;background:var(--c);color:var(--ink);border:2px solid var(--ink);border-radius:100px;padding:.2rem .6rem}
.card h3{font-size:1.5rem;font-weight:800;margin-bottom:.4rem}
.card-body p{color:var(--ink-soft);font-size:.98rem;margin:0}
.work-empty{text-align:center;font-family:var(--font-hand);font-size:1.2rem;color:var(--ink-soft);margin-top:2rem}

/* ---------------- ABOUT ---------------- */
.about{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,6vw,80px);align-items:center;
  max-width:var(--maxw);margin:0 auto;
}
.about-portrait{position:relative;justify-self:center}
.portrait-frame{
  display:block;width:min(340px,72vw);aspect-ratio:1;border:var(--border);border-radius:32px;
  overflow:hidden;background:var(--lime);box-shadow:var(--shadow-lg);transform:rotate(-3deg);
}
.portrait-frame img{width:100%;height:100%;object-fit:cover}
.portrait-badge{
  position:absolute;bottom:-16px;right:-10px;background:var(--pink);color:var(--ink);
  font-family:var(--font-hand);font-size:1.1rem;padding:.4rem 1rem;border:var(--border);
  border-radius:100px;box-shadow:3px 3px 0 var(--ink);transform:rotate(6deg);
}
.about-copy p{color:var(--ink-soft);margin:0 0 1.1rem;max-width:60ch}
.about-copy .section-title{margin-bottom:1.4rem;font-size:clamp(1.7rem,3.6vw,2.6rem)}
.about-facts{list-style:none;padding:0;margin:1.6rem 0 0;display:grid;gap:.7rem}
.about-facts li{display:flex;gap:.8rem;align-items:baseline;font-weight:600;color:var(--ink)}
.fkey{flex:0 0 auto;font-family:var(--font-display);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  background:var(--cream-deep);border:2px solid var(--ink);border-radius:100px;padding:.2rem .7rem;min-width:88px;text-align:center}

/* ---------------- HIRE (dark band) ---------------- */
.hire{background:var(--night);color:var(--cream);
  background-image:radial-gradient(rgba(255,255,255,.05) 1.1px,transparent 1.2px);background-size:22px 22px}
.hire .eyebrow{color:var(--lime)}
.section-title-light{color:var(--cream)}
.section-lead-light{color:#d9cfe0}
.service-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2vw,26px)}
.service{
  background:var(--cream);color:var(--ink);border:var(--border);border-radius:var(--radius);
  padding:1.6rem 1.4rem;box-shadow:6px 6px 0 var(--c);transition:transform .16s ease,box-shadow .16s ease;
}
.service:hover{transform:translate(-4px,-4px);box-shadow:10px 10px 0 var(--c)}
.service-emoji{display:inline-grid;place-items:center;width:56px;height:56px;font-size:1.7rem;
  background:var(--c);border:var(--border);border-radius:16px;margin-bottom:1rem;box-shadow:3px 3px 0 var(--ink)}
.service h3{font-size:1.35rem;font-weight:800;margin-bottom:.5rem}
.service p{color:var(--ink-soft);font-size:.96rem;margin:0}

.process{max-width:var(--maxw);margin:clamp(56px,7vw,88px) auto 0}
.process-title{text-align:center;color:var(--cream);font-size:clamp(1.6rem,3.5vw,2.3rem);font-weight:800;margin-bottom:clamp(32px,4vw,48px)}
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2vw,26px)}
.steps li{background:rgba(255,255,255,.05);border:2.5px solid rgba(255,255,255,.22);border-radius:18px;padding:1.4rem 1.3rem}
.step-n{display:inline-grid;place-items:center;width:44px;height:44px;font-family:var(--font-display);font-weight:800;font-size:1.3rem;
  background:var(--lime);color:var(--ink);border:2.5px solid var(--ink);border-radius:50%;margin-bottom:.9rem}
.steps h4{font-size:1.15rem;color:var(--cream);margin-bottom:.35rem;font-weight:700}
.steps p{color:#cdc2d6;font-size:.92rem;margin:0}

/* ---------------- QUOTES ---------------- */
.quotes{background:var(--cream)}
.quote-row{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.5vw,30px)}
.quote{
  margin:0;background:var(--cream);border:var(--border);border-radius:var(--radius);
  padding:1.7rem 1.6rem 1.3rem;box-shadow:6px 6px 0 var(--c);position:relative;
}
.quote::before{content:"\201C";position:absolute;top:-.35em;left:.35em;font-family:var(--font-display);font-size:4rem;color:var(--c);line-height:1}
.quote p{font-size:1.06rem;font-weight:500;margin:.6rem 0 1rem;position:relative}
.quote footer{font-size:.9rem;color:var(--ink-soft);font-weight:600}

/* ---------------- CONTACT ---------------- */
.contact{background:var(--tangerine);border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);text-align:center;overflow:hidden}
.contact-inner{max-width:760px;margin:0 auto;position:relative;z-index:2}
.contact .eyebrow{color:var(--ink)}
.contact-title{font-size:clamp(2rem,5.4vw,3.6rem);font-weight:800;margin-bottom:1rem}
.contact-sub{font-size:1.15rem;color:#5a3410;max-width:52ch;margin:0 auto;font-weight:500}
.contact-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin:2.2rem 0 1.6rem}
.contact .btn-primary{background:var(--ink);color:var(--cream)}
.contact .btn-ghost{background:var(--cream)}
.socials{list-style:none;display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;padding:0;margin:0}
.socials a{display:inline-block;font-family:var(--font-display);font-weight:700;text-decoration:none;
  background:var(--cream);border:var(--border);border-radius:100px;padding:.45rem 1.1rem;box-shadow:3px 3px 0 var(--ink);
  transition:transform .12s ease,box-shadow .12s ease}
.socials a:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.contact .st3{top:14%;left:8%;color:var(--grape);font-size:2.6rem}
.contact .st4{bottom:16%;right:10%;color:var(--sky);font-size:2rem;animation-duration:11s}

/* ---------------- FOOTER ---------------- */
.footer{background:var(--ink);color:var(--cream);padding:clamp(40px,5vw,60px) clamp(20px,5vw,64px)}
.footer .brand{color:var(--cream);font-size:1.6rem}
.footer-top{max-width:var(--maxw);margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1.2rem;
  padding-bottom:1.6rem;border-bottom:2px dashed rgba(255,255,255,.25)}
.footer-nav{display:flex;gap:.4rem;flex-wrap:wrap}
.footer-nav a{text-decoration:none;font-weight:600;padding:.4rem .9rem;border-radius:100px;transition:background .15s ease}
.footer-nav a:hover{background:rgba(255,255,255,.12);color:var(--lime)}
.footer-bottom{max-width:var(--maxw);margin:1.4rem auto 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.8rem;
  font-size:.88rem;color:#c9bdd3}
.to-top{text-decoration:none;font-weight:700;font-family:var(--font-display);color:var(--lime)}
.to-top:hover{text-decoration:underline}

/* ---------------- responsive ---------------- */
@media (max-width:900px){
  .work-grid{grid-template-columns:repeat(2,1fr)}
  .service-grid,.steps,.quote-row{grid-template-columns:repeat(2,1fr)}
  .about{grid-template-columns:1fr;text-align:center}
  .about-copy .section-title,.about-copy p{margin-left:auto;margin-right:auto}
  .about-facts{justify-items:center;max-width:520px;margin-inline:auto}
  .about-facts li{justify-content:center}
}
@media (max-width:640px){
  body{font-size:16px}
  .nav-links{display:none}
  .nav-toggle{display:flex}
  .work-grid,.service-grid,.steps,.quote-row{grid-template-columns:1fr}
  .hero-stats{gap:1.6rem}
  .btn{width:auto}
  .hero-actions .btn{flex:1 1 auto;justify-content:center}
  .footer-bottom{flex-direction:column;text-align:center}
  .b1{width:96px;height:96px}.b2{width:74px;height:74px}.squiggle{width:88px}
  .st1,.st2{font-size:1.4rem}
}

/* ---------------- reduced motion ---------------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;scroll-behavior:auto !important}
  .marquee-track{animation:none;transform:none}
  .btn,.card,.chip,.service,.socials a{transition:none}
}