/* Minimal Portfolio (Pastel) */
:root{
  --ink:#2a2430; --ink-soft:rgba(42,36,48,.72);
  --card:rgba(255,255,255,.55); --card2:rgba(255,255,255,.45);
  --stroke:rgba(0,0,0,.08); --shadow:0 18px 60px rgba(0,0,0,.12);
  --radius:22px; --max:1180px; --gap:20px;
  --bg-a:#f3c8d8; --bg-b:#bfe0dc; --bg-c:#b9c9ef;
}
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans";
  background: radial-gradient(circle at 30% 0%, rgba(255,255,255,.8), transparent 55%),
              linear-gradient(135deg, var(--bg-a), var(--bg-b), var(--bg-c));
  overflow-x:hidden;
}
.display{
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  font-style: italic; letter-spacing:.02em; text-transform:uppercase;
  text-shadow:0 1px 0 rgba(255,255,255,.4);
}
.kicker{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); font-size:12px;
}
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 22px;
  background: linear-gradient(90deg, rgba(255,215,235,.32), rgba(220,235,255,.32));
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--stroke);
}
.nav{display:flex; gap:18px; align-items:center; font-weight:600; font-size:13px; letter-spacing:.08em; text-transform:uppercase;}
.nav a{color:var(--ink); text-decoration:none; opacity:.75}
.nav a:hover{opacity:1}
.nav a.active{opacity:1; text-decoration:underline; text-underline-offset:4px}
.bg{
  position:fixed; inset:0; z-index:-2;
  background-size:cover; background-position:center;
  filter:saturate(1.05) contrast(.98);
}
.bg::after{
  content:"";
  position:absolute;
  inset:0;
  /* dreamcore tinted mist (lets background show through) */
  background:
    radial-gradient(circle at 22% 18%, rgba(255,210,235,.32), rgba(210,235,255,.16) 46%, rgba(255,255,255,.04) 100%),
    linear-gradient(180deg, rgba(220,235,255,.16), rgba(255,220,240,.10));
  backdrop-filter: blur(1px) saturate(112%);
}
.wrap{max-width:var(--max); margin:0 auto; padding:34px 22px 70px}
.hero{min-height:calc(100svh - 54px); display:grid; place-items:center; text-align:center;}
.hero h1{margin:0; font-size:clamp(44px, 6vw, 92px); line-height:.95;}
.hero .sub{
  margin-top:16px; color:rgba(255,255,255,.85);
  font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  text-shadow:0 2px 18px rgba(0,0,0,.25);
}
.section-title{display:flex; align-items:baseline; gap:12px; margin:18px 0 18px;}
.section-title h2{margin:0; font-size:clamp(28px, 4vw, 54px); line-height:1;}
.section-title .hint{font-size:12px; color:var(--ink-soft);}
.grid{display:grid; gap:var(--gap);}
.grid.cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.cards-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1050px){.grid.cards-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.grid.cards-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.grid.cards-3,.grid.cards-4{grid-template-columns:1fr}.hero h1{font-size:clamp(38px,10vw,64px)}}
.card{
  background:var(--card); border:1px solid var(--stroke); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden;
  text-decoration:none; color:inherit;
  transition:transform .25s ease, background .25s ease;
}
.card:hover{transform:translateY(-6px); background:var(--card2);}
.thumb{height:150px; background:rgba(0,0,0,.06); background-size:cover; background-position:center;}
.card .pad{padding:16px 16px 18px}
.card .label{margin:0 0 6px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; font-size:12px; opacity:.75;}
.card .title{margin:0; font-size:20px; line-height:1.2;}
.card .meta{margin-top:10px; color:var(--ink-soft); font-size:12px;}
.about{display:grid; grid-template-columns:1fr 1.2fr; gap:22px; align-items:start;}
@media (max-width:900px){.about{grid-template-columns:1fr}}
.portrait{border-radius:var(--radius); border:1px solid var(--stroke); box-shadow:var(--shadow); overflow:hidden; background:rgba(255,255,255,.75);}
.portrait img{display:block; width:100%; height:auto;}
.viewer{background:rgba(255,255,255,.82); border:1px solid var(--stroke); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden;}
.viewer-head{display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-bottom:1px solid var(--stroke);}
.viewer-head a{font-size:12px; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; opacity:.8}
.viewer-head a:hover{opacity:1}
iframe.pdf{width:100%; height:78svh; border:0; background:rgba(255,255,255,.6);}
.footer{margin-top:34px; color:rgba(0,0,0,.45); font-size:12px; letter-spacing:.10em; text-transform:uppercase;}


/* brand */
.brand{
  font-weight:800;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-size:12px;
  opacity:.85;
}
.brand a{color:inherit; text-decoration:none;}

.email{ text-transform:none; letter-spacing:0; font-size:13px; opacity:.75; }

.bio{margin:10px 0 0; font-size:15.5px; line-height:1.75; color:var(--ink-soft);}

/* Welcome emphasis + dreamcore particles */
.welcome{position:relative;}
.welcome-title{
  font-size: clamp(56px, 8vw, 96px);
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.06;
}
.welcome-deco{
  position:absolute;
  right: clamp(-40px, -2vw, -80px);
  top: 18%;
  width: 160px;
  height: 180px;
  pointer-events:none;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.08));
}
.bubble{
  position:absolute;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
  animation: floaty 6.8s ease-in-out infinite;
}
.b1{top: 12px; left: 12px; animation-delay: 0s; transform: scale(.95);}
.b2{top: 58px; left: 52px; width: 18px; height: 18px; animation-delay: 1.6s;}
.b3{top: 108px; left: 22px; width: 22px; height: 22px; animation-delay: 3.1s;}
.star{
  position:absolute;
  color: rgba(255,255,255,.65);
  font-size: 22px;
  text-shadow: 0 0 18px rgba(255,210,240,.35);
  animation: twinkle 4.6s ease-in-out infinite;
}
.s1{top: 22px; left: 96px;}
.s2{top: 92px; left: 106px; animation-delay: 1.8s; font-size:18px;}
.s3{top: 132px; left: 78px; animation-delay: .9s; font-size:16px;}
@keyframes floaty{
  0%{transform: translateY(0) translateX(0) scale(1); opacity:.55;}
  50%{transform: translateY(-12px) translateX(4px) scale(1.05); opacity:1;}
  100%{transform: translateY(0) translateX(0) scale(1); opacity:.55;}
}
@keyframes twinkle{
  0%,100%{opacity:.35; transform: translateY(0) rotate(0deg);}
  50%{opacity:1; transform: translateY(-6px) rotate(6deg);}
}
@media (max-width: 720px){
  .welcome-deco{right: 10px; top: 12%; transform: scale(.9);}
}