/* The content pages' one stylesheet (docs/SEO-PLAN.md §5.3; the design the owner approved on
   2026-10-03 from the Six Meridians mockup). The game's own palette and faces: Carbon, Graphite,
   Bone, Ash, Oxide (T and the accent) and Ion (CT), never Oxide and Ion in one element; Bebas
   Neue for display, Barlow for text, JetBrains Mono for labels. The fonts are copies of
   src/fonts made by scripts/sitepages.mjs. */
@font-face{font-family:'Bebas Neue';font-weight:400;font-display:swap;src:url('/site/fonts/bebas-neue-400.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-weight:100 800;font-display:swap;src:url('/site/fonts/jetbrains-mono.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-weight:400;font-display:swap;src:url('/site/fonts/barlow-400.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-weight:600;font-display:swap;src:url('/site/fonts/barlow-600.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-weight:700;font-display:swap;src:url('/site/fonts/barlow-700.woff2') format('woff2')}

:root{ --carbon:#0E0F11; --graphite:#1C1E21; --track:#2C2E32; --bone:#E9E4DA; --bone-2:rgba(233,228,218,.74);
       --ash:#7C7F84; --oxide:#FF4A1C; --ion:#38B6FF; --rule:rgba(124,127,132,.28);
       --display:'Bebas Neue',Impact,'Arial Narrow',sans-serif; --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
       --sans:'Barlow','Helvetica Neue',Arial,sans-serif; --cut:10px; color-scheme:dark }
*{ box-sizing:border-box }
body{ margin:0; background:var(--carbon); color:var(--bone); font:400 17px/1.65 var(--sans) }
a{ color:var(--bone); text-underline-offset:3px; text-decoration-color:var(--oxide) }
a:focus-visible,.btn:focus-visible{ outline:2px solid var(--bone); outline-offset:3px }
.wrap{ max-width:1120px; margin-inline:auto; padding-inline:24px }
h1,h2,h3{ margin:0; font-weight:400; text-wrap:balance }
p{ margin:0 }
.k{ font:600 12px/1.2 var(--mono); letter-spacing:2px; text-transform:uppercase; color:var(--ash) }
.t{ color:var(--oxide) } .ct{ color:var(--ion) }

/* the bar */
.bar{ position:sticky; top:0; z-index:5; background:rgba(14,15,17,.94); border-bottom:1px solid var(--rule) }
.bar .wrap{ display:flex; align-items:center; gap:28px; height:64px }
.brand{ display:flex; align-items:center; gap:10px; font:400 28px/1 var(--display); letter-spacing:1px; color:var(--bone); text-decoration:none; padding-top:3px; flex:none }
.brand svg{ width:46px; height:14px; color:var(--oxide); margin-top:-3px }
.nav{ display:flex; gap:22px; margin-inline-start:12px; overflow-x:auto; scrollbar-width:none }
.nav a{ font:400 20px/1 var(--display); letter-spacing:1.5px; color:var(--ash); text-decoration:none; padding-top:3px; white-space:nowrap }
.nav a:hover,.nav a[aria-current]{ color:var(--bone) }
.nav a[aria-current]{ box-shadow:inset 0 -2px 0 var(--oxide); padding-bottom:6px }
.btn{ display:inline-flex; align-items:center; justify-content:center; font:400 22px/1 var(--display); letter-spacing:2px; padding:13px 26px 10px;
      background:var(--oxide); color:var(--carbon); text-decoration:none; white-space:nowrap;
      clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%) }
.btn:focus-visible{ outline-offset:-4px; outline-color:var(--carbon) }
.bar .btn{ margin-inline-start:auto; font-size:19px; padding:10px 18px 8px }
.ghost{ display:inline-flex; font:600 13px/1 var(--mono); letter-spacing:1.5px; text-transform:uppercase; color:var(--bone); padding:14px 4px; text-decoration:none; border-bottom:1px solid var(--rule) }

.crumbs{ font:500 13px/1 var(--mono); letter-spacing:1px; color:var(--ash); padding-block:22px 0 }
.crumbs a{ color:var(--ash); text-decoration:none } .crumbs a:hover{ color:var(--bone) }
.crumbs span{ margin-inline:6px }

/* the hero: a render of the game, the text on a Carbon shade */
.hero{ position:relative; margin-top:18px; min-height:520px; background:#000 right center/cover no-repeat; display:grid; align-items:end; overflow:hidden }
.hero::before{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(14,15,17,.94) 0%,rgba(14,15,17,.8) 36%,rgba(14,15,17,0) 68%),linear-gradient(0deg,rgba(14,15,17,.9),rgba(14,15,17,0) 40%) }
.hero .in{ position:relative; padding:56px 48px 40px; display:grid; gap:18px; max-width:660px }
.hero h1{ font:400 clamp(64px,10vw,124px)/.84 var(--display); letter-spacing:2px }
.hero .lede{ font-size:19px; color:var(--bone-2); max-width:34em }
.hero.plain{ min-height:0; background:none }
.hero.plain::before{ display:none }
.hero.plain .in{ padding:40px 0 8px; max-width:780px }
.facts{ display:flex; flex-wrap:wrap; gap:1px; background:var(--rule); border:1px solid var(--rule); width:fit-content; margin-top:6px }
.facts div{ background:rgba(14,15,17,.86); padding:10px 16px 8px; display:grid; gap:2px }
.facts b{ font:400 30px/1 var(--display); letter-spacing:.5px; font-variant-numeric:tabular-nums; font-weight:400 }
.facts span{ font:600 10.5px/1.2 var(--mono); letter-spacing:1.5px; text-transform:uppercase; color:var(--ash) }
.cta{ display:flex; flex-wrap:wrap; gap:18px 26px; align-items:center; margin-top:4px }

section{ padding-block:72px 0 }
.sec-h{ display:grid; gap:10px; margin-bottom:26px; max-width:740px }
.sec-h h2{ font:400 clamp(40px,5vw,56px)/.95 var(--display); letter-spacing:1px }
.sec-h p{ color:var(--bone-2) }
.prose{ display:grid; gap:16px; color:var(--bone-2); max-width:740px }
.prose strong{ color:var(--bone); font-weight:600 }
.prose h3{ font:400 30px/1 var(--display); letter-spacing:1px; color:var(--bone); margin-top:14px }
.prose ul,.prose ol{ margin:0; padding-inline-start:22px; display:grid; gap:8px }
.plan{ background:var(--graphite); padding:24px 28px 18px; max-width:960px; margin:32px 0 0 }
.plan svg{ width:100%; height:auto; display:block }
.plan figcaption{ font:500 12px/1.5 var(--mono); color:var(--ash); margin-top:10px; letter-spacing:.5px }

table{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums }
th{ text-align:left; font:600 11px/1.3 var(--mono); letter-spacing:1.5px; text-transform:uppercase; color:var(--ash); padding:0 14px 10px 0; border-bottom:1px solid var(--rule) }
td{ padding:13px 14px 13px 0; border-bottom:1px solid var(--rule); vertical-align:top }
td.n{ font:400 22px/1 var(--display); letter-spacing:.5px; white-space:nowrap }
.tbl{ overflow-x:auto }
.note{ font:500 12.5px/1.5 var(--mono); color:var(--ash); margin-top:12px; max-width:860px }

.site{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:36px; align-items:center; margin-top:28px }
.site.flip{ grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) }
.site.flip .shot{ order:2 }
.shot{ position:relative; background:#000; margin:0 }
.shot img{ width:100%; height:auto; display:block }
.shot.gun{background:var(--graphite);margin-top:18px}
.shot .tag{ position:absolute; left:14px; top:14px; font:400 34px/1 var(--display); background:var(--bone); color:var(--carbon); padding:6px 12px 2px }
.site h3{ font:400 40px/1 var(--display); letter-spacing:1px }
.site h3 small{ display:block; font:600 12px/1.6 var(--mono); letter-spacing:2px; color:var(--ash) }
.site ul{ margin:14px 0 0; padding:0; list-style:none; display:grid; gap:10px; color:var(--bone-2) }
.site li{ padding-left:18px; position:relative }
.site li::before{ content:""; position:absolute; left:0; top:.7em; width:8px; height:2px; background:var(--oxide) }

.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px }
.card{ background:var(--graphite); padding:20px 20px 18px; text-decoration:none; display:grid; gap:6px; align-content:start;
       clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%) }
