*, *::before, *::after { box-sizing: border-box; }

:root {
  --font-main: Verdana, Geneva, Tahoma, sans-serif;
  --font-display: Georgia, 'Times New Roman', serif;
  --font-mono: Consolas, 'Courier New', monospace;
  --color-brand: #B85C33;
  --color-cta: #E8A33D;
  --bg-page: #17110B;
  --bg-surface: #20180F;
  --line: #3A2B1C;
  --ink: #F4EDE3;
  --muted: #B7A692;
  --ink-dark: #0E0A05;
}

* { font-family: var(--font-main); }

html { overflow-x: hidden; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--ink);
  font-size: 18px;
  line-height: 1.65;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 16px;
}

h1 { font-size: clamp(40px, 5vw, 64px); }
h2 { font-size: clamp(28px, 3vw, 40px); }
h3 { font-size: 24px; }

p { margin: 0 0 16px; }

a { color: var(--color-brand); }

img, video, iframe, embed, object { max-width: 100%; height: auto; }
table { max-width: 100%; }
.table-responsive, .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }

::selection { background: var(--color-brand); color: #17110B; }

:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 3px; }

.l2 { display: block; font-style: italic; }

.marker { display: inline-block; border-bottom: 8px solid var(--color-brand); margin-bottom: -8px; }
.marker-dark { display: inline-block; border-bottom: 8px solid #17110B; margin-bottom: -8px; }

.meta { font-family: var(--font-mono); font-size: 13px; color: var(--muted); margin: 0 0 12px; }

.btn {
  display: inline-block;
  background: var(--color-cta);
  color: #17110B;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  padding: 16px 32px;
  border-radius: 0;
  border: 0;
  text-decoration: none;
  box-shadow: 6px 6px 0 #0E0A05;
  transition: transform .15s, box-shadow .15s;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 #0E0A05; color: #17110B; }

.site-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  grid-template-areas: "main header" "footer header";
  min-height: 100vh;
}

.site-main {
  grid-area: main;
  min-width: 0;
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
  padding: 0 64px;
}

@media (max-width: 1100px) {
  .site-shell { grid-template-columns: minmax(0, 1fr) 240px; }
  .site-main { padding: 0 40px; }
}

@media (max-width: 768px) {
  body { overflow-x: hidden; }
  .grid, [class*='grid'] { grid-template-columns: 1fr !important; }
}

@media (max-width: 760px) {
  .site-shell { grid-template-columns: 1fr; grid-template-areas: "header" "main" "footer"; }
  .site-main { padding: 0 20px; }
  body { font-size: 16px; }
}