:root{
    --void:#0c0c0d;
    --concrete:#161615;
    --panel:#1d1c1a;
    --caution:#c9a13b;
    --hazard:#8a2f1f;
    --bone:#e8e2d0;
    --dim:#8a8578;
    --line:#2c2a26;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--void);
    color:var(--bone);
    font-family:'IBM Plex Mono', 'Courier New', monospace;
    line-height:1.6;
    overflow-x:hidden;
  }
  @font-face{
    font-family:'IBM Plex Mono';
    src:local('IBM Plex Mono');
  }

  /* subtle scan/grain texture */
  body::before{
    content:"";
    position:fixed; inset:0;
    background-image:
      repeating-linear-gradient(0deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 3px);
    pointer-events:none;
    z-index:999;
  }

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

  header{
    position:fixed; top:0; left:0; right:0;
    display:flex; justify-content:space-between; align-items:center;
    padding:22px 5vw;
    background:linear-gradient(to bottom, rgba(12,12,13,0.95), rgba(12,12,13,0));
    z-index:100;
  }
  .brand{
    font-family:'Georgia', serif;
    font-weight:700;
    font-size:1.1rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--bone);
  }
  .brand span{color:var(--caution);}
  nav{display:flex; gap:2.2rem;}
  nav a{
    font-size:0.72rem;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--dim);
    position:relative;
    padding-bottom:4px;
    transition:color 0.2s;
  }
  nav a:hover{color:var(--caution);}
  nav a::after{
    content:"";
    position:absolute; left:0; bottom:0;
    width:0; height:1px;
    background:var(--caution);
    transition:width 0.25s;
  }
  nav a:hover::after{width:100%;}

  /* HERO */
  .hero{
    min-height:100vh;
    display:flex; flex-direction:column; justify-content:center;
    padding:0 5vw;
    position:relative;
    border-bottom:1px solid var(--line);
  }
  .hero-tag{
    font-size:0.72rem;
    letter-spacing:0.3em;
    text-transform:uppercase;
    color:var(--hazard);
    margin-bottom:1.4rem;
  }
  .hero h1{
    font-family:'Georgia', serif;
    font-weight:400;
    font-size:clamp(2.6rem, 8vw, 6.4rem);
    line-height:0.98;
    letter-spacing:-0.01em;
    color:var(--bone);
    max-width:14ch;
  }
  .hero h1 em{
    font-style:normal;
    color:var(--caution);
  }
  .hero p{
    margin-top:1.8rem;
    max-width:44ch;
    color:var(--dim);
    font-size:0.95rem;
  }
  .hero-meta{
    position:absolute;
    right:5vw; bottom:3rem;
    text-align:right;
    font-size:0.68rem;
    color:var(--dim);
    letter-spacing:0.1em;
    display:flex; flex-direction:column; gap:0.3rem;
  }
  .scroll-cue{
    position:absolute; left:5vw; bottom:3rem;
    font-size:0.68rem; color:var(--dim);
    letter-spacing:0.2em; text-transform:uppercase;
    display:flex; align-items:center; gap:0.6rem;
  }
  .scroll-cue::before{
    content:"";
    width:1px; height:36px;
    background:var(--dim);
    animation:pulse 2.2s ease-in-out infinite;
  }
  @keyframes pulse{
    0%,100%{opacity:0.2;}
    50%{opacity:0.8;}
  }

  section{padding:7rem 5vw; border-bottom:1px solid var(--line);}
  .section-head{
    display:flex; justify-content:space-between; align-items:flex-end;
    margin-bottom:3rem;
    flex-wrap:wrap; gap:1rem;
  }
  .eyebrow{
    font-size:0.7rem;
    letter-spacing:0.28em;
    text-transform:uppercase;
    color:var(--caution);
    margin-bottom:0.6rem;
  }
  .section-head h2{
    font-family:'Georgia', serif;
    font-weight:400;
    font-size:clamp(1.8rem, 4vw, 2.8rem);
    color:var(--bone);
  }
  .section-note{
    color:var(--dim);
    font-size:0.8rem;
    max-width:32ch;
    text-align:right;
  }

  /* ABOUT */
  .about-grid{
    display:grid;
    grid-template-columns:1fr 1.4fr;
    gap:4rem;
  }
  .about-mark{
    border:1px solid var(--line);
    background:var(--panel);
    aspect-ratio:1;
    display:flex; align-items:center; justify-content:center;
    position:relative;
  }
  .about-mark::before{
    content:"273";
    font-family:'Georgia', serif;
    font-size:5rem;
    color:var(--line);
  }
  .about-mark::after{
    content:"";
    position:absolute; inset:14px;
    border:1px solid var(--hazard);
    opacity:0.35;
  }
  .about-body p{
    color:var(--dim);
    font-size:0.95rem;
    margin-bottom:1.4rem;
    max-width:56ch;
  }
  .about-body strong{color:var(--bone); font-weight:600;}
  .stat-row{
    display:flex; gap:2.5rem;
    margin-top:2.2rem;
    flex-wrap:wrap;
  }
  .stat{border-left:2px solid var(--caution); padding-left:0.9rem;}
  .stat b{display:block; font-family:'Georgia', serif; font-size:1.6rem; color:var(--bone);}
  .stat span{font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--dim);}

  /* GAMES */
  .game-card{
    display:grid;
    grid-template-columns:220px 1fr auto;
    gap:2.5rem;
    align-items:center;
    padding:2rem 0;
    border-top:1px solid var(--line);
    transition:background 0.2s;
  }
  .game-card:hover{background:rgba(201,161,59,0.03);}
  .game-card:last-child{border-bottom:1px solid var(--line);}
  .game-thumb{
    aspect-ratio:16/10;
    background:
      linear-gradient(160deg, var(--panel), var(--void)),
      repeating-linear-gradient(45deg, transparent, transparent 6px, rgba(201,161,59,0.05) 6px, rgba(201,161,59,0.05) 7px);
    border:1px solid var(--line);
    position:relative;
    overflow:hidden;
  }
  .game-thumb::after{
    content:attr(data-tag);
    position:absolute; top:8px; left:8px;
    font-size:0.6rem; letter-spacing:0.1em;
    color:var(--hazard); text-transform:uppercase;
    border:1px solid var(--hazard);
    padding:2px 6px;
  }
  .game-info h3{
    font-family:'Georgia', serif;
    font-size:1.5rem; font-weight:400;
    color:var(--bone);
    margin-bottom:0.5rem;
  }
  .game-info p{color:var(--dim); font-size:0.85rem; max-width:52ch;}
  .game-status{
    text-align:right;
    font-size:0.68rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--caution);
    white-space:nowrap;
  }
  .game-status span{display:block; color:var(--dim); margin-top:0.3rem; font-size:0.65rem;}

  /* BLOG */
  .post-list{display:flex; flex-direction:column;}
  .post-row{
    display:grid;
    grid-template-columns:120px 1fr auto;
    gap:2rem;
    padding:1.6rem 0;
    border-top:1px solid var(--line);
    align-items:baseline;
  }
  .post-row:last-child{border-bottom:1px solid var(--line);}
  .post-date{color:var(--dim); font-size:0.72rem; letter-spacing:0.06em;}
  .post-title{color:var(--bone); font-size:1rem;}
  .post-title:hover{color:var(--caution);}
  .post-tag{
    font-size:0.65rem; letter-spacing:0.1em; text-transform:uppercase;
    color:var(--hazard); text-align:right;
  }

  footer{
    padding:3rem 5vw;
    display:flex; justify-content:space-between; align-items:center;
    flex-wrap:wrap; gap:1rem;
  }
  footer .brand{font-size:0.85rem;}
  .foot-links{display:flex; gap:1.6rem;}
  .foot-links a{font-size:0.72rem; color:var(--dim); letter-spacing:0.08em; text-transform:uppercase;}
  .foot-links a:hover{color:var(--caution);}

  @media (max-width:820px){
    .about-grid{grid-template-columns:1fr;}
    .game-card{grid-template-columns:1fr; gap:1rem;}
    .game-status{text-align:left;}
    .post-row{grid-template-columns:1fr; gap:0.4rem;}
    .post-tag{text-align:left;}
    nav{gap:1.2rem;}
    nav a{font-size:0.64rem;}
  }

