:root{
  --ink:#061113;--ink2:#0a181b;--panel:#0f2226;--cream:#ece2ce;--sand:#d0b276;
  --teal:#4c8d8c;--muted:#9aaba6;--line:rgba(236,226,206,.14);
  --pad:clamp(22px,5vw,84px);--max:1420px
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ink);color:var(--cream);font-family:Inter,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}img{display:block;width:100%}button,input,select{font:inherit}
.header{position:fixed;z-index:90;top:0;left:0;right:0;height:76px;padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;background:linear-gradient(180deg,rgba(5,14,16,.97),rgba(5,14,16,.1));transition:.25s}
.header.scrolled{height:64px;background:rgba(5,14,16,.95);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.brand{font:700 15px "Arial Narrow","Roboto Condensed","Helvetica Neue",Arial,sans-serif;letter-spacing:.13em;display:flex;gap:10px;align-items:center}.brand i{font-style:normal;color:var(--sand);font-size:22px}
.nav{display:flex;gap:25px;align-items:center}.nav a,.lang{font:600 11px "Arial Narrow","Roboto Condensed","Helvetica Neue",Arial,sans-serif;letter-spacing:.13em;text-transform:uppercase;color:#b9c4c0}
.lang{background:#081719;border:1px solid var(--line);color:#d9d1c2;padding:9px 10px;cursor:pointer}.menuBtn{display:none;background:none;border:0}.menuBtn i{display:block;width:24px;height:1px;background:#ddd6c8;margin:6px}
.hero{min-height:100svh;position:relative;display:flex;align-items:center;overflow:hidden;padding:104px var(--pad) 76px}
.hero-bg{position:absolute;inset:0;background:url("assets/title-screen.png") center/cover no-repeat;filter:brightness(.54) saturate(.9);transform:scale(1.06)}
.hero-game{position:absolute;right:-3vw;bottom:-3vh;width:min(58vw,980px);height:78vh;background:url("assets/forgotten-present.png") center/cover no-repeat;clip-path:polygon(22% 0,100% 0,100% 100%,0 100%);opacity:.78;filter:saturate(.93)}
.hero-aven{position:absolute;right:2vw;bottom:0;width:min(33vw,510px);height:84vh;background:url("assets/aven.webp") center/cover no-repeat;opacity:.97}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,13,15,.99) 0 36%,rgba(5,13,15,.74) 53%,rgba(5,13,15,.12) 77%),linear-gradient(0deg,rgba(5,13,15,.96),transparent 38%)}
.hero-copy{position:relative;z-index:3;width:min(690px,55vw)}
.kicker,.eyebrow,.caption,.badge{font:600 10px "Arial Narrow","Roboto Condensed","Helvetica Neue",Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase}.kicker,.eyebrow{color:#aab9b4}
h1{font:700 clamp(70px,8.8vw,150px)/.76 "Arial Narrow","Roboto Condensed","Helvetica Neue",Arial,sans-serif;letter-spacing:-.045em;text-transform:uppercase;margin:25px 0 25px}h1 em,h2 em{font-style:normal;color:var(--sand)}
.hero-sub{font:600 clamp(22px,2.2vw,34px)/1.2 "Arial Narrow","Roboto Condensed","Helvetica Neue",Arial,sans-serif;margin:0 0 13px;max-width:620px}.hero-support{max-width:610px;color:#bdc8c4;line-height:1.7;font-size:14px}
.status-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:20px}.badge{border:1px solid rgba(208,178,118,.42);padding:8px 10px;color:var(--sand)}.badge.filled{background:var(--sand);color:#122125}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.btn{min-height:50px;padding:0 20px;display:inline-flex;align-items:center;justify-content:center;font:700 11px "Arial Narrow","Roboto Condensed","Helvetica Neue",Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--line);transition:.2s}.btn.primary{background:var(--sand);color:#102025;border-color:var(--sand)}.btn:hover{transform:translateY(-2px)}
.wip{margin-top:24px;color:#758985;font-size:9px}.section{padding:clamp(92px,10vw,155px) var(--pad)}.inner{max-width:var(--max);margin:auto}
.microLore{border-block:1px solid var(--line);background:#0a181a;padding:70px var(--pad);text-align:center}.microLore p{max-width:1000px;margin:auto;font:500 clamp(28px,3.6vw,52px)/1.2 "Arial Narrow","Roboto Condensed","Helvetica Neue",Arial,sans-serif;color:#ddd5c7}
.sectionHead{display:grid;grid-template-columns:1.12fr .68fr;gap:80px;align-items:end;margin-top:30px}h2{font:600 clamp(46px,6vw,88px)/.92 "Arial Narrow","Roboto Condensed","Helvetica Neue",Arial,sans-serif;letter-spacing:-.035em;text-transform:uppercase;margin:0}.sectionHead p{color:#96a7a2;line-height:1.7;font-size:14px}
.world{background:#0a191c;border-block:1px solid var(--line)}.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:12px;margin-top:62px}.shot{position:relative;overflow:hidden;min-height:360px;border:1px solid rgba(236,226,206,.08);background:#102326}.shot.big{grid-column:span 7;min-height:520px}.shot.tall{grid-column:span 5;min-height:520px}.shot.small{grid-column:span 4}.shot img{position:absolute;inset:0;height:100%;object-fit:cover;transition:transform .45s}.shot:hover img{transform:scale(1.02)}.scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(4,12,14,.94),transparent 62%)}.shotCopy{position:absolute;left:23px;right:23px;bottom:21px}.shotCopy span{font:600 9px "Arial Narrow","Roboto Condensed","Helvetica Neue",Arial,sans-serif;letter-spacing:.15em;color:var(--sand)}.shotCopy h3{font:600 31px "Arial Narrow","Roboto Condensed","Helvetica Neue",Arial,sans-serif;text-transform:uppercase;margin:3px 0 5px}.shotCopy p{margin:0;max-width:550px;color:#aeb9b5;font-size:11px;line-height:1.55}
.echoCompare{position:relative;aspect-ratio:16/9;margin-top:58px;border:1px solid var(--line);overflow:hidden;--split:50%}.echoCompare>img,.echoLayer img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.echoLayer{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--split)) 0 0)}.echoLine{position:absolute;top:0;bottom:0;left:var(--split);width:2px;background:#f0ddb0;transform:translateX(-1px)}.echoKnob{position:absolute;left:var(--split);top:50%;transform:translate(-50%,-50%);width:52px;height:52px;border:1px solid #f0ddb0;border-radius:50%;background:#0a1a1d;color:var(--sand);display:grid;place-items:center;font-size:23px}.echoCompare input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}.state{position:absolute;top:17px;padding:7px 9px;background:rgba(5,13,15,.7);font:700 9px "Arial Narrow","Roboto Condensed","Helvetica Neue",Arial,sans-serif;letter-spacing:.15em}.state.left{left:17px}.state.right{right:17px}.dragHint{text-align:center;margin-top:14px;color:#6e827d;font:600 9px "Arial Narrow","Roboto Condensed","Helvetica Neue",Arial,sans-serif;letter-spacing:.15em}
.people{background:#081416}.fragmentGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:60px}.fragment{min-height:420px;position:relative;border:1px solid var(--line);padding:30px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:#102125}.fragment:before{content:"";position:absolute;inset:0;opacity:.27;background-size:cover;background-position:center}.fragment:nth-child(1):before{background-image:url("assets/aven.webp")}.fragment:nth-child(2):before{background-image:url("assets/court.png")}.fragment:nth-child(3):before{background-image:url("assets/glassmoor.png")}.fragment:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#091719 14%,rgba(9,23,25,.55) 72%,rgba(9,23,25,.12))}.fragment>*{position:relative;z-index:2}.fragment span{font:600 9px "Arial Narrow","Roboto Condensed","Helvetica Neue",Arial,sans-serif;letter-spacing:.16em;color:var(--sand)}.fragment h3{font:600 31px/1.05 "Arial Narrow","Roboto Condensed","Helvetica Neue",Arial,sans-serif;text-transform:uppercase;margin:7px 0 11px}.fragment p{margin:0;color:#9caca7;font-size:12px;line-height:1.65}
.inside{background:#0b1a1d;border-block:1px solid var(--line)}.insideGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:55px}.uiCard{position:relative;overflow:hidden;background:#102326;min-height:390px;border:1px solid var(--line)}.uiCard img{height:100%;object-fit:cover}.uiCard.dialogue{grid-column:1/-1;min-height:470px}.uiLabel{position:absolute;left:15px;bottom:15px;background:rgba(6,15,17,.84);padding:8px 10px;font:600 9px "Arial Narrow","Roboto Condensed","Helvetica Neue",Arial,sans-serif;letter-spacing:.14em}
.playtest{padding:clamp(95px,10vw,150px) var(--pad);background:radial-gradient(circle at 72% 50%,rgba(77,141,140,.18),transparent 28%),#102326;border-block:1px solid var(--line)}.playtestBox{max-width:var(--max);margin:auto;display:grid;grid-template-columns:1fr .8fr;gap:90px;align-items:center}.playtestCopy p{color:#a4b1ad;line-height:1.75;max-width:650px}.playtestSide{border:1px solid var(--line);padding:32px;background:rgba(6,15,17,.36)}.playtestSide p{font-size:12px;color:#91a29d;line-height:1.65}.playtestSide .btn{width:100%;margin-top:12px}
.dev{background:#071315}.devGrid{display:grid;grid-template-columns:1fr .8fr;gap:100px;margin-top:30px}.devCopy{color:#9eaca7;line-height:1.75}.devCopy p:first-child{color:#c5cfcb}
.community{min-height:620px;position:relative;display:grid;place-items:center;text-align:center;padding:90px var(--pad);overflow:hidden}.communityBg{position:absolute;inset:0;background:url("assets/boundary.png") center/cover no-repeat;filter:brightness(.36) saturate(.8);transform:scale(1.03)}.communityShade{position:absolute;inset:0;background:linear-gradient(0deg,#061113,rgba(6,17,19,.5),#061113)}.communityCopy{position:relative;z-index:2;max-width:850px}.communityCopy h2{margin:23px 0}.communityCopy p{color:#a3b0ac}.center{justify-content:center}
footer{padding:32px var(--pad);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid var(--line);color:#617671;font-size:9px;letter-spacing:.08em}.footBrand{font:700 14px "Arial Narrow","Roboto Condensed","Helvetica Neue",Arial,sans-serif;color:#cbc4b6;letter-spacing:.1em}
@media(max-width:1050px){.nav{display:none}.menuBtn{display:block}.nav.open{display:flex;position:fixed;inset:0;background:#061315;flex-direction:column;align-items:flex-start;justify-content:center;padding:var(--pad);z-index:-1}.nav.open a{font-size:28px}.hero-copy{width:65vw}.hero-aven{right:-10vw;width:48vw;opacity:.78}.hero-game{width:74vw;opacity:.48}.sectionHead,.playtestBox,.devGrid{grid-template-columns:1fr}.gallery{grid-template-columns:1fr 1fr}.shot.big,.shot.tall,.shot.small{grid-column:auto;min-height:400px}.fragmentGrid{grid-template-columns:1fr}.insideGrid{grid-template-columns:1fr}.uiCard.dialogue{grid-column:auto}}
@media(max-width:680px){.header{height:66px}.brand span:last-child{font-size:12px}.lang{max-width:115px}.hero{min-height:940px;align-items:flex-end;padding-bottom:85px}.hero-copy{width:100%}.hero h1{font-size:clamp(66px,20vw,102px)}.hero-game{width:118vw;height:62vh;right:-45vw;opacity:.4}.hero-aven{width:88vw;height:64vh;right:-33vw;opacity:.52}.hero-shade{background:linear-gradient(0deg,rgba(5,13,15,.99) 0 51%,rgba(5,13,15,.30) 82%,rgba(5,13,15,.72))}.section{padding-block:86px}.gallery{grid-template-columns:1fr}.shot.big,.shot.tall,.shot.small{min-height:365px}.echoCompare{aspect-ratio:4/3}.insideGrid{grid-template-columns:1fr}.uiCard,.uiCard.dialogue{min-height:300px}.fragment{min-height:350px}}


/* ==========================================================
   V5.2 READABILITY + IMAGE QUALITY + HERO / ECHO POLISH
   ========================================================== */

body{
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.header{height:82px}
.brand{font-size:16px}
.nav a,.lang{font-size:12px}

.hero{
  min-height:100svh;
  padding-top:120px;
  padding-bottom:88px;
}

/* The title-screen art now actually loads; it sits behind the real game layer. */
.hero-bg{
  background-image:url("assets/title-screen.png");
  background-position:center;
  background-size:cover;
  filter:brightness(.56) saturate(.92);
  opacity:.64;
  transform:scale(1.04);
}

/* Keep real gameplay visible in the hero instead of leaving the right half empty. */
.hero-game{
  right:1.5vw;
  bottom:7vh;
  width:min(54vw,940px);
  height:auto;
  aspect-ratio:16/9;
  background-image:url("assets/forgotten-present.png");
  background-size:cover;
  background-position:center;
  clip-path:none;
  opacity:.90;
  border:1px solid rgba(236,226,206,.24);
  box-shadow:0 28px 80px rgba(0,0,0,.45);
  filter:none;
}

/* Aven sits partially across the gameplay card, more like key art. */
.hero-aven{
  right:3vw;
  bottom:1vh;
  width:min(27vw,470px);
  height:74vh;
  background-image:url("assets/aven.webp");
  background-position:center;
  background-size:cover;
  opacity:.94;
  filter:none;
}

.hero-shade{
  background:
    linear-gradient(90deg,rgba(5,13,15,.98) 0 35%,rgba(5,13,15,.78) 49%,rgba(5,13,15,.28) 70%,rgba(5,13,15,.40) 100%),
    linear-gradient(0deg,rgba(5,13,15,.96),transparent 43%);
}

.hero-copy{width:min(720px,50vw)}
.kicker,.eyebrow,.caption,.badge{font-size:12px}
.hero-sub{font-size:clamp(28px,2.35vw,38px);line-height:1.18;max-width:670px}
.hero-support{font-size:17px;line-height:1.75;max-width:650px}
.wip{font-size:12px;line-height:1.5;color:#8fa09b}

.btn{
  min-height:54px;
  padding:0 24px;
  font-size:13px;
}

.microLore p{
  font-size:clamp(32px,3.4vw,52px);
  max-width:1100px;
}

.sectionHead p{
  font-size:18px;
  line-height:1.75;
  color:#b2bfba;
  max-width:540px;
}

/* Do not stretch 1280x720 gameplay images beyond their intended ratio. */
.gallery{
  max-width:1280px;
  margin-left:auto;
  margin-right:auto;
}
.shot,.shot.big,.shot.tall,.shot.small{
  min-height:0;
  aspect-ratio:16/9;
}
.shot img{
  width:100%;
  height:100%;
  object-fit:cover;
  image-rendering:auto;
  filter:none;
}
.shotCopy span{font-size:11px}
.shotCopy h3{font-size:clamp(31px,2.5vw,43px)}
.shotCopy p{
  font-size:15px;
  line-height:1.6;
  color:#c0cbc7;
}

/* Story fragments: CSS asset paths fixed and background is now clearly visible. */
.fragment{
  min-height:460px;
  padding:34px;
}
.fragment:before{
  opacity:.46;
  background-size:cover;
  background-position:center;
}
.fragment:after{
  background:linear-gradient(0deg,#091719 10%,rgba(9,23,25,.68) 52%,rgba(9,23,25,.16));
}
.fragment span{font-size:11px}
.fragment h3{font-size:34px}
.fragment p{font-size:16px;line-height:1.7;color:#bdc8c4}

/* UI / in-game examples should not be enlarged into softness. */
.insideGrid{
  max-width:1280px;
  margin-left:auto;
  margin-right:auto;
}
.uiCard{
  min-height:0;
  aspect-ratio:301/218;
}
.uiCard.dialogue{
  min-height:0;
  aspect-ratio:16/9;
}
.uiCard img{
  width:100%;
  height:100%;
  object-fit:contain;
  background:#061113;
  filter:none;
  image-rendering:auto;
}
.uiLabel{font-size:11px}

/* Echo gets a much more explicit identity. */
.echoCompare{
  max-width:1280px;
  margin-left:auto;
  margin-right:auto;
  border:2px solid rgba(208,178,118,.55);
  box-shadow:0 24px 70px rgba(0,0,0,.28);
}
.echoCompare>img,.echoLayer img{
  object-fit:cover;
  filter:none;
}
.state{
  top:22px;
  padding:11px 16px;
  font-size:14px;
  color:#fff5df;
  background:rgba(4,12,14,.90);
  border:1px solid rgba(236,226,206,.32);
}
.state.right{
  color:#161a17;
  background:#d0b276;
  border-color:#d0b276;
}
.echoLine{
  width:3px;
  background:#f5d88f;
  box-shadow:0 0 22px rgba(245,216,143,.75);
}
.echoKnob{
  width:66px;height:66px;
  border-width:2px;
  font-size:30px;
  box-shadow:0 8px 30px rgba(0,0,0,.45);
}
.echoExplain{
  max-width:1280px;
  margin:18px auto 0;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:22px;
  font:700 18px "Arial Narrow","Roboto Condensed","Helvetica Neue",Arial,sans-serif;
  letter-spacing:.16em;
}
.echoExplain span:first-child{
  text-align:left;
  color:#b7c5c0;
}
.echoExplain span:last-child{
  text-align:right;
  color:#d0b276;
}
.echoExplain b{color:#d0b276;font-size:24px}
.dragHint{font-size:11px;margin-top:8px}

/* General text readability */
.playtestCopy p,.playtestSide p,.devCopy,.communityCopy p{
  font-size:17px;
  line-height:1.75;
}
.playtestSide{padding:38px}
.status-row{margin-top:24px}

@media(max-width:1050px){
  .hero-copy{width:72vw}
  .hero-game{width:76vw;right:-18vw;bottom:12vh;opacity:.72}
  .hero-aven{right:-14vw;width:47vw;opacity:.74}
  .sectionHead p{font-size:17px}
}
@media(max-width:680px){
  body{font-size:16px}
  .hero{min-height:980px;padding-bottom:92px}
  .hero-copy{width:100%}
  .hero-game{width:116vw;right:-47vw;bottom:37vh;opacity:.40}
  .hero-aven{width:94vw;right:-43vw;height:65vh;bottom:24vh;opacity:.48}
  .hero-shade{
    background:linear-gradient(0deg,rgba(5,13,15,.99) 0 52%,rgba(5,13,15,.38) 79%,rgba(5,13,15,.72));
  }
  .hero-support{font-size:16px}
  .sectionHead p{font-size:16px}
  .shot,.shot.big,.shot.tall,.shot.small{aspect-ratio:4/3}
  .shotCopy p{font-size:14px}
  .fragment p{font-size:15px}
  .echoCompare{aspect-ratio:4/3}
  .state{font-size:12px}
  .echoExplain{font-size:15px}
}


/* V5.3 — social launch state */
.btn.disabled,
.btn.coming-soon{
  opacity:.48;
  cursor:default;
  pointer-events:none;
  border-style:dashed;
  color:#91a19c;
  background:rgba(8,20,22,.22);
}


/* V5.4 legal footer */
footer .legalLink{
  color:#a9b8b3;
  text-decoration:none;
  border-bottom:1px solid rgba(208,178,118,.35);
}
footer .legalLink:hover{color:#ece2ce}