/* neoralphy.eu - direction A "Now Building", committed dark theme.
   Zero-build: this file + index.html + assets. No frameworks, no fonts fetched. */

:root{
  --ground:#13161B;
  --panel:#1B2028;
  --panel-2:#20262f;
  --ink:#EAE6DC;
  --muted:#98A0AD;
  --line:#2A313B;
  --chipbg:#242B34;

  /* project hues (dark-tuned) */
  --hotpath:#E77B52;
  --gwulle:#E0B34A;
  --abbina:#C4788F;
  --callscape:#4EC6AE;

  /* the heat ramp - hotpath-heatmap's actual dark palette, used as the site signature */
  --heat-1:#3E9E90; --heat-2:#2C86B8; --heat-3:#3B82F6; --heat-4:#7C5CEC; --heat-5:#C24DD6;
}

*{box-sizing:border-box;}
html{background:var(--ground); scroll-behavior:smooth;}
body{
  margin:0;
  font-family:"Avenir Next","Segoe UI",system-ui,-apple-system,sans-serif;
  background:var(--ground);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:880px; margin:0 auto; padding:0 1.25rem;}

/* the signature: a hairline heat ramp */
.ramp{
  height:3px; border:0; margin:0;
  background:linear-gradient(90deg,var(--heat-1),var(--heat-2),var(--heat-3),var(--heat-4),var(--heat-5));
}

/* --- hero --- */
header.hero{padding:4.5rem 0 3rem;}
.hero-row{display:flex; gap:2.2rem; align-items:center; flex-wrap:wrap;}
.hero-text{flex:1 1 26rem; min-width:0;}
.eyebrow{
  font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin:0 0 .7rem;
}
h1{
  font-size:clamp(2rem,6vw,2.9rem); font-weight:700; letter-spacing:-.015em;
  line-height:1.08; margin:0 0 1.1rem; text-wrap:balance;
}
.bio{max-width:56ch; color:var(--muted); font-size:1.02rem; margin:0 0 1.4rem;}
.bio strong{color:var(--ink); font-weight:600;}
.hero-links{display:flex; gap:.75rem; flex-wrap:wrap;}
.btn{
  display:inline-block; font-size:.85rem; font-weight:600; text-decoration:none;
  padding:.5rem 1rem; border-radius:8px; border:1px solid var(--line);
  color:var(--ink); background:var(--panel);
}
.btn:hover{border-color:var(--muted);}
.portrait-frame{
  flex:0 0 auto; align-self:center;
  width:clamp(150px,22vw,200px); height:clamp(150px,22vw,200px);
  border-radius:50%; overflow:hidden;
  border:3px solid var(--panel-2);
  box-shadow:0 0 0 1px var(--line), 0 14px 40px rgba(0,0,0,.45);
}
.portrait-frame img{
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:center; /* asset is pre-cropped square, face-centered */
}

/* --- projects --- */
section.projects{padding:1.2rem 0 3rem;}
h2{
  font-size:.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin:0 0 1.1rem;
}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem;}
a.card{
  display:flex; flex-direction:column; gap:.55rem;
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  border-top:3px solid var(--pc);
  padding:1.15rem 1.2rem 1.25rem;
  color:inherit; text-decoration:none;
  transition:transform .15s ease, border-color .15s ease;
}
a.card:hover{transform:translateY(-2px); border-color:var(--pc);}
.card h3{margin:0; font-size:1.12rem; font-weight:700; color:var(--pc);}
.card p{margin:0; font-size:.9rem; color:var(--muted);}
.card .why{
  margin-top:.15rem; font-size:.82rem; font-style:italic; color:var(--muted);
  border-left:2px solid var(--pc); padding-left:.65rem; opacity:.92;
}
.card .why b{font-style:normal; font-weight:700; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--pc); margin-right:.35rem;}
.card .meta{display:flex; align-items:center; gap:.6rem; margin-top:.4rem;}
.chip{
  font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  background:var(--chipbg); border:1px solid var(--line);
  color:var(--muted); border-radius:999px; padding:.18rem .6rem;
}
.card .kind{font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);}