/* ===== PAGE-LEVEL ADDITIONS (games / blog / post) ===== */

.page-hero{
  min-height:52vh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:9rem 5vw 4rem;
  border-bottom:1px solid var(--line);
}
.page-hero .hero-tag{margin-bottom:1rem;}
.page-hero h1{
  font-family:'Georgia', serif;
  font-weight:400;
  font-size:clamp(2.2rem, 6vw, 4.4rem);
  line-height:1.02;
  max-width:16ch;
}
.page-hero p{
  margin-top:1.4rem;
  max-width:52ch;
  color:var(--dim);
  font-size:0.95rem;
}
.breadcrumb{
  font-size:0.68rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--dim); margin-bottom:1.6rem;
}
.breadcrumb a{color:var(--caution);}
.breadcrumb a:hover{text-decoration:underline;}

/* UEB detail page */
.ueb-shot{
  aspect-ratio:16/9;
  background:
    linear-gradient(160deg, var(--panel), var(--void)),
    repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(201,161,59,0.05) 8px, rgba(201,161,59,0.05) 9px);
  border:1px solid var(--line);
  margin-bottom:5rem;
  position:relative;
}
.ueb-shot::after{
  content:"SCREENSHOT PLACEHOLDER";
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:0.68rem; letter-spacing:0.16em; color:var(--dim);
}
.detail-grid{
  display:grid;
  grid-template-columns:1fr 320px;
  gap:4rem;
  margin-bottom:5rem;
}
.detail-body p{
  color:var(--dim);
  font-size:0.95rem;
  margin-bottom:1.3rem;
  max-width:60ch;
}
.detail-body h3{
  font-family:'Georgia', serif;
  font-weight:400;
  font-size:1.4rem;
  color:var(--bone);
  margin:2.4rem 0 1rem;
}
.spec-box{
  border:1px solid var(--line);
  background:var(--panel);
  padding:1.8rem;
  height:fit-content;
}
.spec-row{
  display:flex; justify-content:space-between;
  padding:0.7rem 0;
  border-bottom:1px solid var(--line);
  font-size:0.78rem;
}
.spec-row:last-child{border-bottom:none;}
.spec-row span:first-child{color:var(--dim); letter-spacing:0.06em; text-transform:uppercase; font-size:0.68rem;}
.spec-row span:last-child{color:var(--bone); text-align:right;}
.cta-btn{
  display:block; text-align:center;
  margin-top:1.6rem;
  padding:0.9rem;
  border:1px solid var(--caution);
  color:var(--caution);
  font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase;
  transition:background 0.2s, color 0.2s;
}
.cta-btn:hover{background:var(--caution); color:var(--void);}

.feature-strip{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  margin-bottom:5rem;
}
.feature-strip div{
  background:var(--void);
  padding:2rem;
}
.feature-strip b{
  display:block;
  font-family:'Georgia', serif;
  font-size:1.1rem;
  color:var(--bone);
  margin-bottom:0.5rem;
}
.feature-strip span{color:var(--dim); font-size:0.82rem;}

/* Blog index + post */
.post-full{
  max-width:70ch;
}
.post-full .post-meta{
  font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--dim); margin-bottom:2rem;
  display:flex; gap:1.5rem;
}
.post-full .post-meta .tag{color:var(--hazard);}
.post-full h1{
  font-family:'Georgia', serif; font-weight:400;
  font-size:clamp(2rem, 4.5vw, 3rem);
  margin-bottom:1.6rem;
  max-width:20ch;
}
.post-full p{
  color:var(--dim);
  font-size:0.98rem;
  margin-bottom:1.4rem;
}
.post-full strong{color:var(--bone);}

@media (max-width:820px){
  .detail-grid{grid-template-columns:1fr;}
  .feature-strip{grid-template-columns:1fr;}
}