/* Project Pyrrhus site (Killzone 2 PC port). Hand-written; the page itself is generated (tools/release/website.py).
   Layout after Project Helghast's site (the Killzone 3 PC port, same author, MIT): logo band, tab bar, gallery, news
   column with a sidebar, changelog and objectives boxes, footer columns. Colours, art and text are this project's own.
   Warm black and rust with HUD-like frames; no game logos or art (NOTICE.md). Accents: --orange (Helghast eyes and
   fire), --arc (arc-tower lightning); the installer art (tools/release/installer_art.py) uses the same tokens:
   --bg #0b0a08, --panel #17130f, --line #3d2a17, --orange #e0661a, --orange-hi #ff8a3d, --arc #8fb8d8,
   --arc-hi #c9e4f5, --text #e6e0d6, --dim #a39886, --glow #2a1606, --white #f2efe9.
   Rajdhani for headings, tabs, labels and buttons; the system UI font for body text. */
:root {
  --bg: #0b0a08; --panel: #17130f; --line: #3d2a17; --orange: #e0661a; --orange-hi: #ff8a3d;
  --arc: #8fb8d8; --arc-hi: #c9e4f5; --white: #f2efe9; --glow: #2a1606;
  --text: #e6e0d6; --dim: #a39886; --head: "Rajdhani", "Segoe UI", system-ui, sans-serif;
  --body: "Segoe UI", system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.6 var(--body);
  background-image: radial-gradient(ellipse at top, var(--glow) 0%, var(--bg) 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0 1px, transparent 1px 3px);
  background-attachment: fixed;
}
a { color: var(--orange-hi); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
h1, h2, h3, h4, .btn, .tabs a, .sticker, .divider span, .util a { font-family: var(--head); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
h1 { overflow-wrap: anywhere; font-size: clamp(2rem, 6vw, 3.6rem); line-height: 1; margin: .1em 0 .3em; color: var(--white); }
h1 span { display: block; font-size: .42em; color: var(--arc-hi); letter-spacing: .24em; margin-top: .35em; }
h2 { font-size: 1.45rem; color: var(--orange); margin: 0 0 .5em; }
h2::before { content: "// "; color: var(--arc); }
h3 { font-size: 1.05rem; color: var(--white); margin: 1.3em 0 .5em; }
code { font-size: .9em; background: #1f1812; padding: 0 .3em; }
.small { font-size: .9rem; color: var(--dim); }

/* Logo band: the banner (our art) with a sticker, a slim utility bar, the tab bar and the framed intro. */
header.box { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.logo { position: relative; padding-top: 14px; }
.banner { display: block; width: 100%; height: auto; border: 1px solid var(--line); }
.sticker { display: inline-block; background: var(--orange); color: var(--bg); padding: 1px 10px; font-size: .8rem; }
.logo .sticker { position: absolute; top: 26px; right: 12px; }
.util { list-style: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 16px; margin: 6px 0; padding: 0; font-size: .85rem; }
.util a { color: var(--dim); }
.tabs { display: flex; flex-wrap: wrap; align-items: stretch; background: var(--panel); border: 1px solid var(--line); border-bottom: 2px solid var(--orange); }
.tabs a { color: var(--text); padding: 10px 14px; font-size: .95rem; border-right: 1px solid var(--line); }
.tabs a.on, .tabs a:hover { color: var(--bg); background: var(--orange-hi); text-decoration: none; }
.tabs .cta-box { margin-left: auto; background: var(--glow); color: var(--dim); border-left: 2px solid var(--orange); border-right: 0; font-size: .75rem; line-height: 1.2; }
.tabs .cta-box b { display: block; color: var(--orange-hi); font-size: 1.05rem; }
.tabs .cta-box:hover b { color: var(--bg); }
.intro { position: relative; margin: 18px 0 8px; padding: 22px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(36,22,10,.85), rgba(23,19,15,.92)); }
.intro::before, .intro::after, .promo::before, .gallery-pod::before { content: ""; position: absolute; width: 18px; height: 18px; border: 2px solid var(--orange-hi); pointer-events: none; }
.intro::before, .promo::before, .gallery-pod::before { top: -2px; left: -2px; border-right: 0; border-bottom: 0; }
.intro::after { bottom: -2px; right: -2px; border-left: 0; border-top: 0; }
.lead { font-size: 1.15rem; max-width: 50em; }
.headline { font-size: 1.2rem; }
.headline strong { color: var(--orange-hi); text-transform: uppercase; letter-spacing: .05em; }
.note { color: var(--dim); margin: .4em 0; }
.btns { display: flex; flex-wrap: wrap; gap: 10px; }
.btn { display: inline-block; padding: 9px 18px; background: var(--orange); color: var(--bg); clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.btn.alt { background: #2a2118; color: var(--text); }
.btn:hover { text-decoration: none; filter: brightness(1.15); }

/* Screens: the newest across two columns, the others as tiles, each with a readout bar. */
.gallery-pod { position: relative; margin: 26px 0; padding: 20px; border: 1px solid var(--line); background: rgba(23,19,15,.92); }
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.tile { margin: 0; border: 1px solid var(--line); background: #000; }
.tile.lead-tile { grid-column: 1 / -1; }
.tile img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; }
.hudbar { display: flex; align-items: center; gap: 8px; padding: 4px 10px; background: var(--panel); border-bottom: 1px solid var(--line); font-family: var(--head); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; }
.hudbar .rd { color: var(--arc-hi); } .hudbar .sl { color: var(--orange); } .hudbar .lv { color: var(--white); }
.hudbar .sticker { margin-left: auto; font-size: .7rem; }
.tile figcaption { padding: 6px 10px; font-size: .92rem; color: var(--dim); }

.divider { display: flex; align-items: center; gap: 12px; margin: 30px 0 18px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 6px; background: repeating-linear-gradient(135deg, var(--orange) 0 6px, transparent 6px 12px); opacity: .55; }
.divider span { color: var(--bg); background: var(--orange-hi); padding: 1px 12px; font-size: .85rem; }

/* News column and sidebar. */
.cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; }
.news { padding: 0 0 18px; margin: 0 0 18px; border-bottom: 1px solid var(--line); }
.meta { margin: -.3em 0 .6em; color: var(--dim); font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; }
.more { margin: .5em 0 0; font-family: var(--head); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.portal { list-style: none; padding: 0; margin: 0 0 14px; }
.portal .row { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px dashed #33261a; }
.thumb { flex: none; width: 52px; text-align: center; padding: 6px 0; font-family: var(--head); font-weight: 700; font-size: .8rem; background: #1c1611; border: 1px solid; }
.rt { flex: 1; } .rt b { display: block; } .blurb { color: var(--dim); font-size: .92rem; }
.tb-ok { border-color: #3fa34d; color: #6fd37a; } .tb-part { border-color: #d9a21b; color: #f0c04a; }
.tb-prog { border-color: var(--arc); color: var(--arc-hi); } .tb-no { border-color: var(--orange); color: var(--orange-hi); }
.meters { list-style: none; padding: 0; margin: 8px 0 14px; }
.meters li { display: grid; grid-template-columns: 8em 1fr 2.5em; align-items: center; gap: 10px; padding: 3px 0; }
.ml { text-transform: uppercase; font-size: .82rem; letter-spacing: .06em; color: var(--dim); }
.bar { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; }
.bar i { height: 12px; background: #241c14; }
.m-ok .bar i.on { background: #3fa34d; } .m-part .bar i.on { background: #d9a21b; }
.m-prog .bar i.on { background: var(--arc); } .m-no .bar i.on { background: var(--orange); }
.meters b { font-family: var(--head); font-size: 1.2rem; color: var(--white); text-align: right; }
.st { display: inline-block; min-width: 6.5em; text-align: center; padding: 0 6px; font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; border: 1px solid; }
.st-ok { border-color: #3fa34d; color: #6fd37a; } .st-part { border-color: #d9a21b; color: #f0c04a; }
.st-prog { border-color: var(--arc); color: var(--arc-hi); } .st-no { border-color: var(--orange); color: var(--orange-hi); }
.rlist { list-style: none; padding: 0; margin: .4em 0; }
.rlist li { padding: 4px 0 4px 0; border-bottom: 1px dashed #33261a; }
.rlist .sec { display: inline-block; min-width: 5.5em; margin-right: 8px; font-family: var(--head); font-weight: 700; text-transform: uppercase; font-size: .78rem; color: var(--arc-hi); }
.notes2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.promo { position: relative; display: block; margin: 0 0 18px; padding: 16px; border: 1px solid var(--line); background: rgba(23,19,15,.92); }
.promo h2 { font-size: 1.15rem; }
.term { background: #090806; font-size: .92rem; }
.clog { list-style: none; padding: 0; margin: 0; }
.clog li { display: flex; gap: 10px; padding: 4px 0; border-bottom: 1px dotted #33261a; }
.clog time { flex: none; color: var(--arc-hi); font-family: var(--head); font-weight: 700; }
.clog b { color: var(--orange-hi); }
.todo { list-style: none; padding: 0; margin: 0; }
.todo li { display: flex; align-items: baseline; gap: 8px; padding: 4px 0; }
.todo .box { flex: none; width: 12px; height: 12px; border: 2px solid var(--orange); }
.todo .o-prog .box, .todo .o-part .box { background: linear-gradient(135deg, var(--orange) 50%, transparent 50%); }
.todo em { color: var(--dim); font-style: normal; font-size: .88rem; }
.promo.pic { padding: 0; overflow: hidden; }
.promo.pic img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; opacity: .8; }
.promo.pic .pt, .promo.pic .pb { position: absolute; left: 12px; font-family: var(--head); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.promo.pic .pt { top: 10px; color: var(--white); font-size: 1.2rem; text-shadow: 0 1px 4px #000; }
.promo.pic .pb { bottom: 10px; background: var(--orange); color: var(--bg); padding: 1px 10px; }
.glance { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.glance b { font-family: var(--head); font-size: 1.1rem; }
.dl { margin: 0 0 12px; padding: 12px; border-left: 3px solid var(--orange); background: var(--glow); }
.dl .ver { margin: 0; font-family: var(--head); font-weight: 700; font-size: 1.6rem; color: var(--white); text-transform: uppercase; }
.dl .ver a { color: var(--orange-hi); }
.dl .ver span { font-size: .9rem; color: var(--arc-hi); letter-spacing: .08em; }
.links { padding-left: 1.1em; margin: 0; }

details { margin: 8px 0; border: 1px solid var(--line); background: #120f0b; }
summary { cursor: pointer; padding: 8px 12px; font-family: var(--head); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
summary:hover { color: var(--orange-hi); }
.tw { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .93rem; }
th, td { text-align: left; vertical-align: top; padding: 6px 10px; border-top: 1px solid #2e2216; }
th { color: var(--dim); text-transform: uppercase; font-size: .78rem; letter-spacing: .08em; }
td:first-child { min-width: 9em; }
.side table { font-size: .86rem; } .side th, .side td { padding: 4px 6px; } .side td:first-child { min-width: 0; }

footer { border-top: 2px solid var(--orange); margin-top: 40px; padding: 22px 0 30px; background: #070605; }
.fcols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.fcols h4 { margin: 0 0 6px; color: var(--orange); font-size: .95rem; }
.fcols a { display: block; color: var(--text); font-size: .92rem; }
.legal { margin-top: 18px; color: var(--dim); font-size: .85rem; }
.marks { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; }
.marks li { border: 1px solid var(--line); padding: 2px 8px; font-size: .75rem; text-transform: uppercase; }
.marks b { color: var(--white); margin-right: 4px; }
.credit { color: var(--dim); }

@media (max-width: 900px) {
  .cols, .notes2 { grid-template-columns: 1fr; }
  .fcols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  body { font-size: 15px; }
  .tabs a { padding: 8px 10px; font-size: .85rem; }
  .tabs .cta-box { margin-left: 0; }
  .intro, .gallery-pod, .promo { padding: 14px 12px; }
  table { font-size: .86rem; }
  th, td { padding: 5px 6px; }
  .meters li { grid-template-columns: 6.5em 1fr 2em; }
}