/* ---------- Colours and type ---------- */
:root{
  --ink:#030100;          /* page background */
  --ink-2:#17110d;        /* raised sections */
  --paper:#e5d4aa;        /* main text */
  --paper-dim:#b5a68c;    /* secondary text */
  --gold:#b88a38;         /* Una Sangre logo gold */
  --gold-soft:rgba(200,146,47,.35);
  --serif-display:"Cormorant Garamond", Georgia, serif;
  --serif-menu:"Cormorant SC", Georgia, serif;
  --serif-text:"EB Garamond", Georgia, serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ink); color:var(--paper);
  font-family:var(--serif-text); font-size:19px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--paper-dim); text-decoration:none}
a:hover{color:var(--paper)}
h2,h3{font-family:var(--serif-display); font-weight:500; letter-spacing:.02em; margin:0 0 .6em}
h2{font-size:clamp(2.2rem,5vw,3.2rem); color:var(--gold)}
h3{font-size:1.5rem; color:var(--paper); margin-top:2.2em}

/* ---------- Navigation ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:10;
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:.9rem clamp(16px,4vw,48px) 1.8rem;
  background:linear-gradient(to bottom, rgba(13,10,8,.92), rgba(13,10,8,0));
  backdrop-filter:blur(3px);
  -webkit-mask-image:linear-gradient(to bottom, #000 55%, transparent);
      mask-image:linear-gradient(to bottom, #000 55%, transparent);
  font-family:var(--serif-menu); font-size:1.1rem;
}
.nav__name{color:var(--paper); letter-spacing:.08em}
.nav nav{display:flex; gap:clamp(.8rem,2.5vw,2rem); flex-wrap:wrap; justify-content:flex-end}
.nav nav a{color:var(--paper-dim)}
.nav nav a:hover{color:var(--paper); text-decoration:none}

/* ---------- Hero ---------- */
.hero{position:relative; min-height:100svh; display:grid; place-items:center; overflow:hidden}
.hero__bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:60% center}
.hero__content{position:relative; text-align:center; padding:2rem 16px 12rem; max-width:760px}
.hero__logo{width:min(560px,82vw); margin:0 auto 1.4rem; transform:translateX(6%)}
.hero__line{font-family:var(--serif-display); font-style:italic; font-size:clamp(1.25rem,2.6vw,1.6rem); color:var(--paper); margin:0 0 2rem; text-shadow:0 2px 10px rgba(0,0,0,.8)}
.hero__actions{display:flex; gap:1rem; justify-content:center; flex-wrap:wrap}