a.card:hover{ background:var(--track) }
.card b{ font:400 32px/1 var(--display); letter-spacing:1px; font-weight:400 }
.card span{ color:var(--bone-2); font-size:15px }
.card i{ font:600 11px/1.3 var(--mono); font-style:normal; letter-spacing:1.5px; color:var(--ash); text-transform:uppercase }
.card img{ width:100%; height:auto; display:block; margin-bottom:8px; background:#000 }

.qa{ display:grid; gap:0; border-top:1px solid var(--rule); max-width:860px }
.qa div{ padding:20px 0; border-bottom:1px solid var(--rule); display:grid; gap:8px }
.qa h3{ font:600 19px/1.35 var(--sans); color:var(--bone) }
.qa p{ color:var(--bone-2) }

.log{ display:grid; gap:0; border-top:1px solid var(--rule); max-width:860px }
.log article{ display:grid; grid-template-columns:130px 1fr; gap:4px 24px; padding:18px 0; border-bottom:1px solid var(--rule) }
.log time{ font:600 13px/1.6 var(--mono); color:var(--ash); letter-spacing:1px }
.log h3{ font:600 18px/1.4 var(--sans) }
.log p{ color:var(--bone-2); grid-column:2 }

.tiers{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px }
.tier{ background:var(--graphite); padding:14px 12px 12px; display:grid; justify-items:center; gap:6px; text-align:center }
.tier b{ font:400 22px/1 var(--display); letter-spacing:1px; font-weight:400 }
.tier span{ font:600 11px/1 var(--mono); letter-spacing:1px; color:var(--ash) }

.keys{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:8px 24px; max-width:900px }
.keys div{ display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--rule) }
kbd{ font:600 13px/1 var(--mono); background:var(--graphite); border:1px solid var(--rule); padding:5px 8px 4px; color:var(--bone); white-space:nowrap }

