:root {
  --bg: #f7f7f5;
  --bg2: #f3f3f0;
  --ink: #333333;
  --muted: #666666;
  --neon: #6c5ce7;
  --neon-strong: #4b3bbd;
  --card: #ffffff;
  --ring: rgba(108, 92, 231, 0.25);
}
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 1200px at 70% -10%, rgba(178,132,255,.06), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  position:relative;

  /* page transitions */
  opacity:0;
  transform: translateY(6px);
  transition: opacity .35s ease, transform .35s ease;
}
body.page-ready{ opacity:1; transform:none }
body.page-fade-out{ opacity:0; transform: translateY(6px) }

body > *:not(.bg-canvas){ position:relative; z-index:1 }
.bg-canvas{ position:fixed; inset:0; z-index:0; opacity:.14; pointer-events:none; }
body:after{
  content:""; position:fixed; inset:0;
  background:radial-gradient(60% 50% at 50% 40%, transparent 60%, rgba(0,0,0,.3));
  z-index:0; pointer-events:none;
}

/* Fixed hamburger on edge (right) */
.menu.edge.right{
  position:fixed; top:14px; right:16px; z-index:5;
  background:rgba(0,0,0,.2); backdrop-filter: blur(4px);
  border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:10px 9px;
}
.menu{background:none; border:0; cursor:pointer; display:grid; gap:5px}
.menu span{width:22px; height:2px; background:var(--ink); display:block; border-radius:2px}

/* Drawer from right */
.drawer.right{
  position:fixed; inset:0 0 0 auto; width:min(300px, 85vw);
  transform:translateX(100%);
  background:rgba(13,15,20,.96);
  border-left:1px solid rgba(255,255,255,.08);
  box-shadow: 0 0 40px rgba(0,0,0,.5);
  transition: transform .28s ease;
  z-index:4;
  padding:clamp(16px, 3vw, 24px);
}
.drawer-nav{ display:grid; gap:14px; margin-top:10px }
.drawer-nav a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: .04em;
}

.drawer-nav a:hover {
  color: var(--neon);
}

.scrim{ position:fixed; inset:0; background:rgba(0,0,0,.35);
  opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:3; }
body.nav-open .drawer.right{ transform:none }
body.nav-open .scrim{ opacity:1; pointer-events:auto }

.container{width:min(1200px,92%); margin-inline:auto}
h1,h2,h3{font-family:Cinzel,serif; margin:0 0 .4rem}
p{margin:.25rem 0 1rem; color:var(--muted); line-height:1.6}
.site-header{ display:flex; align-items:center; justify-content:flex-end; padding:1.2rem 0; }
.page{padding:3rem 0}
.page-title{font-size:clamp(2rem,5vw,3rem); margin-bottom:1rem}
.back-link{color:var(--muted); text-decoration:none}
.back-link:hover{color:var(--neon)}

.hero{ display:grid; grid-template-columns: 1.1fr 1fr; align-items:center; min-height:calc(100vh - 80px); gap:2rem; }
.brand{font-size:clamp(2.2rem, 6.2vw, 4.5rem); letter-spacing:.04em}
.brand .line{display:block}
.tag{margin-top:.3rem}
.cta-row{display:flex; align-items:center; gap:1rem; margin-top:2rem}
.inline-nav{display:flex; align-items:center; gap:.6rem; color:var(--muted)}
.inline-nav a{color:var(--ink); text-decoration:none}
.inline-nav a:hover{color:var(--neon)}
.btn{ padding:.85rem 1.4rem; border-radius:999px; text-decoration:none; letter-spacing:.08em; font-weight:600;
  display:inline-block; transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease; }
.btn-outline{ color:var(--ink); border:1.8px solid var(--ink); background:transparent; box-shadow:0 0 0 0 var(--ring); }
.btn-outline:hover{ transform:translateY(-2px); box-shadow:0 0 0 8px var(--ring); border-color:var(--neon); color:var(--neon) }
.btn-primary{background:#a259ff; color:#0b0714; border:none}
.btn-primary:hover{filter:brightness(1.08)}
.hero-visual{position:relative; width:100%; aspect-ratio:1/1; max-width:540px; margin-inline:auto}
.hero-img{ width:100%; height:100%; object-fit:contain; filter:grayscale(1) brightness(.95) contrast(1.06);
  transform:perspective(1000px) rotateY(0deg) translateZ(0); transition:transform .35s ease; will-change:transform; position:relative; z-index:2; }
.glow{ position:absolute; inset:auto -20% -10% -20%; height:55%;
  background:radial-gradient(50% 60% at 50% 50%, rgba(178,132,255,.45), transparent 65%); filter:blur(40px); z-index:1; }
.reticle{ position:absolute; left:52%; top:54%; width:14px; height:14px; border:2px solid var(--neon-strong);
  border-radius:50%; box-shadow:0 0 12px 2px var(--ring); z-index:3; }
.hero-visual:hover .hero-img{ transform:perspective(1000px) rotateY(8deg) translateZ(5px) }
.divider .rule{height:1px; background:linear-gradient(90deg, transparent, rgba(178,132,255,.30), transparent); margin:2rem 0 3rem}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; padding-bottom:2rem}
.card{background:var(--card); padding:1.2rem; border-radius:18px; border:1px solid rgba(255,255,255,.06)}
.card:hover{box-shadow:0 0 0 8px var(--ring) inset}
.about, .contact{padding:2rem 0}
.contact-form{ width:min(780px,100%); display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:.8rem }
.contact-form label{display:grid; gap:.4rem; color:var(--muted)}
.contact-form input, .contact-form textarea{ background:#10131a; border:1px solid rgba(255,255,255,.08); color:var(--ink); padding:.9rem 1rem; border-radius:12px; }
.contact-form .full{grid-column:1 / -1}
.footer{padding:3rem 0; color:var(--muted); text-align:center}
@media (max-width: 900px){
  .hero{grid-template-columns:1fr; gap:1rem; min-height:auto; padding:1rem 0 2rem}
  .hero-visual{max-width:460px}
  .grid-3{grid-template-columns:1fr}
}

/* ---- Portfolio grid ---- */
.portfolio-controls {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.8rem;
  margin: 0.5rem 0 1.2rem;
}
.input {
  width: 100%;
  background: #10131a;
  border: 1px solid rgba(255,255,255,.08);
  color: var(--ink);
  padding: .9rem 1rem;
  border-radius: 12px;
}
.tag-pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.pill {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--ink);
  padding: .45rem .75rem;
  border-radius: 999px;
  font-size: .9rem;
  cursor: pointer;
}
.pill.on { border-color: var(--neon); box-shadow: 0 0 0 6px var(--ring) inset; color: var(--neon); }

