/* God of War Sons of Sparta Guide — site stylesheet.
   Palette, type and ornament derived from the game's own official key art. */

:root{
  --void:#120e0c;
  --stone:#1d1713;
  --stone2:#26201a;
  --stone3:#2f281f;
  --bronze:#5f4a32;
  --bronze-lt:#c9a86f;
  --gold:#e5d5aa;
  --sand:#ddbd89;
  --terracotta:#c3845b;
  --crimson:#8d1922;
  --crimson-lt:#e07076;
  --aegean:#a3c3e2;
  --olive:#7e9468;
  --ink:#ece3d2;
  --muted:#a99c87;
  --r:2px;
  --maxw:1180px;
  --font:"Spectral",Georgia,"Times New Roman",serif;
  --display:"Cinzel","Trajan Pro",Georgia,serif;
  --pixel:"Silkscreen","Courier New",monospace;
  --shadow:4px 4px 0 #000;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--void);-webkit-text-size-adjust:100%}
body{
  margin:0;color:var(--ink);
  font:400 17.5px/1.72 var(--font);
  background:
    radial-gradient(900px 520px at 78% -8%, rgba(195,132,91,.10), transparent 68%),
    radial-gradient(760px 480px at -6% 18%, rgba(163,195,226,.055), transparent 70%),
    var(--void);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--terracotta);text-decoration:none;border-bottom:1px solid transparent}