.band{ margin-top:80px; background:var(--graphite) }
.band .wrap{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; padding-block:40px }
.band h2{ font:400 44px/1 var(--display); letter-spacing:1px }
.band p{ color:var(--bone-2) }

footer{ padding-block:40px 60px; border-top:1px solid var(--rule) }
footer .wrap{ display:grid; gap:18px }
footer nav{ display:flex; flex-wrap:wrap; gap:10px 22px; font:600 12px/1 var(--mono); letter-spacing:1.5px; text-transform:uppercase }
footer nav a{ color:var(--ash); text-decoration:none } footer nav a:hover{ color:var(--bone) }
footer p{ font-size:14px; color:var(--ash) }

@media (max-width:860px){
  .site,.site.flip{ grid-template-columns:1fr }
  .site.flip .shot{ order:0 }
  .nav{ display:none }
  .hero{ min-height:0; background-size:auto 300px; background-position:68% top; background-color:var(--carbon) }
  .hero .in{ padding:250px 0 8px }
  .hero::before{ background:linear-gradient(180deg,rgba(14,15,17,0) 0,rgba(14,15,17,0) 170px,var(--carbon) 300px) }
  .hero.plain .in{ padding:28px 0 8px }
  .facts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100% }
  .log article{ grid-template-columns:1fr }
  .log p{ grid-column:1 }
}