/* =========================================================
   ANDRÉS SPATOLA — PORTFOLIO BASE.CSS

   Design language: workshop, not generic "dark portfolio."
   Warm near-black like oxidized steel, bone-white text like
   blueprint paper, rust-orange accent (a real oxidation/heat
   color, not a brand-pack red), muted machine-green for
   secondary signals. Spec-sheet typography for metadata —
   this is an engineer's world, title blocks and parts
   catalogs are the authentic reference, not decoration.
   ========================================================= */

:root{
  --bg:        #0a0908;
  --bg-panel:  #161412;
  --bg-card:   #1c1a17;
  --text:      #e8e4d9;
  --muted:     #8a8275;
  --line:      rgba(232,228,217,.10);
  --line-strong: rgba(232,228,217,.22);
  --rust:      #b94a2c;
  --rust-bright: #d65a36;
  --machine-green: #5c6f5e;
  --radius: 3px;
  --header-h: 80px;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter', sans-serif;
  line-height:1.7;
  overflow-x:hidden;
  position:relative;
}

/* Faint machined grid — like graph paper on a drafting table */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background-image:
    linear-gradient(rgba(232,228,217,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232,228,217,0.025) 1px, transparent 1px);
  background-size:38px 38px;
  pointer-events:none;
  z-index:0;
}

main, header, footer, section, .hero{
  position:relative;
  z-index:1;
}

h1,h2,h3,h4{
  font-family:'Archivo Black', 'Inter', sans-serif;
  font-weight:400;
  letter-spacing:-0.01em;
  color:var(--text);
}

p{
  color:var(--muted);
  max-width:640px;
}

a{
  color:inherit;
  text-decoration:none;
}

img, video{
  display:block;
  max-width:100%;
}

ul{
  list-style:none;
}

::selection{
  background:var(--rust);
  color:#fff;
}

/* Spec-line: the recurring "title block" metadata pattern —
   monospace, letter-spaced, uppercase. Used for dates,
   categories, project numbers, status. The authentic
   typographic voice of a parts catalog / drawing sheet. */
.spec{
  font-family:'IBM Plex Mono', monospace;
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}

.spec.rust{
  color:var(--rust-bright);
}

.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:.7rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--rust-bright);
  margin-bottom:14px;
}

h2.section-title{
  font-size:.95rem;
  font-family:'IBM Plex Mono', monospace;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--text);
  margin-bottom:6px;
}

.section-title .index-no{
  color:var(--rust-bright);
  margin-right:10px;
}

@media (prefers-reduced-motion: reduce){
  *{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline:2px solid var(--rust-bright);
  outline-offset:3px;
}