﻿/*$colorPrimary: #a8d0d7; 
$colorSecondary: #4ca1af;
$colorAccent: #2d3361;*/
/*$colorPrimary: #00404b;
$colorSecondary: #d8e2e9;
$colorAccent: #2d3361;*/
/*--------------------------------------------*/
/*--------------------------------------------*/
/*$colorAccent: #BA1200; //Engineering Orange*/
/*--------------------------------------------*/
:root {
  --bg: #0b0f14;
  --card: #131a22;
  --text: #e7eef7;
  --muted: #9bb3c7;
  --accent: #51a3ff; }

html, body {
  margin: 0;
  padding: 0;
  background: #EBE9E9;
  color: #ffffff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, 'Helvetica Neue', Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
  line-height: 1.6; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px; }

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px; }

.badge {
  font-size: 12px;
  color: #D3664A;
  background: linear-gradient(90deg, #336484, #83A4BB);
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap; }

h1 {
  font-size: clamp(28px, 3.5vw, 42px);
  margin: 0; }

/* Carousel */
.carousel-wrapper {
  margin-bottom: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06); }

.tankfall-carousel {
  position: relative; }

.tankfall-carousel .slide {
  position: relative;
  aspect-ratio: 16 / 9;
  background: radial-gradient(1200px 600px at 20% 20%, #1a2230, #0f141b);
  display: grid;
  place-items: center;
  overflow: hidden; }

.tankfall-carousel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; }

.slick-prev:before, .slick-next:before {
  color: white; }

.slick-dots li button:before {
  color: white;
  opacity: .5; }

.slick-dots li.slick-active button:before {
  color: #ffffff;
  opacity: 1; }

/* Content */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px; }

@media (min-width: 900px) {
  .grid {
    grid-template-columns: 1.2fr .8fr;
    gap: 28px; } }

h2 {
  margin: 14px 0 8px;
  font-size: 22px;
  color: #ffffff; }

p {
  color: #ffffff;
  margin: 0 0 12px; }

ul {
  color: #ffffff;
  margin: 0 0 12px 1.1rem; }

.pillbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px; }

.pill {
  /*background: rgba(255,255,255,.06);*/
  background-color: #D3664A;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  white-space: nowrap; }

.created-by {
  margin-top: 20px; }
