/* Shared editorial finish for the text-heavy pages; all copy remains in its original markup. */
.game-concept-page,
.clips-page,
.gallery-page{
  background-color:#070b09;
  background-image:
    linear-gradient(90deg,rgba(8,11,9,.72) 0%,rgba(8,11,9,.54) 55%,rgba(8,11,9,.30) 100%),
    linear-gradient(0deg,rgba(8,11,9,.68),transparent 72%),
    url("../images/gallery/biome_10.webp");
  background-position:center,center,center 46%;
  background-size:auto,auto,cover;
  background-repeat:no-repeat;
  background-attachment:scroll,scroll,fixed;
}

.game-concept-page .concept-page,
.clips-page .clips-main{
  width:min(1440px,100%);
  max-width:1440px;
  padding:24px clamp(16px,3vw,40px) 0;
  box-sizing:border-box;
  counter-reset:journal-chapter;
}
.game-concept-page .concept-page{padding-bottom:70px}

.game-concept-page .concept-page > .clips-hero,
.clips-page .clips-main > .clips-hero{
  position:relative;
  isolation:isolate;
  display:flex;
  min-height:clamp(260px,29vw,360px);
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  overflow:hidden;
  margin:0;
  padding:clamp(34px,5vw,62px) clamp(22px,5vw,72px);
  text-align:left;
  border:1px solid rgba(206,231,123,.25);
  border-radius:18px 18px 5px 5px;
  box-shadow:0 20px 70px rgba(0,0,0,.48);
}
.game-concept-page .concept-page > .clips-hero::before,
.clips-page .clips-main > .clips-hero::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(5,10,8,.3),transparent 55%);
}
.game-concept-page .concept-page > .clips-hero::after,
.clips-page .clips-main > .clips-hero::after{
  top:auto;
  right:auto;
  bottom:0;
  left:0;
  width:44%;
  height:3px;
  opacity:1;
  background:linear-gradient(90deg,#ceff51,transparent);
  box-shadow:0 0 20px rgba(183,237,71,.7);
}
.game-concept-page .concept-page > .clips-hero .section-title,
.clips-page .clips-main > .clips-hero .section-title{
  position:relative;
  z-index:1;
  margin:0;
  color:#f0f2e4;
  -webkit-text-fill-color:#f0f2e4;
  -webkit-text-stroke:0;
  font-size:clamp(46px,6vw,80px);
  line-height:1.05;
  letter-spacing:.13em;
  text-shadow:0 5px 30px rgba(0,0,0,.65);
}
.game-concept-page .concept-page > .clips-hero .title-divider,
.clips-page .clips-main > .clips-hero .title-divider{display:none}
.game-concept-page .concept-page > .clips-hero .section-sub,
.clips-page .clips-main > .clips-hero .section-sub{
  position:relative;
  z-index:1;
  display:block;
  width:auto;
  max-width:min(900px,100%);
  margin:16px 0 0;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  color:#c9d4bb;
  font-size:10px;
  line-height:1.8;
  letter-spacing:.18em;
  text-align:left;
}
.journal-eyebrow{
  position:relative;
  z-index:1;
  margin:0 0 18px;
  color:#d0ed80;
  font-size:10px;
  font-weight:700;
  letter-spacing:.25em;
  text-shadow:0 2px 10px rgba(0,0,0,.9);
}
.journal-hero-note{
  position:relative;
  z-index:1;
  margin:14px 0 21px;
  color:#e0e4d5;
  font-size:clamp(17px,2vw,23px);
  line-height:1.4;
  text-shadow:0 3px 18px rgba(0,0,0,.72);
}
.journal-explore{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  gap:30px;
  padding:11px 16px;
  border:1px solid rgba(200,230,83,.52);
  border-radius:5px 11px 5px 11px;
  background:rgba(189,221,84,.12);
  color:#e5f6b5;
  font-size:10px;
  font-weight:750;
  letter-spacing:.12em;
  text-decoration:none;
  text-transform:uppercase;
  transition:background .2s,border-color .2s,transform .2s;
}
.journal-explore:hover{
  transform:translateY(-1px);
  border-color:#c8e653;
  background:rgba(189,221,84,.23);
  text-decoration:none;
}
.journal-explore span{font-size:15px;line-height:1;color:#d9f276}
.journal-explore:focus-visible{outline:2px solid #d0ff60;outline-offset:4px}
#concept-overview,#clips-categories{scroll-margin-top:132px}

.game-concept-page .concept-page > .clips-section,
.clips-page .clips-main > .clips-section,
.clips-page > .clips-wide{
  counter-increment:journal-chapter;
  position:relative;
  overflow:hidden;
  margin:18px auto 0;
  padding:clamp(24px,3vw,36px);
  border:1px solid rgba(185,212,113,.22);
  border-radius:7px 19px 7px 19px;
  background:linear-gradient(135deg,rgba(20,28,22,.87),rgba(5,9,7,.92));
  box-shadow:0 14px 35px rgba(0,0,0,.4),inset 0 1px rgba(255,255,255,.035);
  transition:border-color .22s,box-shadow .22s,transform .22s;
}
.game-concept-page .concept-page > .clips-section:hover,
.clips-page .clips-main > .clips-section:hover,
.clips-page > .clips-wide:hover{
  transform:translateY(-2px);
  border-color:rgba(200,230,83,.48);
  box-shadow:inset 3px 0 #c8e653,0 16px 38px rgba(0,0,0,.48),0 0 25px rgba(168,217,61,.07);
}
.game-concept-page .concept-page > .clips-section::before,
.clips-page .clips-main > .clips-section::before,
.clips-page > .clips-wide::before{
  content:"";
  position:absolute;
  top:0;left:24px;right:24px;height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(200,230,83,.42) 35%,rgba(255,255,255,.16) 70%,transparent);
}
.game-concept-page .concept-page > .clips-section::after,
.clips-page .clips-main > .clips-section::after,
.clips-page > .clips-wide::after{
  right:20px;
  bottom:0;
  width:74px;
  height:2px;
  background:linear-gradient(90deg,transparent,#c8e653cc);
  box-shadow:0 0 14px rgba(200,230,83,.25);
}

.game-concept-page .concept-page > .clips-section > h2.clips-h2,
.clips-page .clips-main > .clips-section > h2.clips-h2,
.clips-page > .clips-wide > h2.clips-h2{
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 0 18px;
  color:#e2edbd;
  font-size:14px;
  line-height:1.4;
  letter-spacing:.16em;
}
.game-concept-page .concept-page > .clips-section > h2.clips-h2::before,
.clips-page .clips-main > .clips-section > h2.clips-h2::before,
.clips-page > .clips-wide > h2.clips-h2::before{
  content:counter(journal-chapter,decimal-leading-zero);
  display:grid;
  width:40px;height:36px;
  flex:none;
  place-items:center;
  border:1px solid rgba(200,230,83,.38);
  border-radius:5px 11px 5px 11px;
  background:rgba(200,230,83,.09);
  color:#d6f16e;
  font-size:12px;
  letter-spacing:.04em;
  box-shadow:inset 0 1px rgba(255,255,255,.08),0 0 20px rgba(200,230,83,.08);
}

.game-concept-page .concept-page .clips-note{
  max-width:1050px;
  color:#c6cec0;
  font-size:14px;
  line-height:1.85;
  text-shadow:0 2px 8px rgba(0,0,0,.55);
}
.game-concept-page .concept-page .clips-note b{color:#f0f2e4}
.game-concept-page .concept-page ul.clips-note{padding-left:24px!important}
.game-concept-page .concept-page ul.clips-note li{padding-left:5px;margin:0 0 10px}
.game-concept-page .concept-page ul.clips-note li::marker{color:#c8e653}
.game-concept-page .concept-page h3.clips-h2{
  margin:24px 0 10px;
  padding:0 0 9px;
  border-bottom:1px solid rgba(185,212,113,.18);
  color:#d9e5c8;
  font-size:12px;
  letter-spacing:.14em;
}
.game-concept-page .concept-page h3.clips-h2::before{
  content:"";
  display:block;
  width:3px;height:13px;
  border:0;
  border-radius:2px;
  background:linear-gradient(#d9f276,#87ad37);
  box-shadow:0 0 10px rgba(200,230,83,.35);
}

.clips-page .clips-main{padding-bottom:0}
.clips-page .clips-main > .clips-section{max-width:none}
.clips-page > .clips-wide{
  width:min(1440px,100%);
  max-width:1440px;
  padding-left:clamp(16px,3vw,40px);
  padding-right:clamp(16px,3vw,40px);
}
.clips-page > .clips-mood{
  background:linear-gradient(180deg,rgba(5,10,8,.64),rgba(5,10,8,.92) 210px),url("../images/gallery/thumbs/biome_03.webp") center 42%/cover no-repeat,#070b09;
}
.clips-page > .clips-tests{
  background:linear-gradient(180deg,rgba(5,10,8,.66),rgba(5,10,8,.93) 210px),url("../images/gallery/thumbs/dev_41.webp") center 42%/cover no-repeat,#070b09;
}
.clips-page > .clips-archive{
  background:linear-gradient(180deg,rgba(5,10,8,.68),rgba(5,10,8,.94) 210px),url("../images/gallery/thumbs/old_2.webp") center 42%/cover no-repeat,#070b09;
}
.clips-page > .clips-wide > .clips-grid{position:relative;z-index:1}
.clips-page > .clips-wide > .clips-note{position:relative;z-index:1;max-width:700px}
.clips-page .clips-grid{gap:clamp(14px,1.8vw,23px)}
.clips-page .clip-card{border-radius:6px 18px 6px 18px;border-color:rgba(185,212,113,.25)}
.clips-page .clip-categories{
  width:min(1320px,100%);
  max-width:1320px;
  counter-reset:clip-chapter;
  display:grid;
  gap:18px;
  margin:0 auto 68px;
  padding:24px clamp(16px,3vw,40px) 20px;
  scroll-margin-top:132px;
}
.clips-page .clip-category{
  counter-increment:clip-chapter;
  overflow:hidden;
  border:1px solid rgba(185,212,113,.22);
  border-radius:6px 20px 6px 20px;
  background:rgba(5,8,6,.82);
  box-shadow:0 14px 35px rgba(0,0,0,.42);
  transition:border-color .2s,box-shadow .2s;
}
.clips-page .clip-category:hover{border-color:rgba(200,230,83,.62);box-shadow:inset 3px 0 #c8e653,0 14px 36px rgba(0,0,0,.5),0 0 25px rgba(168,217,61,.08)}
.clips-page .clip-category[open]{border-color:rgba(200,230,83,.42)}
.clips-page .clip-category .gallery-group-summary{
  min-height:212px;
  padding:28px 32px;
  align-items:center;
  gap:22px;
  background-position:center 43%;
}
.clips-page .clip-category .gallery-group-copy{
  flex:1 1 500px;
  min-width:0;
  max-width:900px;
  margin:0;
  align-items:flex-start;
  text-align:left;
}
.clips-page .clip-category .gallery-group-side{margin-left:auto}
.clips-page .clip-category .gallery-group-summary::before{background-position:center 43%;filter:saturate(.95) contrast(1.05)}
.clips-page .clip-category .gallery-group-summary::after,
.clips-page .clip-category[open] .gallery-group-summary::after{
  background:linear-gradient(90deg,rgba(5,11,9,.94) 0%,rgba(5,11,9,.72) 40%,rgba(5,11,9,.27) 78%,rgba(5,11,9,.52)),linear-gradient(0deg,rgba(5,11,9,.72),transparent 68%);
}
.clips-page .clip-category .gallery-group-shade{
  align-self:stretch;
  display:flex;
  align-items:center;
  flex:0 0 50px;
  padding-right:22px;
  border-right:1px solid rgba(200,230,83,.25);
}
.clips-page .clip-category .gallery-group-shade::before{
  content:counter(clip-chapter,decimal-leading-zero);
  color:rgba(213,239,147,.42);
  font-size:32px;
  font-weight:800;
  letter-spacing:-.04em;
  transition:color .2s;
}
.clips-page .clip-category:hover .gallery-group-shade::before{color:#d5ef93}
.clips-page .clip-category .gallery-group-kicker{margin-bottom:9px;font-size:9px;letter-spacing:.24em}
.clips-page .clip-category .gallery-group-title{margin:0;color:#f1f4ed;font-size:clamp(23px,2.8vw,38px);line-height:1.08;letter-spacing:.065em}
.clips-page .clip-category .gallery-group-note{display:block;max-width:490px;margin-top:10px;color:#c2ccb8;font-size:12px;line-height:1.55}
.clips-page .clip-category .gallery-group-side{gap:18px;padding:12px 14px;border-color:rgba(212,238,117,.34);border-radius:7px;background:rgba(7,14,9,.88)}
.clips-page .clip-category .gallery-group-toggle{border-radius:4px;background:rgba(200,230,83,.14)}
.clips-page .clip-category .gallery-group-count{text-transform:uppercase}
.clips-page .clip-category .gallery-group-body{padding:26px;background:linear-gradient(140deg,rgba(24,32,23,.68),#060a08)}
.clips-page .clip-category .clip-card{background:linear-gradient(150deg,#182017,#090d0a);border-color:rgba(200,230,83,.16)}
.clips-page .clip-category .clip-meta{min-height:84px;border-top:1px solid rgba(200,230,83,.13)}
.clips-page .clip-category .gallery-group-summary:focus-visible{outline:2px solid #c8e653;outline-offset:-4px}
.game-concept-page .nav a,
.clips-page .nav a{border-radius:5px 10px 5px 10px;box-shadow:inset 0 1px rgba(213,236,127,.07),0 4px 12px rgba(0,0,0,.32)}
.game-concept-page .nav a.active,
.clips-page .nav a.active{box-shadow:inset 0 -2px #c8e653,0 0 24px rgba(183,220,84,.15)}

@media(max-width:720px){
  .game-concept-page,
  .clips-page,
  .gallery-page{background-attachment:scroll,scroll,scroll}
  .game-concept-page .concept-page,
  .clips-page .clips-main{padding:18px 13px 0}
  .game-concept-page .concept-page > .clips-hero,
  .clips-page .clips-main > .clips-hero{min-height:230px;padding:30px 22px;border-radius:13px 13px 4px 4px}
  .game-concept-page .concept-page > .clips-hero .section-title,
  .clips-page .clips-main > .clips-hero .section-title{font-size:clamp(38px,9vw,58px);letter-spacing:.1em}
  .game-concept-page .concept-page > .clips-hero .section-sub,
  .clips-page .clips-main > .clips-hero .section-sub{font-size:9px;letter-spacing:.1em}
  .journal-eyebrow{margin-bottom:13px;font-size:8px;letter-spacing:.17em}
  .journal-hero-note{margin:11px 0 16px;font-size:16px}
  .journal-explore{gap:22px;padding:10px 13px;font-size:9px}
  .game-concept-page .concept-page > .clips-section,
  .clips-page .clips-main > .clips-section,
  .clips-page > .clips-wide{margin-top:13px;padding:21px 17px}
  .clips-page .clip-categories{gap:13px;margin-bottom:42px;padding:17px 13px 12px}
  .clips-page .clip-category .gallery-group-summary{min-height:190px;flex-wrap:wrap;gap:14px;padding:22px 18px}
  .clips-page .clip-category .gallery-group-shade{display:none}
  .clips-page .clip-category .gallery-group-copy{flex-basis:100%}
  .clips-page .clip-category .gallery-group-title{font-size:23px}
  .clips-page .clip-category .gallery-group-note{font-size:12px}
  .clips-page .clip-category .gallery-group-side{padding:7px 10px}
  .clips-page .clip-category .gallery-group-body{padding:14px}
  .game-concept-page .concept-page > .clips-section > h2.clips-h2,
  .clips-page .clips-main > .clips-section > h2.clips-h2,
  .clips-page > .clips-wide > h2.clips-h2{font-size:12px;letter-spacing:.1em}
  .game-concept-page .concept-page .clips-note{font-size:13px;line-height:1.75}
  .game-concept-page .concept-page h3.clips-h2{margin-top:20px}
}
@media(prefers-reduced-motion:reduce){
  .game-concept-page *, .game-concept-page *::before, .game-concept-page *::after,
  .clips-page *, .clips-page *::before, .clips-page *::after{animation:none!important;transition:none!important}
}