/* ===== Playful + Surreal theme ===== */
:root{
  --bg0:#07060a;
  --bg1:#0b0a12;
  --ink:#f6f2ff;
  --muted:#c8bedc;
  --aqua:#7fffd4;
  --pink:#ff5fd7;
  --lime:#b8ff5a;
  --sun:#ffd166;
  --violet:#8c7cff;
  --stroke: rgba(246,242,255,.18);
  --shadow: 0 22px 60px rgba(0,0,0,.55);
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: "Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 700px at 15% 10%, rgba(255,95,215,.25), transparent 60%),
    radial-gradient(900px 600px at 90% 25%, rgba(127,255,212,.18), transparent 60%),
    radial-gradient(900px 900px at 50% 120%, rgba(140,124,255,.18), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:-40%;
  pointer-events:none;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.03) 0 1px, transparent 2px),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,.02) 0 1px, transparent 2px);
  background-size: 180px 180px, 220px 220px;
  transform: rotate(12deg);
  opacity:.8;
  mix-blend-mode: overlay;
  animation: drift 18s linear infinite;
}
@keyframes drift{
  0%{ transform:translate3d(0,0,0) rotate(12deg); }
  100%{ transform:translate3d(60px,40px,0) rotate(12deg); }
}
.doodles{
  position:fixed; inset:0; pointer-events:none; z-index:0;
}
.doodle{ position:absolute; width:220px; height:220px; opacity:.55; mix-blend-mode:screen; animation: floaty 10s ease-in-out infinite; }
.doodle:nth-child(1){ left:-40px; top:80px; background: radial-gradient(circle at 30% 30%, rgba(184,255,90,.9), transparent 60%); border-radius: 58% 42% 44% 56% / 45% 45% 55% 55%; animation-duration: 12s;}
.doodle:nth-child(2){ right:-60px; top:180px; background: radial-gradient(circle at 40% 40%, rgba(255,95,215,.9), transparent 60%); border-radius: 44% 56% 62% 38% / 50% 38% 62% 50%; animation-duration: 14s;}
.doodle:nth-child(3){ left:12%; bottom:-80px; width:340px; height:340px; background: radial-gradient(circle at 50% 40%, rgba(127,255,212,.75), transparent 60%); border-radius: 52% 48% 44% 56% / 60% 44% 56% 40%; animation-duration: 16s;}
@keyframes floaty{ 0%,100%{ transform: translate3d(0,0,0) rotate(-2deg);} 50%{ transform: translate3d(0,-18px,0) rotate(2deg);} }
.main-container{ position:relative; z-index:1; max-width: 1220px; margin: 0 auto; padding: 22px 16px 42px; }
header{ text-align:center; padding: 72px 14px 22px; }
header h1{ font-family:"Orbitron", system-ui, sans-serif; font-size: clamp(2.2rem, 5vw, 3.4rem); margin:0 0 10px; letter-spacing:.02em; text-shadow: 0 0 22px rgba(255,95,215,.18);}
header .lead{ margin:0 auto; max-width:760px; color:var(--muted); line-height:1.6; font-size:1.12rem;}
nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; padding:14px 12px; margin:18px auto 8px; border:1px solid var(--stroke); background: rgba(17,16,24,.55); backdrop-filter: blur(10px); border-radius:18px; box-shadow: 0 10px 40px rgba(0,0,0,.35);}
nav a{ text-decoration:none; color:var(--ink); padding:10px 14px; border-radius:999px; border:1px solid rgba(246,242,255,.14); background: rgba(0,0,0,.18); transition: transform .18s ease, background .18s ease, border-color .18s ease; font-weight:600; font-size:.95rem;}
nav a:hover{ transform: translateY(-2px) rotate(-.4deg); background: rgba(255,95,215,.12); border-color: rgba(255,95,215,.35);}
.grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:22px; padding:26px 6px 12px;}
.project{ position:relative; overflow:hidden; border-radius:22px; border:1px solid rgba(246,242,255,.16); background: rgba(17,16,24,.72); backdrop-filter: blur(10px); box-shadow: var(--shadow); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;}
.project::after{ content:""; position:absolute; inset:-40% -30%; background:
    radial-gradient(circle at 30% 30%, rgba(127,255,212,.18), transparent 60%),
    radial-gradient(circle at 70% 60%, rgba(255,95,215,.16), transparent 60%),
    radial-gradient(circle at 40% 80%, rgba(184,255,90,.14), transparent 60%);
  transform: rotate(12deg); opacity:.9; pointer-events:none;}
