/*
Theme Name: Hytale Guides
Description: Dark indigo publishing theme for Hytale mod reviews.
Version: 0.1.0
*/
:root{--bg:#0b0d14;--panel:#111521;--text:#f2f1ff;--muted:#a8acd0;--accent:#a18aff;--line:#293149}
*{box-sizing:border-box}
body{margin:0;background-color:var(--bg);background-image:radial-gradient(circle at 18% 0,rgba(102,82,170,.12),transparent 32%),repeating-linear-gradient(115deg,rgba(255,255,255,.018) 0,rgba(255,255,255,.018) 1px,transparent 1px,transparent 7px),repeating-linear-gradient(25deg,rgba(0,0,0,.12) 0,rgba(0,0,0,.12) 1px,transparent 1px,transparent 9px);color:var(--text);font:16px/1.6 system-ui,sans-serif}
a{color:inherit;text-decoration:none}.site-header,.site-footer,.wrap{max-width:1180px;margin:auto;padding:14px 24px}.site-header{display:flex;justify-content:space-between;align-items:center}.brand{font-weight:800;font-size:1.2rem}.nav{display:flex;gap:24px;color:var(--muted)}
.hero{max-width:1180px;margin:0 auto;padding:42px 24px 56px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;min-height:440px}.eyebrow{color:var(--accent);text-transform:uppercase;letter-spacing:.15em;font-size:.75rem}.hero h1{font-size:clamp(2.8rem,5vw,5rem);line-height:.95;margin:16px 0}.muted{color:var(--muted)}.hero-art{aspect-ratio:16/9;border-radius:20px;background:linear-gradient(135deg,#1d2039,#111521 55%,#37305d);box-shadow:0 20px 80px rgba(0,0,0,.38)}
.hero img,.mod-image,.preview-image{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:16px;background:var(--panel)}.feature-frame{width:100%;aspect-ratio:16/9;max-height:calc(100vh - 300px);overflow:hidden;border-radius:16px;background:var(--panel)}.feature-frame .mod-image{width:100%;height:100%;object-fit:contain;object-position:center}
.section{padding:46px 24px}.section-heading{display:flex;align-items:end;justify-content:space-between}.section h2{font-size:2.5rem}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden}.card-body{padding:18px}.badge,.side-link{color:var(--accent);font-size:.8rem}.cta{display:inline-block;background:var(--accent);color:#0b0d14;font-weight:700;padding:12px 18px;border-radius:10px}
main.single{max-width:1180px;margin:0 auto;padding:10px 24px}.hg-article-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:32px;align-items:start}main.single h1{font-size:clamp(2.5rem,5vw,5rem);line-height:.95;margin:12px 0 22px}.tabs{display:flex;gap:8px;overflow:auto;margin:18px 0;border-bottom:1px solid var(--line)}.tab-button{border:0;background:none;color:var(--muted);padding:14px 18px;cursor:pointer;white-space:nowrap}.tab-button.active,.tab-button[aria-selected=true]{color:var(--text);border-bottom:2px solid var(--accent)}.tab-panel,.side-card{background:var(--panel);border-radius:16px;padding:28px}.article-left-rail{display:grid;gap:18px}.side-card h2{font-size:1.35rem;margin-top:0}.side-card p{color:var(--muted)}.side-card strong{color:var(--text)}.suggested-card{display:block;border-top:1px solid var(--line);padding:14px 0}.suggested-card .preview-image{margin-bottom:10px}.site-footer{border-top:1px solid var(--line);color:var(--muted)}
@media(max-width:800px){.hero{grid-template-columns:1fr;min-height:0}.grid{grid-template-columns:1fr 1fr}.hg-article-layout{grid-template-columns:1fr}.article-left-rail{grid-row:2}.feature-frame{max-height:none}}
@media(max-width:520px){.grid{grid-template-columns:1fr}.nav{gap:10px;font-size:.9rem}.hero{padding-top:24px}main.single{padding:18px}}
.grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.preview-frame{width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--panel);border-radius:16px}
.preview-frame .preview-image{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;border-radius:0}
@media(max-width:800px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.grid{grid-template-columns:1fr}}
.article-summary{font-size:1.12rem;line-height:1.55;color:var(--muted);margin:-8px 0 20px;max-width:58ch}
.card-summary{color:var(--muted);margin:8px 0 0}
.hg-article-layout{grid-template-columns:180px minmax(0,1fr) 240px;gap:28px}
.article-right-rail{display:grid;gap:18px}
@media(max-width:1000px){.hg-article-layout{grid-template-columns:200px minmax(0,1fr) 220px;gap:20px}}
@media(max-width:800px){.hg-article-layout{grid-template-columns:1fr}.article-left-rail,.article-right-rail{grid-row:auto}}
html{background-color:var(--bg);background-image:radial-gradient(circle at 18% 0,rgba(102,82,170,.12),transparent 32%),repeating-linear-gradient(115deg,rgba(255,255,255,.018) 0,rgba(255,255,255,.018) 1px,transparent 1px,transparent 7px),repeating-linear-gradient(25deg,rgba(0,0,0,.12) 0,rgba(0,0,0,.12) 1px,transparent 1px,transparent 9px);min-height:100%}
body{min-height:100vh}
.site-header,.wrap{max-width:1500px}
.site-footer{max-width:none;width:100%;margin-top:64px;padding:24px max(24px,calc((100vw - 1500px)/2));background:rgba(17,21,33,.94);border-top:1px solid var(--line);color:var(--muted)}
.footer-grid{max-width:1500px;margin:0 auto;padding:28px 0 44px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px}.footer-brand .brand{display:inline-block;margin-bottom:18px}.footer-brand .muted{max-width:34ch}.footer-link{display:block;color:var(--text);margin:10px 0}.footer-link:hover,.side-link:hover{color:var(--accent)}.footer-bottom{max-width:1500px;margin:0 auto;border-top:1px solid var(--line);padding-top:18px;display:flex;justify-content:space-between;gap:20px;font-size:.85rem}
@media(max-width:800px){.footer-grid{grid-template-columns:1fr 1fr;gap:28px}.footer-bottom{display:grid}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr}.site-footer{padding-left:24px;padding-right:24px}}
.site-header,.wrap{max-width:1800px;width:calc(100% - 96px)}
main.single{max-width:1800px;width:calc(100% - 96px)}
.hg-article-layout{grid-template-columns:180px minmax(0,1fr) 240px;gap:28px}
@media(max-width:1100px){.hg-article-layout{grid-template-columns:240px minmax(0,1fr) 280px;gap:24px}}
@media(max-width:800px){.site-header,.wrap,main.single{width:calc(100% - 48px)}.hg-article-layout{grid-template-columns:1fr;gap:20px}}
@media(max-width:520px){.site-header,.wrap,main.single{width:calc(100% - 36px)}}
.homepage-showcase{max-width:1360px;width:calc(100% - 64px);margin-left:auto;margin-right:auto;padding-left:0;padding-right:0}.homepage-showcase .grid{gap:40px}
.archive-hero,.category-showcase{max-width:1360px;width:calc(100% - 64px);margin-left:auto;margin-right:auto}.archive-hero{padding:72px 0 20px}.archive-hero h1{font-size:clamp(2.8rem,6vw,5rem);line-height:.95;margin:12px 0}.archive-description{font-size:1.12rem;max-width:62ch}.archive-count{color:var(--muted);margin-top:24px}.category-showcase{padding:24px 0 72px}.archive-pagination{margin-top:42px}.archive-pagination ul{display:flex;gap:10px;list-style:none;padding:0}.archive-pagination a,.archive-pagination span{display:grid;place-items:center;min-width:42px;height:42px;padding:0 12px;border:1px solid var(--line);border-radius:10px;color:var(--muted)}.archive-pagination .current{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.tabs{align-items:center;width:max-content;max-width:100%;border:1px solid var(--line);border-radius:999px;padding:4px;background:rgba(17,21,33,.72)}.tabs .tab-button{border:0;border-radius:999px;padding:10px 18px;color:var(--muted)}.tabs .tab-button.active{background:rgba(161,138,255,.2);color:var(--text);box-shadow:0 0 0 1px var(--accent),0 6px 20px rgba(161,138,255,.2)}.tabs .tab-button[aria-selected=true]{border-bottom:0}
@media(max-width:520px){.archive-hero,.category-showcase{width:calc(100% - 36px)}}
.legal-shell{max-width:1100px;padding-top:54px;padding-bottom:34px}.legal-page{max-width:900px;margin:0 auto}.legal-page h1{font-size:clamp(2.6rem,6vw,5rem);margin:10px 0 8px}.legal-updated{color:var(--muted);margin:0 0 28px}.legal-content{font-size:1.03rem}.legal-content h2{font-size:1.55rem;margin:2em 0 .55em}.legal-content h2:first-child{margin-top:0}.legal-content p{max-width:78ch}.legal-content li{margin:.45em 0}.legal-content a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}