/* ---------------------------------------------------------
   Token Value Theme
   - Brand: forest + amber
   - Layout: responsive grid, editorial cards, bold typography
---------------------------------------------------------- */

* { margin: 0; padding: 0; box-sizing: border-box; }
img { display: block; max-width: 100%; height: auto; }

:root{
  --forest: #0F2B21;
  --forest-2: #183C2F;
  --amber: #F3B23A;
  --amber-2: #FFD57D;
  --ink: #10151A;
  --muted: #5E6B74;
  --bg: #F7F3EC;
  --card: #FFFFFF;
  --border: rgba(16, 21, 26, 0.12);
  --shadow: 0 18px 40px rgba(12, 22, 18, 0.10);
  --radius: 18px;
  --maxw: 1180px;
  --pad: 20px;
}

body{
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  color: var(--ink);
  background:
    radial-gradient(1100px 520px at 8% -12%, rgba(243,178,58,0.22), transparent 55%),
    radial-gradient(900px 420px at 95% 0%, rgba(15,43,33,0.18), transparent 60%),
    repeating-linear-gradient(45deg, rgba(16,21,26,0.03), rgba(16,21,26,0.03) 1px, transparent 1px, transparent 8px),
    var(--bg);
}

h1, h2, h3, h4{
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: -0.02em;
}

h1{ font-size: clamp(30px, 2.8vw, 46px); line-height: 1.1; }
h2{ font-size: 1.6rem; margin-top: 1rem; }
h3{ font-size: 1.15rem; margin-bottom: 0.65rem; }

p{ margin: 0.75rem 0; }
.muted{ color: var(--muted); }

.prose h1, .prose h2, .prose h3{ margin-top: 1.2rem; }
.prose ul{ padding-left: 1.3rem; margin: 0.8rem 0; }
.prose li{ margin: 0.4rem 0; }

/* Links */
a{ color: var(--forest-2); text-decoration: none; }
a:hover{ text-decoration: underline; }

/* ---------------------------------------------------------
   Topbar / Nav
---------------------------------------------------------- */
.topbar{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(247,243,236,0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.topbar-inner{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 10px var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}

.brand img{ width: 44px; height: 44px; }

.brand-name{
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--forest);
  font-size: 1.05rem;
}

.nav{
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav-link{
  font-weight: 600;
  color: var(--forest);
  padding: 10px 12px;
  border-radius: 12px;
}

.nav-link:hover{
  background: rgba(243,178,58,0.18);
  text-decoration: none;
}

.mobile-menu-open{
  display: none;
  font-size: 22px;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--forest);
}

.mobile-menu-open:hover{
  background: rgba(243,178,58,0.18);
  text-decoration: none;
}

/* Mobile drawer */
.mobile-drawer{
  position: fixed;
  inset: 0;
  background: rgba(9, 12, 10, 0.45);
  backdrop-filter: blur(2px);
  display: none;
  z-index: 2000;
}

#menu:target{ display: block; }

.mobile-drawer-inner{
  width: min(360px, 92vw);
  height: 100%;
  background: #fff;
  padding: 16px;
  border-right: 1px solid var(--border);
}

.mobile-drawer-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}

.mobile-drawer-title{
  font-weight: 700;
  color: var(--forest);
}

.mobile-menu-close{
  font-size: 18px;
  padding: 8px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--forest);
}

.mobile-link{
  display: block;
  padding: 12px 10px;
  border-radius: 12px;
  font-weight: 600;
  color: var(--forest);
  text-decoration: none;
}

.mobile-link:hover{
  background: rgba(243,178,58,0.18);
  text-decoration: none;
}

/* ---------------------------------------------------------
   Layout
---------------------------------------------------------- */
.page{ padding: 18px var(--pad) 32px; }

.layout{
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 18px;
  align-items: start;
}

.content{ display: grid; gap: 16px; }
.sidebar{ display: grid; gap: 16px; }

.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}

.media-card{ padding: 0; overflow: hidden; }
.media-card picture img{ width: 100%; height: auto; }

.article-card{ padding: 22px; }

.linklist{
  list-style: none;
  padding-left: 0;
  display: grid;
  gap: 8px;
}

.linklist a{
  display: block;
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 600;
  color: var(--forest);
  text-decoration: none;
  background: rgba(243,178,58,0.16);
  border: 1px solid rgba(243,178,58,0.28);
}

.linklist a:hover{
  background: rgba(243,178,58,0.24);
  text-decoration: none;
}

.sidebar-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.tiny-link{ font-size: 0.9rem; color: var(--forest-2); }

/* Buttons */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
}

.btn-primary{
  background: var(--forest);
  color: #fff;
  border-color: rgba(15,43,33,0.22);
  box-shadow: 0 12px 26px rgba(15,43,33,0.22);
}

.btn-primary:hover{
  background: var(--forest-2);
  text-decoration: none;
}

.btn-small{ padding: 8px 12px; font-size: 0.95rem; }

/* ---------------------------------------------------------
   Footer
---------------------------------------------------------- */
.footer{
  border-top: 1px solid var(--border);
  padding: 22px var(--pad) 34px;
}

.footer-inner{
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-left{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
}

.sep{ color: var(--muted); }

.footer-right{ color: var(--muted); }

/* ---------------------------------------------------------
   Motion
---------------------------------------------------------- */
.hidden{
  opacity: 0;
  transform: translateY(18px) scale(0.98);
}

.visible{
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: transform 600ms ease, opacity 600ms ease;
}

/* ---------------------------------------------------------
   Responsive
---------------------------------------------------------- */
@media (max-width: 980px){
  .layout{ grid-template-columns: 1fr; }
  .sidebar{ order: 2; }
}

@media (max-width: 720px){
  .nav{ display: none; }
  .mobile-menu-open{ display: inline-flex; }
  .article-card{ padding: 18px; }
}