/* ==========================================================
   Реверс — хаб вселенной. «Летопись».
   Чёрный, золото, разреженные заголовки, линии с ромбом,
   косые панели областей мира, эмблемы.
   ========================================================== */
:root{
  --black:#08080a; --deep:#111014; --deep-2:#19171d;
  --gold:#c9a35b; --gold-hi:#ecd29a; --gold-lo:#7d6534;
  --ember:#b3261e; --ember-glow:rgba(179,38,30,.55);
  --text:#ebe4d4; --muted:#9a9282; --dim:#6a6458;
  --line:rgba(201,163,91,.32);
  --ph-a:#18161b; --ph-b:#141217;
  --display:"Forum","Cormorant Garamond",Georgia,serif;
  --body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --black:#08080a; } }
:root[data-theme="dark"]{ --black:#08080a; }
/* Верхний мир: та же чернота, холодный металл и неон вместо золота */
:root[data-world="upper"]{
  --gold:#8fc9d8; --gold-hi:#d4f2fb; --gold-lo:#3f6a77;
  --ember:#d6246e; --ember-glow:rgba(214,36,110,.5);
  --line:rgba(143,201,216,.32);
  --ph-a:#14181d; --ph-b:#101418;
}

html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 84px); scroll-behavior:smooth; overflow-x:clip}
*,*::before,*::after{box-sizing:inherit}
body{margin:0; background:var(--black); color:var(--text); font:400 16px/1.7 var(--body); -webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:1px solid var(--gold-hi); outline-offset:4px}
.wrap{max-width:1200px; margin:0 auto; padding:0 28px}
h1,h2,h3{font-family:var(--display); font-weight:400; margin:0; line-height:1.1}
.caps{text-transform:uppercase; letter-spacing:.22em}
h2{font-size:clamp(28px,3.4vw,44px); text-transform:uppercase; letter-spacing:.2em; color:var(--gold)}
h3{font-size:22px; letter-spacing:.06em}
p{margin:0 0 1em; max-width:62ch}
.muted{color:var(--muted)}
.center{text-align:center}
.center p,p.center{margin-left:auto; margin-right:auto}

/* ---------- Линия с ромбом ---------- */
.rule{display:flex; align-items:center; justify-content:center; gap:22px; margin:26px auto}
.rule::before,.rule::after{content:""; height:1px; width:min(240px,30vw); background:linear-gradient(90deg,transparent,var(--gold))}
.rule::after{background:linear-gradient(90deg,var(--gold),transparent)}
.rule i{width:11px; height:11px; transform:rotate(45deg); background:var(--gold); box-shadow:0 0 14px var(--gold)}
.rule.left{justify-content:flex-start; margin-left:0}
.rule.left::before{display:none}

/* ---------- Заглушки ---------- */
.ph{position:relative; overflow:hidden; display:flex; align-items:flex-end; min-height:120px;
  background:radial-gradient(70% 60% at 50% 30%,rgba(201,163,91,.10),transparent 70%),
             repeating-linear-gradient(135deg,var(--ph-a) 0 16px,var(--ph-b) 16px 32px)}
.ph > span{font:500 12px var(--body); color:var(--muted); padding:7px 11px; background:rgba(0,0,0,.55)}
/* срез угла, как у картинок в «Wukong» */
.chip-r{clip-path:polygon(0 0,82% 0,100% 30%,100% 100%,0 100%)}
.chip-l{clip-path:polygon(18% 0,100% 0,100% 100%,0 100%,0 30%)}

/* ---------- Кнопки ---------- */
.btn{display:inline-flex; align-items:center; gap:14px; padding:14px 30px; text-decoration:none; cursor:pointer; border:1px solid var(--gold);
  background:linear-gradient(180deg,rgba(201,163,91,.14),rgba(201,163,91,.02)); color:var(--gold-hi);
  font:600 13px var(--body); text-transform:uppercase; letter-spacing:.2em; transition:background .25s, color .25s}
.btn:hover{background:var(--gold); color:var(--black)}
.btn.solid{background:var(--gold); color:var(--black)}
.btn.solid:hover{background:var(--gold-hi)}
.link{color:var(--gold); text-decoration:none; font:600 13px var(--body); text-transform:uppercase; letter-spacing:.18em}
.link:hover{color:var(--gold-hi)}

