:root{
  --bg:#faf7f2;
  --bg-alt:#f2ede3;
  --card:#ffffff;
  --orange:rgb(226, 159, 63);
  --orange-deep:#c9852f;
  --green:#73b759;
  --green-deep:#5a9843;
  --ink:#2c2a26;
  --dim:#77726a;
  --line:#e8e1d3;

  /* dark palette, used only for the hero + UEB-flavored moments */
  --void:#151412;
  --panel:#211f1c;
  --bone:#f3ede1;
  --hazard:#c9852f;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
@font-face{
  font-family:'VCR OSD Mono';
  src:url('fonts/vcr-osd-mono.woff2') format('woff2'),
      url('fonts/vcr-osd-mono.ttf') format('truetype');
  font-display:swap;
}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Raleway', sans-serif;
  line-height:1.65;
  overflow-x:hidden;
}

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:20px 5vw;
  background:rgba(250,247,242,0.9);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
  z-index:100;
}
.brand{
  font-family:'Raleway';
  font-weight:800;
  font-size:1.15rem;
  letter-spacing:0.06em;
  color:var(--green);
}
.brand span{color:var(--orange);}
nav{display:flex; gap:2rem;}
nav a{
  font-size:0.82rem;
  font-weight:600;
  letter-spacing:0.02em;
  color:var(--dim);
  position:relative;
  padding-bottom:4px;
  transition:color 0.2s;
}
nav a:hover{color:var(--orange-deep);}
nav a::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:0; height:2px;
  border-radius:2px;
  background:var(--green);
  transition:width 0.25s;
}
nav a:hover::after{width:100%;}

/* HERO — keeps the moody dark treatment on purpose, it's the UEB spotlight */
.hero{
  min-height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  padding:0 5vw;
  position:relative;
  background:var(--void);
  color:var(--bone);
  overflow:hidden;
  isolation:isolate;
}
.hero > *:not(video){
  position:relative;
  z-index:1;
}
.hero-tag{
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:var(--orange);
  margin-bottom:1.4rem;
}
.hero h1{
  font-weight:400;
  font-size:clamp(2.6rem, 8vw, 6.2rem);
  line-height:0.98;
  letter-spacing:-0.01em;
  color:var(--bone);
  max-width:16ch;
}
.hero h1 em{
  font-style:normal;
  color:var(--orange);
}
.hero p{
  margin-top:1.8rem;
  max-width:46ch;
  color:#c9c2b3;
  font-size:1rem;
}
.hero-meta{
  position:absolute;
  right:5vw; bottom:3rem;
  text-align:right;
  font-size:0.7rem;
  color:#a49d8d;
  letter-spacing:0.08em;
  display:flex; flex-direction:column; gap:0.3rem;
}
.scroll-cue{
  position:absolute; left:5vw; bottom:3rem;
  font-size:0.7rem; color:#a49d8d;
  letter-spacing:0.18em; text-transform:uppercase;
  display:flex; align-items:center; gap:0.6rem;
}
.scroll-cue::before{
  content:"";
  width:1px; height:36px;
  background:var(--orange);
  animation:pulse 2.2s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{opacity:0.25;}
  50%{opacity:0.9;}
}

section{padding:6rem 5vw;}
section:not(.hero):nth-of-type(even){background:var(--bg-alt);}
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:3rem;
  flex-wrap:wrap; gap:1rem;
}
.eyebrow{
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.1em;
  color:var(--green-deep);
  margin-bottom:0.5rem;
}
.section-head h2{
  font-weight:800;
  font-size:clamp(1.8rem, 4vw, 2.6rem);
  color:rgb(226, 159, 63);
}
.section-note{
  color:var(--dim);
  font-size:0.85rem;
  max-width:32ch;
  text-align:right;
}

/* ABOUT */
.about-grid{
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:4rem;
}
.about-mark{
  border-radius:24px;
  background:var(--card);
  box-shadow:0 12px 30px rgba(44,42,38,0.08);
  border:1px solid var(--line);
  aspect-ratio:1;
  display:flex; align-items:center; justify-content:center;
  position:relative;
  overflow:hidden;
}
.about-mark::after{
  content:"";
  position:absolute; inset:0;
  border-radius:24px;
  box-shadow:inset 0 0 0 3px var(--green);
  opacity:0.25;
  pointer-events:none;
}
.about-body p{
  color:var(--dim);
  font-size:0.98rem;
  margin-bottom:1.3rem;
  max-width:58ch;
}
.about-body strong{color:var(--ink); font-weight:700;}
.stat-row{
  display:flex; gap:1.5rem;
  margin-top:2.2rem;
  flex-wrap:wrap;
}
.stat{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:1.1rem 1.4rem;
  border-left:4px solid var(--orange);
  box-shadow:0 6px 16px rgba(44,42,38,0.05);
}
.stat b{display:block; font-family:'Courier New', monospace; font-size:1.3rem; color:var(--ink);}
.stat span{font-size:0.7rem; letter-spacing:0.06em; text-transform:uppercase; color:#73b759;}

/* GAMES */
.game-card{
  display:grid;
  grid-template-columns:220px 1fr auto;
  gap:2.5rem;
  align-items:center;
  padding:1.6rem;
  margin-bottom:1.4rem;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:0 8px 22px rgba(44,42,38,0.06);
  transition:transform 0.2s, box-shadow 0.2s;
}
.game-card:hover{transform:translateY(-3px); box-shadow:0 14px 30px rgba(44,42,38,0.1);}
.game-thumb{
  aspect-ratio:16/10;
  border-radius:14px;
  background:
    linear-gradient(160deg, var(--panel), var(--void));
  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.62rem; font-weight:700; letter-spacing:0.06em;
  color:var(--void); text-transform:uppercase;
  background:var(--orange); border-radius:20px;
  padding:3px 9px;
}
.game-info h3{
  font-weight:800;
  font-size:1.5rem;
  color:var(--ink);
  margin-bottom:0.5rem;
}
.game-info p{color:var(--dim); font-size:0.88rem; max-width:52ch;}
.game-status{
  text-align:right;
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--green-deep);
  white-space:nowrap;
}
.game-status span{display:block; color:var(--dim); margin-top:0.3rem; font-size:0.68rem; font-weight:400;}

