/* --- page reset: kills the browser's default 8px body margin --- */
html{background:#0C0F14;color-scheme:dark;}
html,body{margin:0;padding:0;}

@import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans:wght@400;500;700&family=Fraunces:opsz,wght,SOFT,WONK@9..144,300..700,0..100,0..1&display=swap');

.hs{
  --ink:#0C0F14;
  --board:#141922;
  --board-hi:#1B212C;
  --bone:#E4E8EF;
  --dust:#8A93A3;
  --flame:#E2444F;
  --flame-deep:#B5303C;
  --wine:#7E2A33;
  --rule:rgba(228,232,239,.11);
  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --body:'Alegreya Sans','Segoe UI',system-ui,sans-serif;

  background:var(--ink);
  color:var(--bone);
  font-family:var(--body);
  font-size:18px;
  line-height:1.7;
  padding:0;
  overflow-x:hidden;
}
.hs *{box-sizing:border-box;}
.hs h1,.hs h2,.hs h3{
  font-family:var(--display);
  font-variation-settings:'SOFT' 60,'WONK' 1;
  font-weight:600;
  line-height:1.05;
  margin:0;
  color:var(--bone);
}
.hs p{margin:0 0 1.1em;}
.hs a{color:var(--flame);text-decoration:none;}
.hs a:hover{text-decoration:underline;}
.hs a:focus-visible,.hs summary:focus-visible{
  outline:2px solid var(--flame);outline-offset:3px;border-radius:2px;
}
.hs img{max-width:100%;display:block;}

.hs-wrap{max-width:1180px;margin:0 auto;padding:0 32px;}
.hs-sec{padding:110px 0;}
.hs-sec + .hs-sec{padding-top:0;}

/* --- eyebrow label --- */
.hs-eyebrow{
  font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--dust);margin:0 0 18px;
}