/* ---------- Эмблема (круг с четырьмя опорами) ---------- */
.emblem{position:relative; width:96px; height:96px; border-radius:50%; border:2px solid currentColor; display:grid; place-items:center; color:var(--text)}
.emblem::before,.emblem::after{content:""; position:absolute; width:10px; height:10px; border-radius:50%; background:currentColor}
.emblem::before{top:-6px; left:50%; margin-left:-5px; box-shadow:0 calc(96px + 0px) 0 currentColor}
.emblem::after{left:-6px; top:50%; margin-top:-5px; box-shadow:calc(96px + 0px) 0 0 currentColor}
.emblem svg{width:52%; height:52%}
.emblem.sm{width:58px; height:58px; border-width:1px}
.emblem.sm::before{width:7px; height:7px; top:-4px; margin-left:-3.5px; box-shadow:0 58px 0 currentColor}
.emblem.sm::after{width:7px; height:7px; left:-4px; margin-top:-3.5px; box-shadow:58px 0 0 currentColor}

/* ---------- Шапка ---------- */
.top{position:fixed; left:0; right:0; top:0; z-index:30; padding-top:env(safe-area-inset-top,0px);
  background:linear-gradient(to bottom,rgba(0,0,0,.85),transparent); transition:background .3s}
.top.solid{background:rgba(8,8,10,.94); box-shadow:0 1px 0 var(--line)}
.top .wrap{display:flex; align-items:center; gap:34px; height:80px}
.logo{display:flex; align-items:center; gap:12px; text-decoration:none; font:400 21px var(--display); letter-spacing:.32em; color:var(--gold-hi)}
.logo svg{width:30px; height:30px; color:var(--gold)}
.nav{display:flex; gap:30px}
.nav a{text-decoration:none; color:var(--muted); font:600 12px var(--body); text-transform:uppercase; letter-spacing:.2em; padding:8px 0}
.nav a:hover,.nav a[aria-current="page"]{color:var(--gold-hi)}
.nav a[aria-current="page"]{box-shadow:inset 0 -1px 0 var(--gold)}
.spacer{flex:1}
.world{white-space:nowrap; display:flex; align-items:center; gap:10px; background:none; border:0; color:var(--muted); cursor:pointer;
  font:600 11px var(--body); text-transform:uppercase; letter-spacing:.2em}
.world .gem{width:16px; height:16px; transform:rotate(45deg); border:1px solid var(--gold); position:relative; transition:transform .6s cubic-bezier(.7,0,.2,1)}
.world .gem::after{content:""; position:absolute; inset:3px; background:var(--gold)}
:root[data-world="upper"] .world .gem{transform:rotate(225deg)}
.top .btn{padding:11px 20px; font-size:11px}
.burger{display:none; background:none; border:1px solid var(--line); color:var(--gold); width:44px; height:44px; cursor:pointer}
.drawer{position:fixed; inset:0; z-index:40; background:rgba(8,8,10,.97); display:none; flex-direction:column; align-items:center; justify-content:center; gap:8px}
.drawer.open{display:flex}
.drawer a{font:400 24px var(--display); letter-spacing:.24em; text-transform:uppercase; text-decoration:none; color:var(--text); padding:10px}
.drawer .close{position:absolute; top:calc(env(safe-area-inset-top,0px) + 18px); right:22px}

[data-soon]{cursor:not-allowed}
.nav [data-soon],.drawer [data-soon],footer [data-soon],.link[data-soon]{opacity:.5}
.toast{position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom,0px) + 26px); z-index:60; transform:translate(-50%,calc(100% + 60px)); visibility:hidden;
  background:var(--deep-2); border:1px solid var(--gold); color:var(--text); padding:12px 22px; font-size:14px; transition:transform .35s}
.toast.show{transform:translate(-50%,0); visibility:visible}

section{padding:110px 0}

/* ==========================================================
   ГЛАВНАЯ: постер
   ========================================================== */
