/* The wiki's page parts (wiki.css holds the frame): search results, the home, creature and topic pages. */
.search .results, .big-search .results { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; background: var(--panel); border: 1px solid var(--hair-hi); border-top: 0; display: none; }
.results a { display: flex; justify-content: space-between; gap: 10px; padding: 9px 14px; border-top: 1px solid var(--line); font-size: 14px; color: var(--gold-hi); }
.results a:hover { background: #13202b; } .results small { color: var(--muted); }
aside a.h { padding: 0; border: 0; color: var(--gold); font: inherit; } aside a.h:hover { color: var(--gold-hi); }
.foot { color: var(--gold); }

/* Home. */
.banner { position: relative; padding: 70px 0 60px; border-bottom: 1px solid var(--hair);
  background: linear-gradient(90deg, rgba(5, 9, 13, .96) 30%, rgba(5, 9, 13, .55)), url(../media/fight/sanglier.jpg) right center / cover; }
.banner h1 { font-size: clamp(40px, 6vw, 72px); line-height: 1; margin-top: 10px; }
.banner p { max-width: 560px; color: var(--gold-hi); margin: 16px 0 0; }
.big-search { margin-top: 28px; max-width: 560px; position: relative; }
.big-search input { width: 100%; padding: 15px 18px 15px 46px; background: rgba(15, 25, 34, .9); border: 1px solid var(--hair-hi); color: var(--gold-hi); font: 16px Inter; outline: none; }
.big-search::before { content: ""; position: absolute; left: 17px; top: 17px; width: 12px; height: 12px; border: 2px solid var(--gold); border-radius: 50%; }
.big-search::after { content: ""; position: absolute; left: 29px; top: 33px; width: 7px; height: 2px; background: var(--gold); transform: rotate(45deg); }
.home { padding-bottom: 80px; }
h2.sec { font-size: 26px; margin: 44px 0 16px; display: flex; align-items: baseline; gap: 14px; }
h2.sec.first { margin-top: 0; }
h2.sec small { font: 500 13px Inter; color: var(--muted); letter-spacing: 0; }
.cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cat { position: relative; height: 190px; overflow: hidden; border: 1px solid var(--hair); background: var(--panel); transition: border-color .3s; }
.cat img { width: 100%; height: 100%; object-fit: cover; opacity: .55; transition: transform .6s, opacity .3s; }
.cat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 20%, rgba(5, 9, 13, .92)); }
.cat .t { position: absolute; left: 18px; right: 18px; bottom: 14px; z-index: 1; }
.cat h3 { font-size: 22px; } .cat p { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.cat .n { position: absolute; top: 12px; right: 14px; z-index: 1; }
.cat:hover { border-color: var(--hair-hi); } .cat:hover img { transform: scale(1.05); opacity: .75; }
.mobs { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; }
.mob { text-align: center; }
.mob .p { aspect-ratio: 1; overflow: hidden; border: 1px solid var(--hair); background: var(--panel); clip-path: polygon(10% 0, 100% 0, 100% 90%, 90% 100%, 0 100%, 0 10%); }
.mob .p img { width: 100%; height: 100%; object-fit: cover; object-position: 35% 40%; transform: scale(1.5); transition: transform .4s; }
.mob:hover .p img { transform: scale(1.65); } .mob:hover .p { border-color: var(--gold); }
.mob span { display: block; margin-top: 6px; font-size: 12px; line-height: 1.3; }
.changes .row { display: flex; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 15px; }
.changes .row:first-child { border-top: 0; }
.changes time { flex: none; width: 90px; color: var(--jade); font-size: 13px; letter-spacing: .08em; }

/* Creature and topic pages. */
.splash { position: relative; height: 420px; overflow: hidden; border: 1px solid var(--hair); }
.splash.short { height: 300px; }
.splash img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.splash::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(5, 9, 13, .95)), linear-gradient(90deg, rgba(5, 9, 13, .7), transparent 55%); }
.splash .t { position: absolute; left: 30px; right: 30px; bottom: 26px; z-index: 1; }
.splash h1 { font-size: clamp(34px, 5vw, 58px); line-height: 1.05; margin: 10px 0 8px; }
.splash p { margin: 0; color: var(--gold-hi); max-width: 620px; }
.top { display: grid; grid-template-columns: 1fr 300px; gap: 26px; margin-top: 26px; align-items: start; }
.facts { padding: 0; }
.facts h3 { padding: 14px 18px; font-size: 16px; border-bottom: 1px solid var(--line); }
.facts dl { margin: 0; display: grid; grid-template-columns: auto 1fr; }
.facts dt, .facts dd { margin: 0; padding: 9px 18px; border-bottom: 1px solid var(--line); font-size: 14px; }
.facts dt { color: var(--muted); } .facts dd { color: var(--gold-hi); text-align: right; }
.prose p { margin: 0 0 12px; }
.bullets { margin: 0 0 12px; padding: 0; list-style: none; }
.bullets li { position: relative; padding: 7px 0 7px 26px; border-top: 1px solid var(--line); }
.bullets li::before { content: ""; position: absolute; left: 4px; top: 15px; width: 8px; height: 8px; transform: rotate(45deg); border: 1px solid var(--jade); }
.table { overflow-x: auto; margin: 6px 0 14px; border: 1px solid var(--hair); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; padding: 10px 14px; background: #121f2a; color: var(--gold); font: 700 12px Inter; letter-spacing: .12em; text-transform: uppercase; }
td { padding: 9px 14px; border-top: 1px solid var(--line); }
.moves { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.move { display: grid; grid-template-columns: 170px 1fr; background: var(--panel); border: 1px solid var(--hair); overflow: hidden; }
.move[hidden] { display: none; }
.move img { width: 100%; height: 100%; object-fit: cover; min-height: 120px; }
.move .b { padding: 14px 18px; }
.move h3 { font-size: 18px; margin: 6px 0 6px; }
.move p { margin: 0; font-size: 14px; color: var(--muted); }
.key { display: inline-block; min-width: 22px; padding: 0 6px; border: 1px solid var(--gold-dim); color: var(--gold-hi); font: 700 12px Inter; text-align: center; line-height: 20px; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.tabs button { background: none; border: 0; border-bottom: 1px solid transparent; padding: 8px 14px; color: var(--muted); font: 700 12px Inter; letter-spacing: .15em; text-transform: uppercase; cursor: pointer; }
.tabs button[aria-selected="true"] { color: var(--gold-hi); border-color: var(--gold); }
.tips { counter-reset: tip; margin: 0; padding: 0; list-style: none; }
.tips li { position: relative; padding: 12px 0 12px 44px; border-top: 1px solid var(--line); }
.tips li:first-child { border-top: 0; }
.tips li::before { counter-increment: tip; content: counter(tip); position: absolute; left: 4px; top: 12px; width: 24px; height: 24px; display: grid; place-items: center;
  transform: rotate(45deg); border: 1px solid var(--jade); font: 700 12px Inter; color: var(--jade); }
.soon { color: var(--muted); font-size: 14px; } .soon ul { margin: 0; padding-left: 18px; }
.family { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.family.wide { margin-top: 26px; grid-template-columns: repeat(3, 1fr); }
.kin { background: var(--panel); border: 1px solid var(--hair); overflow: hidden; transition: border-color .3s; }
.kin:hover { border-color: var(--hair-hi); }
.kin img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }
.kin div { padding: 10px 12px; } .kin b { display: block; font: 600 15px Cinzel, serif; color: var(--gold-hi); } .kin small { color: var(--muted); font-size: 12px; }
@media (max-width: 1000px) { .top { grid-template-columns: 1fr; } .moves { grid-template-columns: 1fr; } .family, .family.wide { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .cats { grid-template-columns: 1fr 1fr; } .mobs { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) { .cats { grid-template-columns: 1fr; } .move { grid-template-columns: 1fr; } .move img { height: 160px; } .splash { height: 320px; } .splash.short { height: 240px; } }

/* The atlas button on The Murim. */
.atlas-cta { display: grid; grid-template-columns: 200px 1fr; gap: 20px; align-items: center; margin: 26px 0 10px; padding: 14px; background: var(--panel); border: 1px solid var(--hair-hi); transition: border-color .3s; }
.atlas-cta:hover { border-color: var(--gold); }
.atlas-cta img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.atlas-cta h3 { font-size: 22px; margin: 8px 0 4px; } .atlas-cta p { margin: 0; color: var(--muted); }
@media (max-width: 560px) { .atlas-cta { grid-template-columns: 1fr; } }