/* --- buttons --- */
.hs-btn{
  display:inline-block;padding:15px 30px;border-radius:3px;
  font-weight:700;font-size:15px;letter-spacing:.09em;text-transform:uppercase;
  border:1px solid var(--flame);transition:transform .18s ease,background .18s ease;
}
.hs-btn:hover{text-decoration:none;transform:translateY(-2px);}
/* white bold label on every button. !important so no link rule can win. */
.hs a.hs-btn,.hs a.hs-btn:visited{color:#FFF !important;font-weight:700;}
.hs a.hs-btn--fill{background:var(--flame-deep);border-color:var(--flame-deep);}
.hs a.hs-btn--fill:hover{background:#C93A46;border-color:#C93A46;}
.hs a.hs-btn--ghost{background:transparent;border-color:var(--flame);}
.hs a.hs-btn--ghost:hover{background:rgba(226,68,79,.16);border-color:#F0616B;}
.hs-btns{display:flex;gap:14px;flex-wrap:wrap;}

/* --- header --- */
.hs-head{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:26px 0;border-bottom:1px solid var(--rule);flex-wrap:wrap;
}
.hs .hs-mark{
  font-family:var(--display);font-size:19px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bone);
}
.hs .hs-mark:hover{text-decoration:none;color:var(--flame);}
.hs-nav{display:flex;align-items:center;gap:30px;flex-wrap:wrap;}
.hs-nav a{
  color:var(--dust);font-size:13px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;
}
.hs-nav a:hover{color:var(--bone);text-decoration:none;}
.hs-nav .hs-btn{padding:11px 20px;font-size:12px;}
.hs-nav .hs-btn:hover{color:#FFF;}

/* --- hero --- */
.hs-hero{position:relative;padding:0 0 24px;}
.hs-hero-art{position:relative;height:min(70vh,620px);min-height:420px;overflow:hidden;}
.hs-hero-art img{width:100%;height:100%;object-fit:cover;}
.hs-hero-art::after{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(58% 68% at 50% 44%,rgba(226,68,79,.18),transparent 72%),
    linear-gradient(to bottom,rgba(12,15,20,.42) 0%,rgba(12,15,20,.10) 34%,rgba(12,15,20,.93) 88%,var(--ink) 100%);
}
.hs-hero-text{position:relative;margin-top:-130px;z-index:2;}
.hs-verbs{
  font-family:var(--display);font-variation-settings:'SOFT' 60,'WONK' 1;
  font-size:clamp(48px,8.5vw,104px);font-weight:600;line-height:.94;
  margin:0 0 26px;
}
.hs-verbs span{display:block;}
.hs-verbs span:nth-child(2){padding-left:.55em;color:var(--flame);}
.hs-verbs span:nth-child(3){padding-left:1.1em;}
.hs-lede{
  max-width:520px;font-size:19px;color:var(--dust);
  padding-top:22px;border-top:1px solid var(--rule);margin-bottom:30px;
}

/* --- section heading --- */
.hs-h2{font-size:clamp(30px,4vw,44px);margin-bottom:14px;}
.hs-sub{color:var(--dust);max-width:560px;margin-bottom:46px;}

/* --- home intro --- */
.hs-intro{position:relative;padding:118px 0 96px;overflow:hidden;}
.hs-intro::before{
  content:'';position:absolute;left:50%;top:-30%;width:940px;height:680px;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(226,68,79,.13),transparent 70%);
}
.hs-intro .hs-wrap{position:relative;}
.hs-title{font-size:clamp(44px,7.6vw,94px);letter-spacing:-.012em;margin-bottom:34px;}
.hs-statement{
  max-width:600px;font-size:21px;color:var(--dust);
  padding-top:26px;border-top:2px solid var(--flame);margin-bottom:34px;
}

/* --- featured game (the newest release sits here) --- */
.hs-featured{
  display:grid;grid-template-columns:1.15fr .85fr;
  background:var(--board);border:1px solid var(--rule);border-radius:4px;
  overflow:hidden;margin-bottom:22px;transition:border-color .25s ease;
}
.hs-featured:hover{border-color:rgba(226,68,79,.45);}
.hs-featured-art{aspect-ratio:16/9;}
.hs-featured-art img{width:100%;height:100%;object-fit:cover;}
.hs-featured-body{padding:48px;display:flex;flex-direction:column;justify-content:center;}
.hs-featured-body h3{font-size:clamp(30px,3.6vw,46px);margin-bottom:12px;}
.hs-featured-body p{color:var(--dust);margin-bottom:28px;}
.hs-featured-body .hs-btn{align-self:flex-start;}

/* --- game cards: this grid reflows on its own as you add games --- */
.hs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:22px;}
.hs-card{
  background:var(--board);border:1px solid var(--rule);border-radius:4px;
  overflow:hidden;display:block;color:inherit;
  transition:transform .25s ease,border-color .25s ease;
}
.hs-card:hover{transform:translateY(-5px);border-color:rgba(226,68,79,.45);text-decoration:none;}
.hs-card-art{aspect-ratio:16/9;overflow:hidden;}
.hs-card-art img{width:100%;height:100%;object-fit:cover;}
.hs-card-body{padding:26px 28px 30px;}
.hs-card-body h3{font-size:27px;margin-bottom:8px;}
.hs-card-body p{color:var(--dust);font-size:16px;margin:0;}
.hs-tag{
  display:inline-block;margin-bottom:14px;padding:4px 11px;border-radius:2px;
  border:1px solid var(--rule);font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--flame);
}
.hs-soon{
  border:1px dashed rgba(228,232,239,.18);border-radius:4px;background:transparent;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:60px 30px;min-height:260px;
}
.hs-soon h3{font-size:22px;color:var(--dust);margin-bottom:8px;}
.hs-soon p{color:rgba(138,147,163,.75);font-size:15px;margin:0;}