/* --- hobbies --- */
section.hobbies{padding:0 0 3rem;}
.tags{display:flex; flex-wrap:wrap; gap:.55rem;}
.tag{
  font-size:.82rem; font-weight:600; color:var(--muted);
  background:var(--panel); border:1px solid var(--line); border-radius:999px;
  padding:.38rem .85rem;
}
.tag em{font-style:italic; font-weight:500; opacity:.85;}

/* --- footer / meta pages --- */
footer{border-top:1px solid var(--line); padding:1.6rem 0 3rem; margin-top:1rem;}
footer .cols{display:flex; gap:2rem; flex-wrap:wrap; justify-content:space-between; align-items:baseline;}
footer p{margin:.2rem 0; font-size:.82rem; color:var(--muted);}
footer a{color:var(--ink); text-decoration:none; border-bottom:1px dotted var(--muted);}
footer a:hover{border-bottom-style:solid;}

/* --- document pages (privacy, eula) --- */
main.doc{padding:3rem 0 4rem;}
main.doc h1{font-size:clamp(1.5rem,4vw,2rem);}
main.doc h2{
  font-size:1.05rem; font-weight:700; letter-spacing:0; text-transform:none;
  color:var(--ink); margin:2rem 0 .5rem;
}
main.doc h2 .dot{display:inline-block; width:.6rem; height:.6rem; border-radius:50%; margin-right:.5rem; background:var(--pc,var(--muted));}
main.doc h3{font-size:.92rem; font-weight:700; color:var(--ink); margin:1.3rem 0 .35rem;}
main.doc p, main.doc li{max-width:68ch; color:var(--muted); font-size:.95rem;}
main.doc p strong, main.doc li strong{color:var(--ink);}
main.doc p a, main.doc li a{color:var(--ink); text-decoration:none; border-bottom:1px dotted var(--muted);}
main.doc p a:hover, main.doc li a:hover{border-bottom-style:solid;}
main.doc .updated{font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;}
.notice{
  background:var(--panel); border:1px solid var(--line); border-left:4px solid var(--heat-4);
  border-radius:8px; padding:.9rem 1.1rem; max-width:68ch; font-size:.9rem; color:var(--muted);
}
.backlink{display:inline-block; margin-bottom:2rem; font-size:.85rem; color:var(--muted); text-decoration:none;}
.backlink:hover{color:var(--ink);}

/* --- abbina landing (/abbina/) --- */
.abbina-hero{padding:4.5rem 0 2.6rem;}
.btn-abbina{border-color:var(--abbina); color:var(--abbina);}
.btn-abbina:hover{border-color:var(--abbina); background:var(--panel-2);}
.abbina-section{padding:0 0 3rem;}
.abbina-copy{max-width:68ch; color:var(--muted); font-size:.95rem; margin:0 0 .9rem;}
.abbina-copy strong{color:var(--ink);}
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem;}
.tile{
  background:var(--panel); border:1px solid var(--line); border-top:3px solid var(--abbina);
  border-radius:12px; padding:1.05rem 1.1rem 1.15rem;
}
.tile h3{margin:0 0 .4rem; font-size:1rem; font-weight:700; color:var(--abbina);}
.tile p{margin:0; font-size:.9rem; color:var(--muted);}
.steps{list-style:none; counter-reset:step; margin:0; padding:0; display:flex; flex-direction:column; gap:1rem; max-width:62ch;}
.steps li{counter-increment:step; display:flex; gap:.9rem; align-items:flex-start; color:var(--muted); font-size:.95rem;}
.steps li::before{
  content:counter(step); flex:0 0 auto;
  width:1.7rem; height:1.7rem; display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; border:1px solid var(--abbina); color:var(--abbina);
  font-size:.8rem; font-weight:700; margin-top:.1rem;
}
.steps strong{color:var(--ink);}