a:hover{color:var(--sand);border-bottom-color:rgba(201,168,111,.55)}
a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
strong,b{color:#fff}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:10px;top:10px;background:var(--stone2);color:var(--gold);padding:10px 16px;z-index:99;border:1px solid var(--bronze)}
h1,h2,h3,h4{font-family:var(--display);font-weight:900;letter-spacing:.045em;line-height:1.14}
.muted{color:var(--muted)}

/* meander band */
.meander-band{height:12px;opacity:.5;
  background:
    repeating-linear-gradient(90deg,transparent 0 5px,var(--bronze) 5px 7px,transparent 7px 12px),
    repeating-linear-gradient(0deg,rgba(201,168,111,.55) 0 2px,transparent 2px 4px);
  background-size:24px 12px,24px 4px;
  background-position:0 0,0 4px;
  background-repeat:repeat-x,repeat-x}

/* ribbon */
.ribbon{background:var(--crimson);color:#f7e9cf;font-family:var(--pixel);font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid #000}
.ribbon .wrap{padding:7px 22px;text-align:center}

/* topbar */
.topbar{position:sticky;top:0;z-index:60;background:linear-gradient(180deg,#241d17,#1a1511);
  border-bottom:2px solid #000;box-shadow:0 2px 0 rgba(201,168,111,.18)}
.topbar .bar{display:flex;align-items:center;gap:18px;min-height:72px}
.brand{display:flex;align-items:center;gap:11px;color:var(--gold);font-family:var(--display);
  font-weight:900;font-size:16px;letter-spacing:.09em;text-transform:uppercase;line-height:1.15;border:0}
.brand img{width:38px;height:38px;flex:0 0 38px;border-radius:2px;image-rendering:pixelated}
.brand:hover{color:var(--sand)}
.nav{margin-left:auto;display:flex;align-items:center;gap:12px}
.nav>ul{display:flex;gap:1px;margin:0;padding:0;list-style:none;flex-wrap:nowrap}
.nav li{position:relative}
.nav a{display:block;color:var(--ink);font-family:var(--pixel);font-size:10.5px;letter-spacing:.04em;
  text-transform:uppercase;padding:11px 9px;border:0;border-bottom:2px solid transparent}
.nav a:hover{color:var(--gold);background:rgba(201,168,111,.09);border-bottom-color:var(--crimson-lt)}
.nav .active>a{color:var(--gold);border-bottom-color:var(--crimson-lt)}
.nav .kids{display:none;position:absolute;top:100%;left:0;z-index:41;min-width:268px;
  background:#221c16;border:1px solid var(--bronze);box-shadow:var(--shadow);padding:6px;
  flex-direction:column;gap:1px}
.nav .kids a{font-family:var(--font);font-size:14.5px;text-transform:none;letter-spacing:0;
  padding:8px 10px;border-bottom:0;line-height:1.35;color:var(--ink)}
.nav .kids a:hover{background:rgba(201,168,111,.10);border-bottom:0;color:var(--gold)}
.nav li.has-kids::after{content:"";position:absolute;left:-6px;right:-6px;top:100%;height:10px;z-index:39}
.nav li.has-kids>a::after{content:" \25BE";opacity:.62;font-size:9px}
.nav li.has-kids:hover .kids,.nav li.has-kids:has(:focus-visible) .kids{display:flex}
.nav .lang{position:relative}
.nav .lang summary{list-style:none;cursor:pointer;color:var(--muted);font-family:var(--pixel);font-size:10.5px;
  letter-spacing:.04em;padding:11px 8px;text-transform:uppercase}
.nav .lang summary::-webkit-details-marker{display:none}
.nav .lang[open] summary{color:var(--gold)}
.nav .lang ul{position:absolute;right:0;top:100%;z-index:41;min-width:132px;margin:0;padding:6px;list-style:none;
  background:#221c16;border:1px solid var(--bronze);box-shadow:var(--shadow);display:block}
.nav .lang li a{padding:7px 10px;color:var(--ink);text-transform:none;font-family:var(--font);font-size:14px}
.cta{border:1px solid var(--bronze-lt);background:var(--crimson);color:#f8ead1;font-family:var(--pixel);
  font-size:10px;letter-spacing:.04em;text-transform:uppercase;padding:10px 13px;border-radius:var(--r);
  box-shadow:3px 3px 0 #000;white-space:nowrap}
.cta:hover{background:var(--crimson-lt);color:#fff;box-shadow:1px 1px 0 #000}

/* hero */
.hero{position:relative;border-bottom:2px solid #000;overflow:hidden;
  background:
    radial-gradient(680px 400px at 12% 0%, rgba(141,25,34,.30), transparent 66%),
    linear-gradient(180deg,#1a1410,#141110)}
.hero-in{position:relative;display:grid;grid-template-columns:minmax(0,.93fr) minmax(0,1.07fr);
  gap:44px;align-items:center;padding:52px 22px 54px}
.hero .eyebrow{font-family:var(--pixel);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--terracotta);margin:0 0 16px;display:flex;align-items:center;gap:9px}
.hero .eyebrow:before{content:"";width:26px;height:8px;flex:0 0 26px;
  background:repeating-linear-gradient(90deg,var(--crimson-lt) 0 3px,transparent 3px 6px)}
.hero h1{font-size:clamp(38px,5.2vw,66px);margin:0;color:var(--gold);line-height:.95;
  text-shadow:0 3px 0 rgba(0,0,0,.72)}
.hero h1 .l2{display:block;color:var(--sand);font-size:.58em;letter-spacing:.06em;margin-top:6px}
.hero h1 .l3{display:block;color:#e8838a;font-size:.58em;letter-spacing:.19em;margin-top:2px}
.hero .lead{color:#d8cbb4;font-size:18.5px;max-width:46ch;margin:18px 0 0}
.hero .lead b{color:var(--gold);font-weight:600}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 0}
.btn{display:inline-block;font-family:var(--pixel);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;
  background:var(--crimson);color:#faeeda;border:1px solid var(--bronze-lt);padding:13px 18px;
  border-radius:var(--r);box-shadow:var(--shadow)}
.btn:hover{background:var(--crimson-lt);color:#fff;box-shadow:2px 2px 0 #000}
.btn.ghost{background:transparent;color:var(--gold);border-color:var(--bronze)}
.btn.ghost:hover{background:rgba(201,168,111,.12);color:#fff}
.hero-shot{margin:0;position:relative}
.hero-shot img{width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;
  border:1px solid var(--bronze);box-shadow:0 0 0 5px #14100d,8px 8px 0 rgba(0,0,0,.66);background:#100d0b}
.hero-shot figcaption{font-family:var(--pixel);font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);margin-top:10px;text-align:right}

/* facts strip */
.facts-strip{background:#191410;border-bottom:1px solid rgba(201,168,111,.24)}
.facts{display:flex;flex-wrap:wrap;padding:0}
.fact{flex:1 1 170px;padding:17px 18px;border-left:1px solid rgba(201,168,111,.20)}
.fact:first-child{border-left:0}
.fact-k{display:block;font-family:var(--pixel);font-size:9px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--terracotta);margin-bottom:6px}
.fact-v{display:block;font-family:var(--display);font-weight:700;font-size:16.5px;color:var(--gold);line-height:1.22}

/* section heads */
.section-head{margin:44px 0 4px;display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.section-head .overline{font-family:var(--pixel);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--terracotta);width:100%;margin-bottom:6px}
.section-head .overline:before{content:"\25AE\25AE\25AE";color:var(--crimson-lt);margin-right:9px;letter-spacing:1px}
.section-head h2{margin:0;font-size:28px;color:var(--gold);display:flex;align-items:center;gap:12px;
  border:0;padding:0}
.count-pill{font-family:var(--pixel);font-size:9.5px;color:var(--muted);border:1px solid var(--bronze);
  padding:3px 7px;border-radius:1px;font-weight:400}
.overline{font-family:var(--pixel);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--terracotta)}

/* cards */
.grid{display:flex;flex-wrap:wrap;gap:20px;margin:20px 0 10px}
.grid-title{margin-bottom:0}
.card{flex:1 1 300px;max-width:100%;display:flex;flex-direction:column;background:var(--stone);
  border:1px solid var(--bronze);border-radius:var(--r);overflow:hidden;color:var(--ink);
  box-shadow:var(--shadow);transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}
.card:hover{transform:translateY(-2px);box-shadow:5px 5px 0 var(--crimson);border-color:var(--bronze-lt);
  text-decoration:none}
.card .thumb{position:relative;display:block;background:#14100d;line-height:0}
.card .thumb img{width:100%;aspect-ratio:16/9;object-fit:cover}
.card .thumb:after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.5)}
.pill-tag{position:absolute;left:0;bottom:0;background:var(--crimson);color:#f9ecd6;font-family:var(--pixel);
  font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;padding:5px 9px;z-index:2}
.card-body{padding:15px 16px 17px;display:flex;flex-direction:column;flex:1}
.card h3{margin:0 0 8px;font-size:18.5px;color:var(--gold);line-height:1.24}
.card p{margin:0 0 12px;color:var(--muted);font-size:14.5px;line-height:1.55;flex:1}
.card .go{font-family:var(--pixel);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:#d99a70}
.card:hover .go{color:var(--sand)}
.card .card-body:after{content:"Read \2192";font-family:var(--pixel);font-size:9.5px;
  letter-spacing:.05em;text-transform:uppercase;color:#d99a70;margin-top:2px}
.card:hover .card-body:after{color:var(--sand)}
.card .stamp{display:block;font-family:var(--pixel);font-size:8.5px;letter-spacing:.03em;color:#a2937f;margin-top:8px}
.card.sm{flex:1 1 236px}
.card.sm h3{font-size:15.5px}

/* home prose */
.home-prose{max-width:840px;margin:34px auto 6px}
.home-prose h2{font-size:26px;color:var(--gold);margin:40px 0 12px;padding-top:20px;position:relative;
  border-top:1px solid rgba(201,168,111,.28)}
.home-prose h2:after{content:"\220E";position:absolute;top:-11px;left:0;background:var(--void);
  padding-right:12px;color:var(--crimson-lt);font-size:15px}
.home-prose h3{font-size:20px;color:var(--sand);margin:26px 0 8px}
.home-prose p{margin:0 0 15px}
.home-prose>p:first-of-type:first-letter{font-family:var(--display);font-weight:900;font-size:3em;
  float:left;line-height:.80;padding:7px 10px 0 0;color:var(--crimson-lt)}
.home-prose img.zoom{width:100%;display:block;border:1px solid var(--bronze);
  box-shadow:0 0 0 4px #14100d,7px 7px 0 rgba(0,0,0,.6);margin:16px 0 10px;cursor:zoom-in}
@media (max-width:900px){.home-prose{max-width:100%}}

/* article */
.article-grid{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:44px;
  align-items:start;padding-top:26px;padding-bottom:46px}
.article-grid>div{min-width:0}
.crumb{font-family:var(--pixel);font-size:9px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);margin-bottom:16px}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--gold)}
.crumb .sep{opacity:.4;margin:0 6px}
.crumb .here{color:var(--gold)}
article h1{font-size:clamp(29px,3.5vw,42px);color:var(--gold);margin:0 0 12px;line-height:1.1}
.art-lead{font-size:19px;color:#d8cbb4;margin:0 0 12px;border-left:3px solid var(--crimson);padding-left:14px}
.art-meta{font-family:var(--pixel);font-size:9px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);margin:0 0 22px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.art-meta .seal{color:#e8838a}
.art-meta .src-count{color:var(--bronze-lt)}
article h2{font-size:24px;color:var(--gold);margin:36px 0 12px;padding-top:16px;
  border-top:1px solid rgba(201,168,111,.26);position:relative}
article h2:after{content:"\220E";position:absolute;top:-10px;left:0;background:var(--void);
  padding-right:11px;color:var(--crimson-lt);font-size:13px}
article h3{font-size:19.5px;color:var(--sand);margin:26px 0 8px}
article p{margin:0 0 15px}
article ul,article ol{margin:0 0 16px;padding-left:24px}
article li{margin:0 0 7px}
article li::marker{color:var(--terracotta)}
article img.zoom{width:100%;display:block;border:1px solid var(--bronze);cursor:zoom-in;
  box-shadow:0 0 0 4px #14100d,7px 7px 0 rgba(0,0,0,.55);margin:18px 0 10px}
article img.zoom.open{max-width:min(1200px,96vw);cursor:zoom-out;border-color:var(--gold)}
article blockquote{margin:18px 0;padding:6px 18px;border-left:3px solid var(--bronze);
  color:#cfc0a6;font-style:italic}
article code{background:var(--stone2);border:1px solid var(--bronze);padding:1px 6px;border-radius:1px;
  font-family:var(--pixel);font-size:11.5px;color:var(--sand)}


/* figure with caption (body images) */
figure.fig{margin:20px 0 22px}
figure.fig img.zoom{margin:0 0 8px}
figure.fig figcaption{font-family:var(--pixel);font-size:9px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);line-height:1.6;border-left:2px solid var(--crimson);padding-left:10px}

/* tables */
.tbl-wrap{overflow-x:auto;margin:18px 0;border:1px solid var(--bronze);background:var(--stone)}
.tbl-wrap table{min-width:520px}
table{border-collapse:collapse;width:100%;font-size:15px}
th,td{border-bottom:1px solid rgba(95,74,50,.55);border-right:1px solid rgba(95,74,50,.35);
  padding:10px 12px;text-align:left;vertical-align:top}
th:last-child,td:last-child{border-right:0}
tr:last-child td{border-bottom:0}
th{background:var(--stone3);font-family:var(--pixel);font-weight:400;font-size:9.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gold);white-space:nowrap}
tbody tr:nth-child(even){background:#221c16}
tbody tr:hover{background:#2a231b}
table strong,table b{color:var(--gold)}
td:first-child{color:var(--ink)}

/* callouts */
.callout{border-left:3px solid var(--crimson);background:linear-gradient(90deg,rgba(141,25,34,.16),transparent 62%);
  padding:14px 18px;margin:20px 0;font-size:16px}
.callout p:last-child{margin-bottom:0}
.callout.info{border-left-color:var(--aegean);
  background:linear-gradient(90deg,rgba(163,195,226,.14),transparent 62%)}
.callout.warn{border-left-color:var(--terracotta);
  background:linear-gradient(90deg,rgba(195,132,91,.17),transparent 62%)}
.callout.note{border-left-color:var(--crimson-lt)}

/* quick answer */
.quick-answer{position:relative;background:#221b15;border:1px solid var(--bronze);
  border-left:3px solid var(--terracotta);padding:16px 20px;margin:0 0 24px;box-shadow:var(--shadow)}
.quick-answer p{margin:6px 0 0;font-size:16.5px;color:var(--ink)}
.qa-stamp{font-family:var(--pixel);font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--terracotta)}

/* toc */
.toc{position:sticky;top:96px;border:1px solid var(--bronze);background:var(--stone);padding:16px;
  border-top:2px solid var(--crimson)}
.toc .overline{display:block;margin-bottom:10px}
.toc-list{display:flex;flex-direction:column;gap:1px;margin:0;padding:0;list-style:none;background:none;border:0}
.toc-list a{font-family:var(--font);font-size:14px;color:var(--muted);padding:6px 0 6px 11px;
  border-left:2px solid transparent;line-height:1.35;border-bottom:0;opacity:1}
.toc-list a:hover{color:var(--gold);border-left-color:var(--crimson-lt);background:rgba(201,168,111,.06);
  text-decoration:none}

/* all guides */
.all-guides{margin-top:44px;padding-top:8px;border-top:1px solid rgba(201,168,111,.24)}
.all-guides .grid{margin-top:16px}

/* ad slot */
@media (hover:hover) and (pointer:fine){.ad-slot{display:block}}
@media not all and (hover:hover) and (pointer:fine){.ad-slot{display:none}}
.ad-slot{margin:30px auto;max-width:var(--maxw)}
.ad-inner{min-height:92px;border:1px dashed rgba(95,74,50,.8);background:var(--stone);overflow:hidden}

/* footer */
.foot{background:#141110;border-top:2px solid #000;padding:20px 0 34px;margin-top:34px}
.foot .meander-band{margin-bottom:22px;opacity:.4}
.foot .disclaimer{color:var(--muted);font-size:13.5px;max-width:92ch}
.foot-links{font-family:var(--pixel);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;margin:14px 0 0}
.foot-links a{color:var(--sand);margin-right:4px}
.foot-links span{color:#5c5346;margin:0 8px}
.foot .muted{font-family:var(--pixel);font-size:9px;letter-spacing:.04em;text-transform:uppercase;color:#a2937f}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(8,6,5,.94);display:flex;align-items:center;
  justify-content:center;padding:24px;cursor:zoom-out}
.lightbox img{max-width:min(1500px,96vw);max-height:92vh;width:auto;height:auto;
  border:1px solid var(--bronze);box-shadow:0 0 0 6px #0c0a08}
@media (max-width:700px){.lightbox{padding:10px}}

/* responsive */
@media (max-width:1000px){
  .article-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .toc{position:static;order:2;margin-top:32px}
  .hero-in{grid-template-columns:minmax(0,1fr);gap:30px;padding:38px 22px 40px}
  .hero-shot{order:-1}
  .hero h1{font-size:clamp(34px,8vw,56px)}
}
@media (max-width:860px){
  .topbar .bar{flex-wrap:wrap;gap:10px;padding-top:9px;padding-bottom:9px;min-height:0}
  .brand{font-size:14.5px}
  .brand img{width:32px;height:32px;flex-basis:32px}
  .nav{margin-left:0;width:100%;gap:8px;overflow-x:auto;overflow-y:visible;padding-bottom:2px}
  .nav>ul{flex-wrap:nowrap;white-space:nowrap;flex:1 1 100%}
  .nav .kids{position:absolute;top:100%;left:0}
  .nav .cta{flex:0 0 auto}
  .nav .lang ul{right:auto;left:0}
  .fact{flex:1 1 50%;border-left:0;border-top:1px solid rgba(201,168,111,.16)}
  .fact:nth-child(-n+2){border-top:0}
  .section-head h2{font-size:24px}
  .card{flex:1 1 100%}
  .foot .meander-band{opacity:.28}
}
@media (max-width:560px){
  body{font-size:17px}
  .hero .lead{font-size:17px}
  .home-prose>p:first-of-type:first-letter{font-size:2.4em}
  article h2{font-size:21px}
  .fact{flex:1 1 100%}
  .fact:nth-child(-n+2){border-top:1px solid rgba(201,168,111,.16)}
  .fact:first-child{border-top:0}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .card:hover{transform:none}
}