.poster{position:relative; min-height:100vh; min-height:100svh; display:flex; flex-direction:column; justify-content:space-between;
  padding:120px 0 48px; overflow:hidden; isolation:isolate; text-align:center}
.poster > .ph{position:absolute; inset:0; z-index:-2;
  background:radial-gradient(40% 50% at 72% 34%,var(--ember-glow),transparent 70%),
             radial-gradient(50% 40% at 50% 80%,rgba(201,163,91,.12),transparent 70%),
             repeating-linear-gradient(135deg,var(--ph-a) 0 16px,var(--ph-b) 16px 32px)}
.poster > .ph > span{position:absolute; right:24px; top:104px}
.poster::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to bottom,rgba(8,8,10,.6),transparent 30%,transparent 55%,var(--black) 96%)}
.tagline{font:400 15px var(--display); letter-spacing:.42em; text-transform:uppercase; color:var(--muted)}
.tagline b{font-weight:400; color:var(--ember)}
.title{display:flex; align-items:center; justify-content:center; gap:clamp(16px,3vw,40px)}
.title h1{font-size:clamp(54px,10vw,148px); letter-spacing:.16em; text-transform:uppercase;
  background:linear-gradient(180deg,var(--gold-hi) 10%,var(--gold) 55%,var(--gold-lo) 100%); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 4px 24px rgba(0,0,0,.8))}
.title .medal{flex:0 0 auto; width:clamp(70px,9vw,128px); color:var(--gold); filter:drop-shadow(0 0 18px rgba(201,163,91,.4))}
.poster .sub{font:400 18px var(--display); letter-spacing:.3em; text-transform:uppercase; color:var(--text); margin-top:12px}
.poster .acts{display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:30px}
.pillars{display:grid; grid-template-columns:repeat(4,1fr); gap:26px; margin-top:60px}
.pillar{text-decoration:none; display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--gold)}
.pillar svg{width:40px; height:40px}
.pillar .ln{width:100%; height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent); position:relative}
.pillar .ln::after{content:""; position:absolute; left:50%; top:-3px; width:6px; height:6px; margin-left:-3px; transform:rotate(45deg); background:var(--gold)}
.pillar b{font:400 15px var(--display); letter-spacing:.24em; text-transform:uppercase; color:var(--text)}
.pillar small{font:500 12px var(--body); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-top:-6px}
.pillar:hover b{color:var(--gold-hi)}

/* золотая лента (как в «Wukong») */
.band{position:relative; height:120px; margin:40px 0;
  background:linear-gradient(90deg,var(--gold-lo),var(--gold) 30%,var(--gold-hi) 50%,var(--gold) 70%,var(--gold-lo));
  -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  display:flex; justify-content:space-around; align-items:flex-end}
.band .fig{width:90px; height:140%; background:rgba(8,8,10,.82); clip-path:polygon(35% 0,65% 0,75% 18%,70% 40%,90% 55%,85% 100%,15% 100%,10% 55%,30% 40%,25% 18%)}
.worlds{display:grid; grid-template-columns:1fr 1fr; gap:60px; margin-top:20px}
.worlds h3{color:var(--gold-hi); text-transform:uppercase; letter-spacing:.2em; margin-bottom:14px}

/* ---------- Косые панели областей ---------- */
.regions{display:grid; grid-template-columns:repeat(4,1fr); gap:6px}
.region{position:relative; min-height:560px; text-decoration:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
  clip-path:polygon(0 0,100% 34%,100% 100%,0 100%); overflow:hidden; isolation:isolate; transition:filter .3s}
