/* ===== VARIABLES & RESET (Coffee Theme) ===== */
:root {
  /* Repurpose tokens into a coffee palette */
  --red:        #c58a54;        /* caramel */
  --red-dark:   #6f4e37;        /* brew */
  --accent:     #ffd39b;        /* sweet foam */
  --bg-light:   #f7efe9;        /* latte foam */
  --text-dark:  #3a2a20;        /* espresso ink */
  --text-light: #fff;
  --muted:      rgba(58,42,32,.7);
  --radius:     12px;
  --shadow:     0 14px 40px rgba(43,26,20,.18);
  --transition: .25s ease;
  font-size:    16px;
}

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

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at -10% -20%, rgba(197,138,84,0.08), transparent 60%),
    radial-gradient(900px 500px at 110% 120%, rgba(111,78,55,0.08), transparent 60%),
    var(--bg-light);
  color: var(--text-dark);
  font-family: 'Montserrat', sans-serif;
  line-height: 1.6;
}

/* ===== CONTAINER & FLEX HELPERS ===== */
.container { width:90%; max-width:960px; margin:0 auto; }
.flex { display:flex; }
.wrap { flex-wrap:wrap; }
.center { justify-content:center; }
.center-v { align-items:center; }
.between { justify-content:space-between; }

/* ===== HEADER ===== */
.site-header {
  background: linear-gradient(135deg, #8b6546, #301809);
  color: var(--text-light);
  box-shadow: 0 8px 24px rgba(43,26,20,.12);
}
.header-container { padding:1rem 0; }
.nav-logo { max-height:32px; }

/* remove any underlines on nav links */
.main-nav a {
  text-decoration: none !important;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.5rem .8rem;
  border-radius:var(--radius);
  transition:background var(--transition), transform .15s ease;
  color:var(--text-light);
}
.main-nav a:hover { background:rgba(255,255,255,.12); text-decoration: none !important; transform: translateY(-1px); }
.main-nav ul { list-style:none; gap:1rem; }
.main-nav ul li { display:inline-block; }
.main-nav i { font-size:1.2rem; }

/* ===== HERO ===== */
.page-hero {
  position:relative;
  background:
    radial-gradient(1100px 700px at 120% -10%, rgba(197,138,84,.18), transparent 60%),
    linear-gradient(135deg, #8b6546, #301809);
  padding:4rem 0;
  text-align:center;
  overflow:hidden;
}
.page-hero .pattern {
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(rgba(255,255,255,0.08) 1px,transparent 2px) 0 0/26px 26px,
    radial-gradient(rgba(255,255,255,0.05) 1px,transparent 2px) 12px 12px/36px 36px;
  animation: moveDots 20s linear infinite;
}
@keyframes moveDots {
  0%   { background-position:0 0,12px 12px; }
  100% { background-position:480px 0,492px 12px; }
}
.breadcrumb ul {
  list-style:none;
  display:flex;
  align-items:center;
  gap:.5rem;
  color:var(--text-light);
  font-size:.9rem;
  margin-bottom:.5rem;
}
.breadcrumb ul li a { color:var(--text-light); text-decoration:none; }
.breadcrumb ul li .sep { color:var(--text-light); }
.page-title {
  font-size:2.6rem;
  color:var(--text-light);
  margin-bottom:.5rem;
  position:relative;
  display:inline-block;
}
.page-title::after {
  content:"";
  display:block;
  width:60px; height:4px;
  background:var(--accent);
  border-radius:2px;
  margin:.5rem auto 0;
}
.hero-meta { color:rgba(255,255,255,.9); font-size:.9rem; }

/* ===== ARTICLE SECTION ===== */
.article-section { flex:1; padding:2rem 0 3rem; }
.article-container { display:flex; gap:2rem; }
.article-content { flex:2; min-width:300px; }

/* Coffee-paper article card */
.article-card {
  background:
    radial-gradient(600px 400px at 85% 15%, rgba(197,138,84,0.08), transparent 60%),
    linear-gradient(180deg, #fffdf8, #fffaf3);
  border-radius:var(--radius);
  padding:2rem;
  box-shadow:var(--shadow);
  border: 1px solid rgba(74,46,32,.10);
  animation:fadeUp .8s ease both;
}
@keyframes fadeUp {
  from { opacity:0; transform:translateY(15px); }
  to   { opacity:1; transform:translateY(0); }
}
.article-card h1,
.article-card h2,
.article-card h3 { margin-bottom:.75rem; color:var(--red-dark); }

.article-body p { margin-bottom:1rem; }
.article-body ul,
.article-body ol { padding-left:1.2rem; margin-bottom:1rem; }
.article-body li { margin-bottom:.5rem; }
.article-body img {
  max-width:100%;
  margin:1rem 0;
  border-radius:10px;
  box-shadow: 0 8px 20px rgba(43,26,20,.10);
}

/* ===== SIDEBAR (RIGHT) ===== */
.sidebar {
  flex:1;
  min-width:260px;
  display:flex;
  flex-direction:column;
  gap:1.5rem;
  align-items:center;
}

/* Banner with subtle roast stripes */
.banner-slot {
  width:300px;
  height:250px;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(197,138,84,.06) 0 12px,
      rgba(197,138,84,.10) 12px 24px
    ),
    #fffdfa;
  border:1px dashed rgba(74,46,32,.35);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}

/* ===== FOOTER ===== */
.site-footer {
  background: linear-gradient(135deg, #8b6546, #301809);
  color:var(--text-light);
  text-align:center;
  padding:1rem 0;
  font-size:.9rem;
  box-shadow: 0 -6px 18px rgba(43,26,20,.10);
}
.site-footer a { color:var(--accent); text-decoration:none; }
.site-footer a:hover { text-decoration:underline; }

/* ===== RESPONSIVE ===== */
@media(max-width:900px) {
  .article-container { flex-direction:column; }
  .sidebar {
    align-items:stretch;
    flex-direction:row;
    justify-content:center;
    flex-wrap:wrap;
  }
  .banner-slot { margin-bottom:1rem; }
}

/* ===== Reduced motion respect ===== */
@media (prefers-reduced-motion: reduce) {
  .page-hero .pattern { animation: none !important; }
}