/* Beto's Games - shared styles */
:root{
  --paper:#f7f3ec;
  --paper-2:#efe9df;
  --ink:#1d1518;
  --ink-2:#584f52;
  --red:#e64b2e;
  --red-dark:#c53a20;
  --line:rgba(29,21,24,0.12);
  --max:1180px;
  --pad:clamp(1.25rem,5vw,4rem);
  --display:"Archivo Black",system-ui,sans-serif;
  --body:"Montserrat",system-ui,sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:1.0425rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img,video{max-width:100%;display:block;}

.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);}

/* ---------- type helpers ---------- */
.eyebrow{
  font-family:var(--display);
  font-size:0.85rem;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--red);
}
h2.sec{
  font-family:var(--display);
  font-size:clamp(1.9rem,4.5vw,3rem);
  letter-spacing:0.01em;
  text-transform:uppercase;
  margin:0.5rem 0 0;
  line-height:1.05;
}
h2.sec::before{content:"> ";color:var(--red);}
.sec-intro{color:var(--ink-2);max-width:62ch;margin:1rem 0 0;}

/* ---------- nav ---------- */
header.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(247,243,236,0.92);
  backdrop-filter:blur(10px);
  border-bottom:2px solid var(--ink);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:68px;}
.brand{display:flex;align-items:center;gap:0.65rem;}
.brand img{width:34px;height:34px;image-rendering:pixelated;}
.brand .bt{display:flex;flex-direction:column;line-height:1.05;}
.brand .bn{font-family:var(--display);font-size:0.95rem;letter-spacing:0.06em;white-space:nowrap;}
.brand .br{font-family:var(--display);font-size:0.56rem;letter-spacing:0.24em;color:var(--red);text-transform:uppercase;}
.nav-links{display:flex;gap:1.8rem;font-family:var(--display);font-size:0.78rem;letter-spacing:0.14em;text-transform:uppercase;}
.nav-links a{padding:0.3rem 0;border-bottom:3px solid transparent;transition:border-color .15s ease,color .15s ease;}
.nav-links a:hover{color:var(--red);border-color:var(--red);}
@media (max-width:640px){ .nav-links{gap:1.1rem;font-size:0.68rem;} .brand .bt{display:none;} }

/* ---------- hero band ---------- */
.hero{
  background:var(--red);
  color:#fff;
  padding:clamp(3rem,9vh,6rem) 0 clamp(2.6rem,7vh,4.5rem);
  position:relative;
  overflow:hidden;
}
.hero::after{ /* speckle-free diagonal echo of the card back */
  content:"";position:absolute;right:-6%;bottom:-45%;width:55%;height:120%;
  background:var(--red-dark);transform:rotate(-14deg);
}
.hero .wrap{position:relative;z-index:1;}
.hero .eyebrow{color:rgba(255,255,255,0.85);}
h1.title{
  font-family:var(--display);
  font-size:clamp(2.6rem,9vw,6.4rem);
  line-height:0.98;
  margin:0.6rem 0 0;
  letter-spacing:0.01em;
  text-transform:uppercase;
}
h1.title .chev{color:rgba(255,255,255,0.55);}
.hero p.sub{margin:1.3rem 0 0;max-width:52ch;color:rgba(255,255,255,0.92);font-size:clamp(1rem,1.5vw,1.15rem);}