.region > .ph{position:absolute; inset:0; z-index:-1}
.region > .ph > span{position:absolute; left:0; bottom:0}
.region::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(to top,rgba(8,8,10,.75),transparent 60%)}
.region b{font:400 24px/1.35 var(--display); letter-spacing:.2em; text-transform:uppercase; text-align:center; color:var(--text); padding:0 14px}
.region small{display:block; font:500 12px var(--body); letter-spacing:.14em; color:var(--muted); text-transform:uppercase}
.region:hover{filter:brightness(1.25)}
.region:nth-child(1) .ph{background:radial-gradient(60% 50% at 50% 30%,rgba(236,210,154,.18),transparent),repeating-linear-gradient(135deg,var(--ph-a) 0 16px,var(--ph-b) 16px 32px)}
.region:nth-child(2) .ph{background:radial-gradient(60% 50% at 50% 30%,rgba(179,38,30,.3),transparent),repeating-linear-gradient(135deg,var(--ph-a) 0 16px,var(--ph-b) 16px 32px)}
.region:nth-child(3) .ph{background:radial-gradient(60% 50% at 50% 30%,rgba(120,170,200,.22),transparent),repeating-linear-gradient(135deg,var(--ph-a) 0 16px,var(--ph-b) 16px 32px)}
.region:nth-child(4) .ph{background:radial-gradient(60% 50% at 50% 30%,rgba(110,150,110,.2),transparent),repeating-linear-gradient(135deg,var(--ph-a) 0 16px,var(--ph-b) 16px 32px)}

/* широкая плашка-заголовок на фоне */
.vista{position:relative; padding:150px 0; text-align:center; overflow:hidden; isolation:isolate}
.vista > .ph{position:absolute; inset:0; z-index:-1; opacity:.7}
.vista h2{font-size:clamp(30px,4.4vw,58px); letter-spacing:.14em; text-transform:none; color:var(--gold)}

/* ---------- Отряд ---------- */
.squad{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.hero-card{text-decoration:none; display:flex; flex-direction:column; align-items:center; text-align:center}
.hero-card .frame{width:100%; padding:6px; border:1px solid var(--line); position:relative}
.hero-card .frame::before{content:""; position:absolute; top:-6px; left:50%; width:10px; height:10px; margin-left:-5px; transform:rotate(45deg); background:var(--gold)}
.hero-card .ph{aspect-ratio:3/4; min-height:0; filter:grayscale(.4)}
.hero-card b{font:400 22px var(--display); letter-spacing:.22em; text-transform:uppercase; margin-top:18px}
.hero-card small{font:600 12px var(--body); letter-spacing:.18em; text-transform:uppercase; color:var(--gold)}
.hero-card:hover .ph{filter:none}
.hero-card:hover .frame{border-color:var(--gold)}

/* ---------- Чередование картинка/текст ---------- */
.saga{display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; margin-bottom:90px}
.saga:last-child{margin-bottom:0}
.saga .ph{min-height:340px}
.saga h3{font-size:32px; text-transform:uppercase; letter-spacing:.18em; color:var(--gold-hi); margin-bottom:16px}
.saga .acts{display:flex; gap:14px; flex-wrap:wrap; margin-top:10px}

/* ---------- Три колонки ---------- */
.triad{display:grid; grid-template-columns:repeat(3,1fr)}
.triad > div{padding:0 34px; border-left:1px solid var(--line)}
.triad > div:first-child{border-left:0; padding-left:0}
.triad h3{text-transform:uppercase; letter-spacing:.2em; color:var(--gold); margin-bottom:18px; font-size:19px}
.titem{display:block; padding:14px 0; border-top:1px solid rgba(255,255,255,.06); text-decoration:none}
.titem small{display:block; color:var(--dim); font-size:12px; letter-spacing:.1em; text-transform:uppercase}
.titem:hover{color:var(--gold-hi)}

/* ---------- Поддержать ---------- */
.oath{position:relative; padding:120px 0; text-align:center; overflow:hidden; isolation:isolate}
.oath::before{content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(50% 70% at 50% 100%,var(--ember-glow),transparent 70%)}
.ranks{display:grid; grid-template-columns:repeat(7,1fr); gap:14px; margin:50px 0 40px}
.rank{display:flex; flex-direction:column; align-items:center; gap:12px; color:var(--gold)}
.rank b{font:400 15px var(--display); letter-spacing:.16em; text-transform:uppercase; color:var(--text)}
.rank.partner b{color:var(--ember)}

/* ---------- Подвал ---------- */
footer{border-top:1px solid var(--line); padding:60px 0 70px; color:var(--muted); font-size:14px}
footer .cols{display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:30px}
footer h4{font:400 14px var(--display); letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin:0 0 14px}
footer a{display:block; text-decoration:none; padding:3px 0} footer a:hover{color:var(--gold-hi)}
footer .bottom{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:40px; color:var(--dim); font-size:12px; letter-spacing:.14em; text-transform:uppercase}

/* ---------- Переход между мирами ---------- */
.veil{position:fixed; inset:0; z-index:70; pointer-events:none; opacity:0; background:var(--black)}
.veil::after{content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--gold); box-shadow:0 0 20px var(--gold)}
.veil.go{animation:veil .9s cubic-bezier(.7,0,.2,1)}
@keyframes veil{0%{opacity:0; clip-path:inset(50% 0 50% 0)}45%,60%{opacity:1; clip-path:inset(0)}100%{opacity:0; clip-path:inset(50% 0 50% 0)}}

