@font-face { font-family:"Droid Sans"; src:url("/assets/fonts/droid-sans-400.woff2") format("woff2"); font-style:normal; font-weight:400; font-display:swap; }
@font-face { font-family:"Droid Sans"; src:url("/assets/fonts/droid-sans-700.woff2") format("woff2"); font-style:normal; font-weight:700; font-display:swap; }
@font-face { font-family:"Sniglet"; src:url("/assets/fonts/sniglet-latin.woff2") format("woff2"); font-style:normal; font-weight:400; font-display:swap; }
@font-face { font-family:"FontAwesome"; src:url("/assets/fonts/fontawesome-webfont.woff") format("woff"); font-style:normal; font-weight:normal; font-display:block; }

:root { --ink:#222; --muted:#696969; --nav:#750000; --nav-hover:#ededc2; --paper:#ebebeb; --page-bg:#01011b; --line:#202020; --footer-accent:#ededc2; }
* { box-sizing:border-box; }
html { background:var(--page-bg); color:var(--ink); font-family:"Droid Sans", Arial, Helvetica, sans-serif; font-size:15px; }
body { margin:0; line-height:1.7; }
a { color:inherit; text-decoration:none; transition:color .15s ease, background-color .15s ease, border-color .15s ease; }
a:hover, a:focus-visible { color:#750000; }
h1, h2, h3, h4, h5, h6, .nav a, .sidebar h2 { font-family:"Sniglet", "Arial Black", Gadget, sans-serif; font-weight:400; text-transform:uppercase; }

.preview-banner { position:relative; z-index:2; background:#ffe68a; color:#3f390f; padding:7px 15px; text-align:center; font-weight:700; font-size:.8rem; }
.site-header { background:#fff; }
.masthead { min-height:310px; display:flex; align-items:center; justify-content:center; padding:36px 24px 28px; background:#fff url("/assets/red_mountains.jpg") left top / auto repeat; position:relative; }
.masthead::before { content:""; position:absolute; inset:0; background:rgba(0,0,0,.70); }
.masthead a { position:relative; z-index:1; width:min(460px, 70vw); }
.logo { display:block; width:100%; height:auto; max-height:170px; object-fit:contain; margin:auto; }
.nav { background:var(--nav); }
.nav-inner { max-width:1170px; min-height:74px; margin:auto; padding:0 24px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 32px; }
.nav a { min-height:44px; display:flex; align-items:center; color:#fff; font-size:14px; letter-spacing:.08em; }
.nav a:hover, .nav a:focus-visible { color:var(--nav-hover); }

.ad-zone { overflow:hidden; }
.ad-zone--top { width:100%; min-height:250px; padding:20px max(20px, calc((100vw - 1170px) / 2)); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; background:#f7f7f7; color:#777; text-align:center; }
.ad-zone--top .ad-unit { width:100%; min-height:210px; display:block; }
.ad-zone--preview { border-bottom:1px solid #ddd; background:repeating-linear-gradient(135deg, #f6f6f6, #f6f6f6 12px, #f0f0f0 12px, #f0f0f0 24px); }
.ad-zone--preview span { font-weight:700; }
.ad-zone--preview small { font-size:.8rem; }
.ad-anchor-preview { position:fixed; z-index:30; left:50%; bottom:0; width:min(920px, calc(100% - 32px)); min-height:90px; padding:16px 56px 16px 24px; transform:translateX(-50%); display:grid; place-items:center; border:1px solid #cfcfcf; border-bottom:0; background:rgba(255,255,255,.97); color:#666; box-shadow:0 -4px 18px rgba(0,0,0,.18); text-align:center; }
.ad-anchor-preview button { position:absolute; top:8px; right:10px; width:36px; height:36px; border:1px solid #bbb; border-radius:50%; background:#fff; color:#333; font:700 22px/1 Arial, sans-serif; cursor:pointer; }
.ad-anchor-preview button:hover, .ad-anchor-preview button:focus-visible { background:#202020; color:#fff; }

.announcement-slider { position:relative; width:min(1050px, calc(100% - 40px)); height:400px; margin:0 auto 10px; overflow:hidden; background:#000015; color:#fff; }
.slides, .slide, .featured-image--slider { display:block; width:100%; height:100%; }
.slide { position:relative; }
.slide[hidden] { display:none; }
.featured-image--slider img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }

.shell { max-width:1170px; min-height:420px; margin:0 auto; padding:52px 20px 58px; display:grid; grid-template-columns:minmax(0, 3fr) minmax(245px, 1fr); gap:46px; background:var(--paper); box-shadow:5px 5px 0 #030303; }
.post-list { min-width:0; }
.card { position:relative; margin:0; padding:42px 0 40px; border-top:3px solid var(--line); background:transparent; }
.card:first-child { padding-top:38px; }
.card h2 { margin:0 0 24px; text-align:center; font-size:clamp(1.8rem, 3vw, 2.55rem); line-height:1.15; }
.card h2 a:hover { color:#750000; }
.meta { margin:0 0 9px; color:var(--muted); text-align:center; font-size:.82rem; }
.excerpt { color:#555; line-height:1.85; }
.card-summary { display:flex; align-items:flex-start; gap:14px; }
.featured-image--card { flex:0 0 100px; }
.featured-image--card img { display:block; width:100px; height:100px; object-fit:cover; }
.featured-image--detail { display:block; margin:24px 0; }
.featured-image--detail img { display:block; width:auto; max-width:100%; height:auto; }
.post-tags { position:absolute; z-index:2; top:26px; right:6px; margin:0; padding:0; list-style:none; }
.language-tag img { display:block; width:54px; height:54px; object-fit:contain; }

.sidebar section { margin:0 0 42px; padding:0; border-top:3px solid var(--line); background:transparent; }
.sidebar h2 { display:table; margin:-1px 0 10px; padding:8px 13px 9px; background:#202020; color:#fff; font-size:.78rem; letter-spacing:.04em; line-height:1.35; }
.sidebar ul { margin:0; padding:0; list-style:none; }
.sidebar li { padding:8px 0; border-bottom:1px solid #d1d1d1; line-height:1.45; }
.sidebar a:hover { color:#750000; }

.pagination { display:flex; align-items:center; min-height:44px; padding-top:0; border-top:3px solid var(--line); }
.pagination a, .pagination span { display:grid; place-items:center; width:46px; height:42px; color:#222; font-size:14px; }
.pagination span[aria-current="page"] { background:#202020; color:#fff; }
.pagination a:hover, .pagination a:focus-visible { background:#d7d7d7; color:#222; }

.content { position:relative; min-width:0; padding:38px 0 20px; border-top:3px solid var(--line); background:transparent; overflow-wrap:anywhere; }
.content h1 { margin:.2em 0 .55em; text-align:center; font-size:clamp(2rem, 4vw, 3.25rem); line-height:1.15; }
.content img { max-width:100%; height:auto; }
.content iframe, .content video, .content object, .content embed { max-width:100%; }
.content table { display:block; max-width:100%; overflow-x:auto; }
.legacy-embed, .notice { padding:16px 18px; background:#fffbe2; border-left:4px solid #d8cf46; }
.forum-label { display:inline-block; padding:4px 10px; background:#202020; color:#fff; font-size:.75rem; text-transform:uppercase; }
.forum-card .forum-label { position:absolute; top:-1px; right:0; }
.hero { padding:30px 0; border-top:3px solid var(--line); }
.hero h1 { margin:0 0 10px; font-size:clamp(2rem, 5vw, 3.6rem); }
.hero p { margin:0; }

.site-footer { margin:0; padding:60px max(24px, calc((100vw - 1170px) / 2)) 46px; background:#fff; color:#d5d5d5; text-align:center; }
.site-footer h2 { margin:0; color:var(--footer-accent); font-size:clamp(1.55rem, 3vw, 2.5rem); line-height:1.25; }
.footer-separator { width:100px; height:4px; margin:34px auto 32px; background:#eee; }
.social-links { display:flex; flex-wrap:wrap; justify-content:center; gap:15px; margin:0 0 42px; padding:0; list-style:none; }
.social-links a { display:grid; place-items:center; width:62px; height:62px; border:2px solid #ccc; border-radius:50%; color:#bbb; font-size:23px; }
.social-links a:hover, .social-links a:focus-visible, .social-links .dribbble { border-color:#e83d83; background:#e83d83; color:#fff; }
.site-footer p { margin:6px auto; max-width:900px; font-size:.82rem; }
.footer-links { display:flex; justify-content:center; flex-wrap:wrap; gap:10px 24px; margin:22px 0 14px; }
.footer-links a { color:#777; text-decoration:none; }
.footer-links a:hover, .footer-links a:focus-visible { color:#222; text-decoration:underline; }
.legal-shell { grid-template-columns:minmax(0, 1fr); }
.legal-content { max-width:900px; width:100%; margin:0 auto; }
.legal-content h1 { margin-bottom:.25em; }
.legal-content h2 { margin:1.65em 0 .45em; font-family:"Droid Sans",Arial,sans-serif; font-size:1.35rem; line-height:1.3; }
.legal-content p { line-height:1.7; }
.legal-content a { color:#840000; text-decoration:underline; }
.fa { display:inline-block; font:normal normal normal 1em/1 FontAwesome; text-rendering:auto; }
.fa-facebook::before { content:"\f09a"; }
.fa-twitter::before { content:"\f099"; }
.fa-dribbble::before { content:"\f17d"; }
.fa-youtube::before { content:"\f167"; }
.fa-instagram::before { content:"\f16d"; }
.fa-chevron-up::before { content:"\f077"; }
.back-to-top { position:fixed; z-index:25; right:8px; bottom:8px; display:grid; place-items:center; width:38px; height:38px; background:#202020; color:#fff; }
.back-to-top:hover, .back-to-top:focus-visible { background:#750000; color:#fff; }

@media (max-width:1180px) {
  .shell { width:calc(100% - 64px); grid-template-columns:minmax(0, 2.5fr) minmax(230px, 1fr); gap:34px; padding-inline:24px; }
  .masthead { min-height:285px; }
}

@media (max-width:900px) {
  .masthead { min-height:250px; background-size:auto 100%; }
  .masthead a { width:min(410px, 66vw); }
  .nav-inner { min-height:68px; gap:7px 26px; }
  .ad-zone--top { min-height:140px; padding:18px 32px; }
  .ad-zone--top .ad-unit { min-height:104px; }
  .announcement-slider { width:calc(100% - 40px); height:clamp(260px, 48vw, 400px); }
  .shell { width:calc(100% - 40px); grid-template-columns:1fr; gap:42px; padding:42px 28px 50px; box-shadow:none; }
  .sidebar { display:grid; grid-template-columns:1fr 1fr; gap:32px; }
  .sidebar section { margin-bottom:0; }
  .card h2 { font-size:clamp(1.8rem, 5vw, 2.4rem); }
}

@media (max-width:640px) {
  html { font-size:16px; }
  .preview-banner { padding:6px 12px; font-size:.72rem; line-height:1.35; }
  .masthead { min-height:195px; padding:26px 18px; }
  .masthead a { width:min(330px, 78vw); }
  .nav-inner { min-height:62px; gap:5px 20px; padding:10px 14px; }
  .nav a { font-size:.75rem; letter-spacing:.06em; }
  .ad-zone--top { min-height:118px; padding:14px 16px; }
  .ad-zone--top .ad-unit { min-height:90px; }
  .announcement-slider { width:100%; height:56vw; min-height:210px; margin-bottom:0; }
  .ad-zone--preview span { font-size:.86rem; }
  .ad-zone--preview small { font-size:.68rem; }
  .shell { width:100%; gap:38px; padding:32px 20px 42px; }
  .card { padding:32px 0; }
  .card:first-child { padding-top:30px; }
  .card h2 { margin-bottom:18px; font-size:1.7rem; overflow-wrap:anywhere; }
  .card-summary { gap:12px; }
  .featured-image--card { flex-basis:90px; }
  .featured-image--card img { width:90px; height:90px; }
  .post-tags { top:20px; right:0; }
  .language-tag img { width:46px; height:46px; }
  .meta { font-size:.74rem; }
  .excerpt { line-height:1.72; }
  .sidebar { grid-template-columns:1fr; gap:36px; }
  .content { padding-top:28px; }
  .content h1 { font-size:1.9rem; overflow-wrap:anywhere; }
  .pagination a, .pagination span { width:44px; height:42px; }
  .site-footer { padding:44px 20px 120px; }
  .site-footer h2 { font-size:1.55rem; }
  .social-links { gap:10px; margin-bottom:32px; }
  .social-links a { width:50px; height:50px; font-size:20px; }
  .ad-anchor-preview { width:calc(100% - 16px); min-height:64px; padding:10px 46px 10px 14px; font-size:.75rem; }
  .ad-anchor-preview button { top:10px; right:8px; width:44px; height:44px; font-size:21px; }
  .back-to-top { right:6px; bottom:6px; width:44px; height:44px; }
}

@media (max-width:420px) {
  .masthead { min-height:170px; }
  .masthead a { width:min(300px, 82vw); }
  .nav-inner { gap:3px 14px; padding-inline:10px; }
  .nav a { font-size:.7rem; }
  .shell { padding-inline:16px; }
  .card h2 { font-size:1.48rem; }
  .card-summary { display:block; }
  .featured-image--card { display:block; width:100px; margin:0 12px 8px 0; float:left; }
  .featured-image--card img { width:100px; height:100px; }
  .site-footer { padding-inline:16px; }
  .social-links a { width:46px; height:46px; }
}

@media (max-width:359px) {
  .masthead { min-height:150px; }
  .nav-inner { gap:2px 10px; }
  .nav a { font-size:.66rem; }
  .shell { padding-inline:13px; }
  .card h2 { font-size:1.34rem; }
  .social-links { gap:7px; }
  .social-links a { width:43px; height:43px; }
}