/* BLOG */
.post-list{display:flex; flex-direction:column; gap:0.9rem;}
.post-row{
  display:grid;
  grid-template-columns:150px 1fr auto;
  gap:1.5rem;
  padding:1.3rem 1.6rem;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  align-items:baseline;
  box-shadow:0 6px 16px rgba(44,42,38,0.05);
}
.post-date{color:var(--dim); font-size:0.75rem; font-weight:600;}
.post-title{color:var(--ink); font-size:1.02rem; font-weight:700;}
.post-title:hover{color:var(--orange-deep);}
.post-tag{
  font-size:0.68rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--green-deep); text-align:right;
}

footer{
  padding:3rem 5vw;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:1rem;
  background:var(--void);
  color:var(--bone);
}
footer .brand{font-size:0.9rem;}
footer .brand span{color:var(--orange);}
.foot-links{display:flex; gap:1.6rem;}
.foot-links a{font-size:0.75rem; color:#a49d8d; letter-spacing:0.05em; text-transform:uppercase;}
.foot-links a:hover{color:var(--orange);}

@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.72rem;}
}

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

.page-hero{
  min-height:44vh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:9rem 5vw 4rem;
  background:var(--bg-alt);
  border-bottom:1px solid var(--line);
}
.page-hero .hero-tag{margin-bottom:1rem; color:var(--orange-deep);}
.page-hero h1{
  font-weight:800;
  font-size:clamp(2.2rem, 6vw, 4rem);
  line-height:1.05;
  max-width:18ch;
  color:var(--ink);
}
.page-hero p{
  margin-top:1.2rem;
  max-width:52ch;
  color:var(--dim);
  font-size:0.98rem;
}
.breadcrumb{
  font-size:0.72rem; font-weight:600; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--dim); margin-bottom:1.4rem;
}
.breadcrumb a{color:var(--green-deep);}
.breadcrumb a:hover{text-decoration:underline;}

/* UEB detail page keeps its dark, moody treatment */
.ueb-shot{
  aspect-ratio:16/9;
  border-radius:20px;
  background:
    linear-gradient(160deg, var(--panel), var(--void));
  border:1px solid var(--line);
  margin-bottom:4rem;
  position:relative;
  overflow:hidden;
}

.detail-grid{
  display:grid;
  grid-template-columns:1fr 320px;
  gap:4rem;
  margin-bottom:4rem;
}
.detail-body p{
  color:var(--dim);
  font-size:0.98rem;
  margin-bottom:1.3rem;
  max-width:60ch;
}
.detail-body h3{
  font-weight:800;
  font-size:1.4rem;
  color:var(--ink);
  margin:2.2rem 0 1rem;
}
.spec-box{
  border-radius:20px;
  border:1px solid var(--line);
  background:var(--card);
  box-shadow:0 10px 26px rgba(44,42,38,0.07);
  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.8rem;
}
.spec-row:last-child{border-bottom:none;}
.spec-row span:first-child{color:var(--dim); letter-spacing:0.04em; text-transform:uppercase; font-size:0.68rem;}
.spec-row span:last-child{color:var(--ink); text-align:right; font-weight:600;}
.cta-btn{
  display:block; text-align:center;
  margin-top:1.6rem;
  padding:0.9rem;
  border-radius:14px;
  background:var(--orange);
  color:var(--void);
  font-weight:700;
  font-size:0.78rem; letter-spacing:0.06em; text-transform:uppercase;
  transition:background 0.2s, transform 0.2s;
}
.cta-btn:hover{background:var(--green); transform:translateY(-2px);}

.feature-strip{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.2rem;
  margin-bottom:4rem;
}
.feature-strip div{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 8px 20px rgba(44,42,38,0.06);
  padding:1.8rem;
}
.feature-strip b{
  display:block;
  font-weight:800;
  font-size:1.1rem;
  color:var(--ink);
  margin-bottom:0.5rem;
}
.feature-strip span{color:var(--dim); font-size:0.85rem;}

/* Blog index + post */
.post-full{
  max-width:100ch;
  margin:0 auto;
}
.post-byline{
  max-width:100ch;
  margin:0 auto 2.5rem;
  padding-bottom:1.5rem;
  border-bottom:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:0.6rem;
  font-size:0.78rem;
  color:var(--dim);
}
.post-byline b{color:var(--ink); font-weight:700;}
.post-shot{
  aspect-ratio:16/9;
  border-radius:16px;
  background:
    linear-gradient(160deg, var(--bg-alt), var(--card));
  border:1px dashed var(--line);
  margin:2rem auto;
  max-width:100ch;
  position:relative;
  overflow:hidden;
}
.post-full .post-meta{
  font-size:0.75rem; font-weight:600; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--dim); margin-bottom:2rem;
  display:flex; gap:1.5rem;
}
.post-full .post-meta .tag{color:var(--orange-deep);}
.post-full h1{
  font-weight:800;
  font-size:clamp(2rem, 4.5vw, 3rem);
  margin-bottom:1.6rem;
  max-width:20ch;
  color:var(--ink);
}
.post-full p{
  color:var(--dim);
  font-size:1rem;
  margin-bottom:1.4rem;
}
.post-full strong{color:var(--ink);}

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