/* ==========================================================
   Внутренние страницы
   ========================================================== */
.page-head{position:relative; padding:180px 0 60px; text-align:center; overflow:hidden; isolation:isolate}
.page-head > .ph{position:absolute; inset:0; z-index:-2; opacity:.6}
.page-head::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(transparent 30%,var(--black))}
.page-head h1{font-size:clamp(46px,8vw,110px); letter-spacing:.24em; text-transform:uppercase; color:var(--gold-hi)}
.page-head p{font-size:18px; color:var(--muted); margin:0 auto}
.crumbs{display:flex; justify-content:center; gap:12px; font:600 11px var(--body); letter-spacing:.2em; text-transform:uppercase; color:var(--dim); margin-bottom:26px}
.crumbs a{text-decoration:none; color:var(--muted)} .crumbs a:hover{color:var(--gold)}
.crumbs.left{justify-content:flex-start}

.regions.seven{grid-template-columns:repeat(4,1fr)}
.regions.seven .region{min-height:440px}
.chrono{display:grid; grid-template-columns:repeat(4,1fr); gap:30px; position:relative; padding-top:40px}
.chrono::before{content:""; position:absolute; left:0; right:0; top:14px; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.chrono div{position:relative; text-align:center}
.chrono div::before{content:""; position:absolute; top:-32px; left:50%; margin-left:-6px; width:12px; height:12px; transform:rotate(45deg); background:var(--black); border:1px solid var(--gold)}
.chrono b{display:block; font:400 19px var(--display); letter-spacing:.16em; text-transform:uppercase; color:var(--gold-hi); margin-bottom:8px}
.chrono span{color:var(--muted); font-size:15px}

/* ---------- Персонаж ---------- */
.char{position:relative; min-height:100vh; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); overflow:hidden; isolation:isolate}
.char .txt{padding:150px 40px 70px max(28px,calc((100vw - 1200px)/2 + 28px)); display:flex; flex-direction:column; justify-content:center}
.char .pic{position:relative}
.char .pic .ph{position:absolute; inset:0; clip-path:polygon(22% 0,100% 0,100% 100%,0 100%,0 26%);
  background:radial-gradient(50% 50% at 50% 40%,var(--ember-glow),transparent 70%),repeating-linear-gradient(135deg,var(--ph-a) 0 16px,var(--ph-b) 16px 32px)}