.grid .project:hover{ transform: translateY(-6px) rotate(-.25deg); border-color: rgba(127,255,212,.35); box-shadow: 0 28px 80px rgba(0,0,0,.6);}
.grid .project img{
  width:100%;
  display:block;
  height: 190px;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.02);
}

/* Project pages: show full images */
.section .project img, .page-wrap img, .project-page img{
  height: auto;
  object-fit: contain;
  border-radius: 18px;
}

.project-content{ position:relative; padding:14px 14px 16px; z-index:1;}
.project-content h3{ margin:4px 0 8px; font-size:1.18rem;}
.project-content p{ margin:0; color:var(--muted); line-height:1.5;}
.project-content p a{ color: var(--aqua); font-weight:700;}
.project-content p a:hover{ color: var(--pink); }
.project .sticker{ position:absolute; top:12px; right:12px; z-index:2; padding:6px 10px; border-radius:999px; font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; border:1px solid rgba(246,242,255,.22); background: rgba(0,0,0,.25); transform: rotate(6deg);}
.project:nth-child(6n+1) .sticker{ color: var(--pink); border-color: rgba(255,95,215,.45); }
.project:nth-child(6n+2) .sticker{ color: var(--aqua); border-color: rgba(127,255,212,.45); }
.project:nth-child(6n+3) .sticker{ color: var(--lime); border-color: rgba(184,255,90,.45); }
.project:nth-child(6n+4) .sticker{ color: var(--sun); border-color: rgba(255,209,102,.45); }
.project:nth-child(6n+5) .sticker{ color: var(--violet); border-color: rgba(140,124,255,.45); }
.page-wrap{ max-width:1200px; margin:0 auto; padding:24px 10px 56px;}
.hero{ width:100%; border-radius:22px; display:block; box-shadow: 0 22px 70px rgba(0,0,0,.6); border:1px solid rgba(246,242,255,.14);}
.note{ max-width:820px; margin:14px auto 0; color: var(--muted); line-height:1.7;}
.back{ text-align:center; padding:32px 0 18px;}
.back a{ color: var(--aqua); font-weight:800; text-decoration:none;}
.back a:hover{ color: var(--pink); text-decoration:underline;}

/* Global media fit */
img { max-width: 100%; height: auto; }
canvas, iframe { max-width: 100%; }
.page-wrap { overflow: visible; }
.main-container { overflow: visible; }

/* Nav button to match links */
nav button{
  appearance:none;
  border:1px solid rgba(246,242,255,.14);
  background: rgba(0,0,0,.18);
  color: var(--ink);
  padding: 10px 14px;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
nav button:hover{
  transform: translateY(-2px) rotate(.4deg);
  background: rgba(184,255,90,.12);
  border-color: rgba(184,255,90,.35);
}

/* Fixed neon frame (prevents content clipping and keeps border consistent) */
body{
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
body::after{
  content:"";
  position: fixed;
  inset: 14px;
  border: 12px double var(--aqua);
  border-radius: 30px;
  pointer-events: none;
  z-index: 20;
  box-shadow: 0 0 0 1px rgba(246,242,255,.08) inset, 0 0 40px rgba(127,255,212,.10);
}
.main-container{
  padding: 34px 22px 56px !important;
}
@media (max-width: 520px){
  body::after{ inset: 10px; }
  .main-container{ padding: 28px 16px 46px !important; }
}

/* Project-page images: never crop */
.page-wrap img, main img{
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Image series grids */
.grid2{ display:grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 900px){ .grid2{ grid-template-columns: 1fr 1fr; } }
.grid3{ display:grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 900px){ .grid3{ grid-template-columns: 1fr 1fr 1fr; } }

/* Make Red Angel feel lighter on the grid */
.project.angel img{
  height: 150px;
  object-fit: contain;
  background: rgba(0,0,0,.35);
}