/* --- media slot placeholder (delete once real images are in) --- */
.hs-slot{
  background:repeating-linear-gradient(45deg,#131822 0 12px,#182030 12px 24px);
  border:1px dashed rgba(228,232,239,.2);
  display:flex;align-items:center;justify-content:center;text-align:center;
  color:var(--dust);font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  padding:24px;min-height:180px;height:100%;
}

/* --- image containers keep a dark panel behind them, so a file that is
       not uploaded yet degrades quietly instead of flashing white --- */
.hs-hero-art,.hs-featured-art,.hs-feat-media,.hs-card-art,.hs-gallery > *{
  background:repeating-linear-gradient(45deg,#131822 0 12px,#182030 12px 24px);
}
.hs-swatch img{max-height:100%;width:auto;object-fit:contain;}
.hs-swatch a{display:flex;align-items:center;justify-content:center;max-height:100%;}
.hs-swatch a,.hs-gallery a{color:var(--dust);font-size:13px;}

/* --- feature rows --- */
.hs-feat{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-bottom:88px;}
.hs-feat:last-child{margin-bottom:0;}
.hs-feat:nth-child(even) .hs-feat-media{order:-1;}
.hs-feat-media{aspect-ratio:16/10;border-radius:4px;overflow:hidden;border:1px solid var(--rule);}
.hs-feat-media img{width:100%;height:100%;object-fit:cover;}
.hs-feat h3{font-size:clamp(26px,3.2vw,36px);margin-bottom:14px;}
.hs-feat p{color:var(--dust);margin:0;}

/* --- gallery --- */
.hs-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.hs-gallery > *{aspect-ratio:16/9;border-radius:3px;overflow:hidden;}
.hs-gallery img{width:100%;height:100%;object-fit:cover;transition:filter .2s ease;}
.hs-gallery a{display:block;width:100%;height:100%;}
.hs-gallery a:hover img{filter:brightness(1.14);}

/* --- ledger (factsheet) --- */
.hs-ledger{border-top:1px solid var(--rule);}
.hs-ledger div{
  display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;
  padding:15px 4px;border-bottom:1px solid var(--rule);
}
.hs-ledger dt,.hs-ledger .k{
  font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dust);padding-top:5px;
}
.hs-ledger .v{
  font-family:var(--display);font-variation-settings:'SOFT' 60,'WONK' 1;
  font-size:20px;text-align:right;color:var(--bone);
}
.hs-ledger .v a{font-family:var(--body);font-size:17px;}

/* --- trailer --- */
.hs-video{aspect-ratio:16/9;border-radius:4px;overflow:hidden;border:1px solid var(--rule);}
.hs-video iframe{width:100%;height:100%;border:0;display:block;}

/* --- callout --- */
.hs-callout{
  background:var(--board);border-left:3px solid var(--flame);
  border-radius:0 4px 4px 0;padding:28px 32px;
}
.hs-callout p:last-child{margin-bottom:0;}

/* --- copy box (press descriptions) --- */
.hs-copybox{
  background:var(--board);border:1px solid var(--rule);border-radius:4px;
  padding:26px 30px;margin-bottom:20px;
}
.hs-copybox p:last-child{margin-bottom:0;}

/* --- details --- */
.hs details{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);}
.hs summary{
  cursor:pointer;padding:20px 4px;list-style:none;
  font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--dust);
}
.hs summary::-webkit-details-marker{display:none;}
.hs summary::after{content:' +';color:var(--flame);}
.hs details[open] summary::after{content:' –';}
.hs details ul{margin:0 0 24px;padding-left:20px;color:var(--dust);}

/* --- lists --- */
.hs-list{list-style:none;padding:0;margin:0;}
.hs-list li{padding:13px 0 13px 26px;border-bottom:1px solid var(--rule);position:relative;color:var(--dust);}
.hs-list li::before{content:'';position:absolute;left:2px;top:24px;width:9px;height:1px;background:var(--flame);}
.hs-list b{color:var(--bone);font-weight:700;}

/* --- swatches for logo section --- */
.hs-swatches{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:22px;}
.hs-swatch{
  aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;
  border-radius:4px;border:1px solid var(--rule);padding:30px;
}
.hs-swatch--light{background:#E4E8EF;}
.hs-swatch--dark{background:#0C0F14;}

/* --- footer --- */
.hs-foot{border-top:1px solid var(--rule);padding:44px 0 56px;margin-top:110px;}
.hs-foot-in{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;align-items:center;}
.hs-foot .hs-nav a{font-size:12px;}
.hs-foot small{color:var(--dust);font-size:14px;letter-spacing:.04em;}

@media(max-width:820px){
  .hs{font-size:17px;}
  .hs-wrap{padding:0 22px;}
  .hs-sec{padding:74px 0;}
  .hs-featured,.hs-feat,.hs-swatches{grid-template-columns:1fr;}
  .hs-featured-body{padding:30px 26px 34px;}
  .hs-intro{padding:70px 0 60px;}
  .hs-feat{gap:26px;margin-bottom:56px;}
  .hs-feat:nth-child(even) .hs-feat-media{order:0;}
  .hs-gallery{grid-template-columns:1fr 1fr;}
  .hs-hero-text{margin-top:-70px;}
  .hs-verbs span:nth-child(2){padding-left:.3em;}
  .hs-verbs span:nth-child(3){padding-left:.6em;}
  .hs-ledger .v{text-align:left;}
}
@media(prefers-reduced-motion:reduce){
  .hs *{transition:none !important;}
}