.char .pic .ph > span{position:absolute; right:20px; bottom:20px}
.char .kicker{font:600 12px var(--body); letter-spacing:.24em; text-transform:uppercase; color:var(--gold)}
.char h1{font-size:clamp(40px,7vw,104px); letter-spacing:.14em; text-transform:uppercase; color:var(--gold-hi); margin:18px 0 6px}
.char .nick{font:400 20px var(--display); letter-spacing:.2em; text-transform:uppercase; color:var(--text)}
.stats{display:grid; grid-template-columns:repeat(3,auto); justify-content:start; gap:0; margin:6px 0 30px}
.stats div{padding:0 26px; border-left:1px solid var(--line)}
.stats div:first-child{padding-left:0; border-left:0}
.stats small{display:block; font:600 11px var(--body); letter-spacing:.2em; text-transform:uppercase; color:var(--dim)}
.stats b{font:400 24px var(--display); letter-spacing:.06em}
.skills{display:grid; grid-template-columns:repeat(4,1fr); gap:40px 20px}
.skill{display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center}
.skill b{font:400 16px var(--display); letter-spacing:.14em; text-transform:uppercase}
.pair{display:grid; grid-template-columns:1fr 1fr; gap:60px}
.pair h3{text-transform:uppercase; letter-spacing:.2em; color:var(--gold); margin-bottom:16px}
.pair ul{list-style:none; margin:0; padding:0}
.pair li{padding:12px 0 12px 22px; border-top:1px solid rgba(255,255,255,.06); position:relative}
.pair li::before{content:""; position:absolute; left:2px; top:21px; width:6px; height:6px; transform:rotate(45deg); background:var(--gold)}
.gear{display:grid; grid-template-columns:repeat(5,1fr); gap:10px; padding:10px; border:1px solid var(--line)}
.gear .ph{aspect-ratio:1; min-height:0}
.face{display:grid; grid-template-columns:1fr 1.2fr; gap:60px; align-items:center; padding:60px; border:1px solid var(--line); position:relative; isolation:isolate}
.face::before{content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(60% 90% at 0% 100%,var(--ember-glow),transparent 70%)}
.roles{display:grid; grid-template-columns:1fr 1fr; gap:0 30px}
.roles div{display:flex; justify-content:space-between; gap:10px; padding:13px 0; border-top:1px solid rgba(255,255,255,.08); font-size:15px}
.roles em{font-style:normal; color:var(--dim); font-size:12px; letter-spacing:.12em; text-transform:uppercase}
.discuss .msg{display:grid; grid-template-columns:40px 1fr; gap:14px; padding:16px 0; border-top:1px solid rgba(255,255,255,.06)}
.discuss .ava{width:40px; height:40px; transform:rotate(45deg) scale(.75); border:1px solid var(--gold)}
.discuss small{color:var(--dim)}
.pager{display:flex; justify-content:space-between; gap:16px; border-top:1px solid var(--line); padding-top:30px}
.pager a{text-decoration:none}
.pager small{display:block; font:600 11px var(--body); letter-spacing:.2em; text-transform:uppercase; color:var(--dim)}
.pager b{font:400 24px var(--display); letter-spacing:.2em; text-transform:uppercase}
.pager a:hover b{color:var(--gold-hi)}

@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} .veil.go{animation:none} .btn{transition:none} }

/* ==========================================================
   АДАПТИВ
   ========================================================== */
@media (max-width:1100px){
  .nav{display:none} .burger{display:grid; place-items:center}
  .regions,.regions.seven{grid-template-columns:repeat(2,1fr)} .region{min-height:420px}
  .squad{grid-template-columns:repeat(2,1fr)}
  .ranks{grid-template-columns:repeat(4,1fr)}
  .char{grid-template-columns:1fr} .char .pic{min-height:70vh; order:-1} .char .txt{padding:40px 28px 60px}
  .skills{grid-template-columns:repeat(2,1fr)}
  .face{grid-template-columns:1fr; padding:40px}
  .chrono{grid-template-columns:1fr 1fr; row-gap:60px}
  footer .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .wrap{padding:0 18px} section{padding:76px 0}
  .top .btn,.world span{display:none}
  .title .medal{display:none}
  .pillars{grid-template-columns:1fr 1fr; row-gap:34px}
  .worlds,.saga,.pair,.roles{grid-template-columns:1fr; gap:30px}
  .saga .ph{order:-1}
  .triad{grid-template-columns:1fr; gap:40px} .triad > div{border-left:0; padding:0}
  .regions,.regions.seven{grid-template-columns:1fr} .region{min-height:300px; clip-path:polygon(0 0,100% 18%,100% 100%,0 100%)}
  .ranks{grid-template-columns:repeat(2,1fr)}
  .gear{grid-template-columns:repeat(3,1fr)}
  .stats{grid-template-columns:1fr 1fr 1fr} .stats div{padding:0 12px}
  .face{padding:28px 22px}
  .chrono{grid-template-columns:1fr}
  footer .cols{grid-template-columns:1fr}
  .pager{flex-direction:column}
  .char h1{letter-spacing:.06em}
  .title h1{letter-spacing:.08em}
}