.btn{
  display:inline-block; padding:.7rem 1.5rem; border:1px solid var(--gold-soft);
  color:var(--paper); font-family:var(--serif-display); font-size:1.15rem; letter-spacing:.06em;
  background:rgba(13,10,8,.45); transition:border-color .2s, background .2s;
}
.btn:hover{border-color:var(--gold); text-decoration:none}
.btn--gold{background:var(--gold); color:var(--ink); border-color:var(--gold)}
.btn--gold:hover{background:#cda14f}

/* ---------- Game ---------- */
section{padding:clamp(3rem,8vw,6rem) clamp(16px,6vw,96px)}
.game{display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(2rem,5vw,5rem); align-items:center; max-width:1200px; margin:0 auto}
.lead{font-size:1.3rem; color:var(--paper)}
.game p{color:var(--paper-dim)}
.game .lead{color:var(--paper)}
.game__capsule img{border:0px solid var(--gold-soft); box-shadow:0 20px 50px rgba(0,0,0,.6)}
.facts{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem 2rem; margin:2rem 0}
.facts dt{font-family:var(--serif-display); color:var(--gold); font-size:.95rem; letter-spacing:.12em; text-transform:uppercase}
.facts dd{margin:0}
.links{display:flex; gap:1.5rem; flex-wrap:wrap; font-family:var(--serif-display); font-size:1.15rem}



figure{margin:0}
figcaption{font-family:var(--serif-display); font-style:italic; color:var(--paper-dim); font-size:1rem; margin-top:.5rem; text-align:center}

/* ---------- Work ---------- */
.work{background:var(--ink-2)}
.work h2{text-align:center}
.masonry{columns:3 300px; column-gap:1.5rem; max-width:1300px; margin:2rem auto 0}
.masonry figure{break-inside:avoid; margin-bottom:1.5rem}

/* ---------- About & Résumé ---------- */
.about,.resume{max-width:800px; margin:0 auto}
.about p{color:var(--paper)}
.contact{font-size:1.2rem; margin:1.5rem 0}
.resume{border-top:1px solid var(--gold-soft)}
.resume__title{font-family:var(--serif-display); font-style:italic; font-size:1.3rem; color:var(--paper-dim); margin-top:-.4rem}
.resume p{margin:.3rem 0; color:var(--paper-dim)}
.resume b{color:var(--paper); font-weight:500}
.job{margin:1.6rem 0}
.job__head{display:flex; justify-content:space-between; gap:1rem; font-family:var(--serif-display); font-size:1.25rem; color:var(--gold); border-bottom:1px solid rgba(200,146,47,.18); padding-bottom:.2rem; margin-bottom:.5rem}

.foot{text-align:center; padding:3rem 16px; color:var(--paper-dim); font-size:.95rem}

/* ---------- Social icons (normal / hover swap) ---------- */
.socials{display:flex; gap:1.1rem; align-items:center; flex-wrap:wrap}
.icon{position:relative; display:inline-block; width:34px; height:34px}
.icon img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transition:none}
.icon .icon__hover{opacity:0}
.icon:hover .icon__hover{opacity:1}
.icon:focus-visible{outline:1px solid var(--gold); outline-offset:4px}

/* ---------- Big Steam wishlist button ---------- */
.wishlist{display:inline-flex; align-items:center; gap:1rem; padding:.4rem .6rem}
.wishlist:hover{text-decoration:none}
.icon--big{width:64px; height:64px}
.wishlist:hover .icon .icon__hover{opacity:1}
.wishlist__text{font-family:var(--serif-menu); font-size:2rem; letter-spacing:.08em; color:var(--gold); transition:color .25s, text-shadow .25s}
.wishlist:hover .wishlist__text{color:#e9cf96; text-shadow:0 0 18px rgba(202,170,113,.55)}

/* ---------- Screenshots ---------- */
.screens{display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem; max-width:1300px; margin:2rem auto 0}
.screens img{width:100%; aspect-ratio:16/9; object-fit:cover}
.work__title{margin-top:clamp(4rem,8vw,6rem)}
a.zoom{display:block; cursor:zoom-in}
a.zoom img{transition:filter .25s}
a.zoom:hover img{filter:brightness(1.12)}

/* ---------- Lightbox ---------- */
.lightbox{border:0; padding:0; background:transparent; max-width:96vw; max-height:94vh; overflow:visible}
.lightbox::backdrop{background:rgba(3,1,0,.92)}
.lightbox img{max-width:96vw; max-height:94vh; width:auto; height:auto; margin:auto; box-shadow:0 20px 60px rgba(0,0,0,.8)}
.lightbox button{position:fixed; top:12px; right:18px; background:none; border:0; color:var(--paper); font-size:2.4rem; line-height:1; cursor:pointer}

/* ---------- Phones ---------- */
@media (max-width:820px){
  body{font-size:18px}
  .game{grid-template-columns:1fr}
  .game__capsule{max-width:380px; margin:0 auto}
  .nav__name{display:none}
  .nav{justify-content:center}
  .job__head{flex-direction:column; gap:0}
  .screens{grid-template-columns:1fr}
  .wishlist__text{font-size:1.6rem}
  .icon--big{width:52px; height:52px}
}