.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}
.project-card {
  background: var(--card);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 18px;
  padding: 1.1rem;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.project-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 0 8px var(--ring) inset;
  border-color: rgba(255,255,255,.12);
}
.project-link { color: inherit; text-decoration: none; display: grid; gap: .6rem; }
.project-meta { display: flex; align-items: center; gap: .5rem; color: var(--muted); }
.badge {
  border: 1px solid rgba(255,255,255,.14);
  padding: .2rem .5rem;
  border-radius: 999px;
  font-size: .75rem;
}
.date { margin-left: auto; font-size: .8rem; color: var(--muted); }
.project-title { margin: 0; font-family: Cinzel, serif; font-size: 1.2rem; }
.project-desc { margin: 0; color: var(--muted); }

@media (max-width: 1024px) { .projects-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .projects-grid { grid-template-columns: 1fr; } }

/* --- Typewriter headings --- */
.type-target{
  display:block;
  min-height:1em;
  font-family: Cinzel, serif;
  position:relative;
  white-space:nowrap;
  border-right:.1em solid transparent;
}
.type-target.typing{ border-color: var(--ink); }
@keyframes caret-blink{ 50% { border-color: transparent; } }
.type-target.typing{ animation: caret-blink 1s steps(1,end) infinite; }

/* --- Hero image entrance --- */
.hero-visual .hero-img{
  opacity:0;
  transform: translateY(14px) scale(.975);
  transition: transform .9s cubic-bezier(.2,.8,.2,1), opacity .9s ease;
  will-change: transform, opacity;
}
.page-ready .hero-visual .hero-img.entered{
  opacity:1;
  transform: translateY(0) scale(1);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .type-target{ animation:none !important; border-right:0; }
  .hero-visual .hero-img{ transition:none; opacity:1; transform:none; }
}

/* === Compact desktop layout on phones (keep 2 columns) === */

/* iOS safe-area for the hamburger */
.menu.edge.right{
  top: calc(14px + env(safe-area-inset-top));
  right: calc(16px + env(safe-area-inset-right));
}

/* Undo the old "stack to 1 column" rule under 900px */
@media (max-width: 900px){
  .hero{
    grid-template-columns: .95fr 1.05fr;   /* keep 2 columns, text left / image right */
    align-items: center;
    min-height: calc(100vh - 80px);
    gap: 0.9rem;
    padding: 0.8rem 0 1.4rem;
  }
  .brand{
    /* smaller, but still elegant, to fit alongside the image */
    font-size: clamp(1.6rem, 9vw, 2.6rem);
    letter-spacing: .02em;
    line-height: 1.05;
  }
  .tag{ font-size: clamp(.9rem, 2.8vw, 1rem); }
  .cta-row{ gap: .7rem; flex-wrap: wrap; }
  .btn{ padding: .75rem 1.1rem; }

  /* Keep the Sisyphus image on the right and contained */
  .hero-visual{
    max-width: 320px;              /* tune: 280–340px */
    margin: 0 0 0 auto;            /* push to the right edge of grid */
  }
  .hero-visual .hero-img{ object-fit: contain; }

  /* So the two columns don’t get squeezed too hard on very small widths */
  .container{ width: 94%; }
}

/* Extra small phones: still two columns, but tighter */
@media (max-width: 600px){
  .hero{
    grid-template-columns: 1fr 1fr;  /* equal columns */
    gap: 0.7rem;
  }
  .brand{ font-size: clamp(1.4rem, 10vw, 2.2rem); }
  .hero-visual{ max-width: min(45vw, 260px); }
  .reticle{ display:none; }          /* optional: declutter small screens */
}

/* Make sure the Matrix canvas stays subtle on bright backgrounds */
.bg-canvas{ opacity: .14; } /* bump up/down between .10 – .22 to taste */