/* ---------- home cards ---------- */
.cards{padding:clamp(2.5rem,6vh,4.5rem) 0 clamp(3rem,7vh,5rem);}
.reel-card{
  border:3px solid var(--ink);
  background:#000;
  box-shadow:10px 10px 0 var(--ink);
}
.reel-card video{width:100%;aspect-ratio:16/9;object-fit:cover;}
.big-card{
  border:3px solid var(--ink);
  box-shadow:10px 10px 0 var(--ink);
  padding:clamp(1.6rem,3.5vw,2.6rem);
  position:relative;overflow:hidden;
  margin-top:clamp(1.6rem,3.5vw,2.6rem);
}
.big-card h3{font-family:var(--display);font-size:clamp(1.4rem,2.6vw,2rem);margin:0;text-transform:uppercase;letter-spacing:0.02em;position:relative;z-index:1;}
.ahis-card{
  color:#fff;
  background:#0a0a0c url("img/ahis-1.jpg") center/cover no-repeat;
  aspect-ratio:16/9;
  display:flex;align-items:center;justify-content:center;
}
.ahis-card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,8,0.15),rgba(5,5,8,0.55) 70%,rgba(5,5,8,0.85));}
.ahis-card .ahis-logo{width:min(380px,55%);position:relative;z-index:1;}
.ahis-card .btn{position:absolute;left:50%;bottom:clamp(1.4rem,3.5vw,2.4rem);transform:translateX(-50%);z-index:1;}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--display);
  font-size:0.82rem;letter-spacing:0.14em;text-transform:uppercase;
  background:var(--red);color:#fff;
  padding:0.95rem 1.6rem;
  border:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:0.6rem;
  transition:background .15s ease,transform .1s ease;
  position:relative;z-index:1;
}
.btn:hover{background:var(--red-dark);}
.btn:active{transform:translate(2px,2px);}
.btn img{height:1.15em;width:auto;}
.btn.dark{background:var(--ink);}
.btn.dark:hover{background:#000;}
.btn.ghost{background:transparent;color:var(--ink);border:3px solid var(--ink);padding:0.8rem 1.45rem;}
.btn.ghost:hover{background:var(--ink);color:#fff;}

/* ---------- sections ---------- */
section.block{padding:clamp(3.2rem,8vh,5.5rem) 0;}
section.block.alt{background:var(--paper-2);}
.sec-head{margin-bottom:2.2rem;}

/* ---------- portfolio grid ---------- */
.folio-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:clamp(1.1rem,2.5vw,1.8rem);
}
.tile{
  border:3px solid var(--ink);
  background:#0d0d0f;
  box-shadow:7px 7px 0 var(--ink);
  transition:transform .12s ease,box-shadow .12s ease;
  display:block;position:relative;overflow:hidden;
}
.tile:hover{transform:translate(-2px,-2px);box-shadow:10px 10px 0 var(--red);}
.tile img{width:100%;aspect-ratio:16/10;object-fit:cover;}
.tile .tag{
  position:absolute;top:0;left:0;
  background:var(--red);color:#fff;
  font-family:var(--display);font-size:0.6rem;letter-spacing:0.16em;text-transform:uppercase;
  padding:0.35rem 0.6rem;
}
.tile .info{padding:0.85rem 1rem 1rem;color:#fff;background:#0d0d0f;}
.tile .info h3{font-family:var(--display);font-size:1.02rem;margin:0;text-transform:uppercase;letter-spacing:0.03em;}
.tile .info span{font-size:0.8rem;color:rgba(255,255,255,0.55);}

/* ---------- music ---------- */
.player{border:3px solid var(--ink);background:#fff;box-shadow:10px 10px 0 var(--ink);}
.track{
  display:flex;align-items:center;gap:1rem;
  padding:0.8rem 1.1rem;border-bottom:2px solid var(--line);
  user-select:none;
}
.track:last-child{border-bottom:none;}
.track.playing{background:rgba(230,75,46,0.07);}
.t-btn{
  flex:none;width:42px;height:42px;border:3px solid var(--ink);background:#fff;
  font-size:0.85rem;cursor:pointer;display:grid;place-items:center;
  transition:background .12s ease,color .12s ease;color:var(--ink);
}
.t-btn:hover{background:var(--red);border-color:var(--red);color:#fff;}
.track.playing .t-btn{background:var(--red);border-color:var(--red);color:#fff;}
.t-name{flex:1;min-width:0;font-weight:600;font-size:0.98rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.t-name small{display:block;font-weight:400;color:var(--ink-2);font-size:0.78rem;}
.t-seek{flex:2;display:none;align-items:center;gap:0.7rem;}
.track.playing .t-seek{display:flex;}
.t-seek input[type=range]{
  flex:1;appearance:none;-webkit-appearance:none;height:6px;background:var(--paper-2);outline:none;border:1px solid var(--line);
}
.t-seek input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:16px;height:16px;background:var(--red);border:2px solid var(--ink);cursor:pointer;
}
.t-time{font-family:ui-monospace,monospace;font-size:0.74rem;color:var(--ink-2);flex:none;}
@media (max-width:700px){
  .track{flex-wrap:wrap;}
  .t-seek{flex-basis:100%;order:3;}
}

/* ---------- spotify ---------- */
.spotify-card{border:3px solid var(--ink);box-shadow:10px 10px 0 var(--ink);background:#121212;padding:0;overflow:hidden;}
.spotify-card iframe{display:block;width:100%;border:0;}
.spotify-cta{margin-top:1.6rem;}

/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:0.8fr 1.2fr;gap:clamp(1.8rem,4vw,3.5rem);align-items:start;}
@media (max-width:760px){ .about-grid{grid-template-columns:1fr;} .about-grid .photo{max-width:340px;} }
.about-grid .photo{border:3px solid var(--ink);box-shadow:10px 10px 0 var(--red);position:relative;aspect-ratio:4/5;overflow:hidden;}
.about-grid .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease;}
.about-grid .photo img.active{opacity:1;}
@media (prefers-reduced-motion:reduce){ .about-grid .photo img{transition:none;} }
.about-grid p{margin:0 0 1.1rem;color:var(--ink-2);}
.about-grid p strong{color:var(--ink);}

/* ---------- footer ---------- */
footer{background:var(--ink);color:rgba(255,255,255,0.75);padding:2.2rem 0;margin-top:0;}
.foot-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;font-size:0.85rem;}
.foot-inner a:hover{color:var(--red);}
.foot-links{display:flex;gap:1.6rem;font-family:var(--display);font-size:0.7rem;letter-spacing:0.14em;text-transform:uppercase;}

/* ---------- project subpages ---------- */
.proj-head{padding-top:clamp(2.6rem,7vh,4.5rem);}
.proj-head .meta{font-family:var(--display);font-size:0.78rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--red);}
.proj-head h1{
  font-family:var(--display);font-size:clamp(2.2rem,6vw,4.2rem);
  line-height:1;margin:0.6rem 0 0;text-transform:uppercase;letter-spacing:0.01em;
}
.proj-body{padding-top:2.2rem;padding-bottom:clamp(3rem,7vh,5rem);}
.proj-desc{max-width:70ch;color:var(--ink-2);}
.proj-desc p{margin:0 0 1.1rem;}
.proj-desc strong{color:var(--ink);}
.proj-actions{display:flex;gap:1rem;flex-wrap:wrap;margin:1.6rem 0 0;}
.media{display:grid;gap:clamp(1.2rem,2.5vw,1.8rem);margin-top:2.4rem;}
.media .frame{border:3px solid var(--ink);box-shadow:8px 8px 0 var(--ink);overflow:hidden;background:#000;}
.media .frame video{width:100%;}
.media-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,2.5vw,1.8rem);}
@media (max-width:700px){ .media-grid{grid-template-columns:1fr;} }
.media .frame.single{max-width:min(500px,100%);margin:0 auto;}
.proj-nav{display:flex;justify-content:space-between;gap:1rem;border-top:2px solid var(--line);padding-top:2rem;padding-bottom:3rem;flex-wrap:wrap;}
.proj-nav a{font-family:var(--display);font-size:0.8rem;letter-spacing:0.12em;text-transform:uppercase;}
.proj-nav a:hover{color:var(--red);}
.back-link{display:inline-block;margin-bottom:0.8rem;font-family:var(--display);font-size:0.72rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-2);}
.back-link:hover{color:var(--red);}

:focus-visible{outline:3px solid var(--red);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .tile,.btn{transition:none;}
}