* {
  box-sizing: border-box;
}

:root {
  /* New brand tokens (Primaries, Greens, Neutrals) */
  /* Primaries */
  --golden-grain: #D8B65A; /* Golden Grain */
  --soft-amber:  #C89C5C; /* Soft Amber (hover) */
  --earth-umber: #7A5A30; /* Earth Umber */

  /* Greens */
  --heritage-olive: #6C6B3D; /* Heritage Olive (strong) */
  --soft-sage:    #A8AE88; /* Soft Sage (borders/highlights) */
  --deep-moss:    #57540b; /* Deep Moss (text) - updated per user */

  /* Neutrals */
  --studio-white:     #FFFFFF; /* Studio White */
  --warm-grain-light: #F0EDDB; /* Warm Grain Light (soft bg) */
  --stone-beige:      #fffdef; /* Stone Beige (soft bg) - updated */

  /* Semantic aliases kept for backward compatibility with existing rules */
  --brand-1: var(--warm-grain-light);
  --brand-2: var(--stone-beige);
  --brand-3: var(--earth-umber);
  --brand-4: var(--golden-grain);
  --brand-5: var(--soft-amber);
  --brand-6: var(--golden-grain);
  --brand-white: var(--studio-white);
  --brand-cream: var(--warm-grain-light);
  --brand-pale: var(--stone-beige);

  /* Semantic aliases used across the stylesheet (new meanings)
     - text and backgrounds intentionally map to the new tokens */
  --brand-ink: var(--deep-moss);         /* main text color */
  --brand-bg: var(--warm-grain-light);   /* page background */
  --brand-surface: var(--stone-beige);  /* surface panels */
  --brand-muted: var(--warm-grain-light);
  --brand-strong: var(--golden-grain);  /* primary CTA color */
  --brand-on-strong: var(--deep-moss);  /* text on primary buttons */
  --brand-accent: var(--soft-amber);    /* CTA hover / accent */
  --brand-muted-2: var(--heritage-olive);
  --brand-border: var(--soft-sage);
  --brand-subtle: var(--heritage-olive);
  --brand-card-bg: var(--stone-beige);
  --grain-amber: #827b00; /* added to brand kit */
  --para-color: var(--grain-amber); /* paragraph text color now references brand token */
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--brand-ink);
  background: var(--brand-bg);
}

/* Paragraph text color override per user request */
p {
  color: var(--para-color);
}

a {
  text-decoration: none;
  color: inherit;
}

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.70rem 2rem;
  background: var(--brand-surface);
  position: sticky;
  top: 0;
  z-index: 10;
}

.logo a {
  font-weight: 700;
  font-size: large;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--heritage-olive);
  font-family: Ovo, serif;
}

.nav a {
  margin-left: 1.5rem;
  font-size: 0.95rem;
  transition: color 0.2s ease;
  position: relative;
  text-decoration: none;
}

.nav a:hover {
  color: var(--brand-strong); /* Golden highlight on hover */
}

.nav a.active {
  color: var(--brand-strong); /* Active page color */
  font-weight: 600;
}

/* Optional: Add a small active dot or underline if desired, for now color is sufficient as per "color change" request */

.hero {
  padding: 5rem 2rem 3rem;
  text-align: left;
}

.hero-text {
  max-width: 720px;
  margin: 0 auto;
}

.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
}

.hero p {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.hero-actions .button {
  margin-right: 0.75rem;
}

.page-hero {
  padding: 4rem 2rem 2rem;
}

main {
  max-width: 1000px;
  margin: 0 auto;
}

.section {
  padding: 2rem;
}

.grid-two {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.highlight {
  text-align: center;
  padding: 3rem 2rem;
  background: var(--soft-sage);
}

.bullet-list {
  padding-left: 1.2rem;
}

.bullet-list li {
  margin-bottom: 0.35rem;
}

.button {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  border: 1px solid var(--brand-strong);
  background: var(--brand-strong);
  color: var(--brand-on-strong);
  font-size: 0.95rem;
}

.button.secondary {
  background: transparent;
  background-color: var(--heritage-olive);
  color:#F0EDDB;
  border: none;
}

.site-footer {
  text-align: center;
  font-size: 0.8rem;
  padding: 1.5rem;
  color: var(--brand-muted-2);
}

.text-link {
  font-weight: 500;
  border-bottom: 1px solid var(--brand-accent);
  padding-bottom: 0.1rem;
}

.button:hover {
  background: var(--brand-accent);
  border-color: var(--brand-accent);
  color: var(--brand-on-strong);
}

.button.secondary:hover {
  background: var(--soft-sage);
  color: #7A5A30;
  border: none;
  /*border-color: var(--brand-accent); */
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  position: relative; /* Ensure positioning context for calculations */
}

.card {
  background: var(--brand-card-bg); /* Return to subtle beige */
  color: var(--brand-ink);
  border-radius: 0.75rem; /* Slightly tighter radius */
  padding: 1rem 1.25rem; /* Reduced size */
  border: 1px solid var(--brand-border);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px; /* More compact */
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  border-color: var(--brand-strong); /* Elegant golden border on hover */
  background-color: var(--studio-white); /* Lighten up on hover */
}

.card.active-card {
  border-color: var(--brand-strong);
  background-color: var(--studio-white);
  color: var(--brand-strong);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

.card.active-card:hover {
    background-color: var(--studio-white);
    border-color: var(--brand-strong);
}

.card.active-card h2 {
  color: var(--brand-strong);
}

.card h2 {
  margin-top: 0;
  margin-bottom: 0;
  transition: color 0.3s ease;
  font-size: 1.1rem; /* Subtle, elegant font size */
  color: var(--brand-ink);
  font-weight: 500;
}

/* Hide content inside the card initially */
.card .card-content {
  display: none;
}

/* Specific selector to override panel text color */
.details-panel .panel-content .card-meta {
  font-size: 0.9rem; /* Substantially smaller */
  color: var(--soft-amber); /* Golden Grain */
  margin-top: 0.75rem;
  font-weight: 500;
}

/* Details Panel (The "Dialogue Box") */
.details-panel {
  grid-column: 1 / -1; /* Spans full width of the grid */
  background: var(--studio-white); /* Match active card */
  border: 1px solid var(--brand-border);
  border-radius: 1rem;
  padding: 1.5rem 2rem; /* Reduced padding for a tighter fit */
  margin-bottom: 1.5rem; /* Reduced bottom spacing */
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.08); /* Slightly lighter shadow */
  position: relative;
  margin-top: 12px; /* Tighter gap so triangle touches */
  
  /* Animation for initial open */
  animation: expandPanel 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: top center;
  
  scroll-margin-top: 120px; /* Ensure header doesn't cover it when scrolling */
}

@keyframes expandPanel {
  from {
    opacity: 0;
    transform: scaleY(0.95) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: scaleY(1) translateY(0);
  }
}

/* Typography inside the panel */
.details-panel h2 {
  display: none; /* Hide heading just in case logic fails, but JS handles it */
}

.details-panel .panel-content p {
  line-height: 1.6; /* Slightly tighter line height */
  font-size: 1rem; /* Standard readable size */
  max-width: 90%; /* Allow text to use more width */
  color: var(--brand-ink);
  margin-top: 0;
  margin-bottom: 0.5rem; /* Reduced margin between paragraphs */
}

.details-panel .panel-content p:last-child {
  margin-bottom: 0;
}

/* The Triangle Indicator - Restored and Refined */
.details-panel::after,
.details-panel::before {
  content: "";
  display: block; /* Ensure they are visible */
  position: absolute;
  top: 0;
  left: var(--arrow-left, 50%); /* Dynamic position via JS */
  transform: translateX(-50%) translateY(-100%);
  width: 0;
  height: 0;
  border-style: solid;
  pointer-events: none;
  transition: left 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* The visible arrow body (matches panel background) */
.details-panel::after {
  border-width: 10px;
  border-color: transparent transparent var(--studio-white) transparent;
}

/* The arrow border (matches panel border) */
.details-panel::before {
  border-width: 11px;
  border-color: transparent transparent var(--brand-border) transparent;
  margin-top: -1px; /* Slight adjustment for border thickness */
}

.details-panel .close-btn {
  position: absolute;
  top: 0.75rem; /* Tighter position */
  right: 0.75rem;
  background: transparent;
  border: 1px solid transparent;
  color: var(--brand-subtle);
  width: 28px; /* Smaller button */
  height: 28px;
  border-radius: 50%;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.details-panel .close-btn:hover {
  color: var(--brand-strong);
  background-color: rgba(0,0,0,0.03);
  border-color: var(--brand-border);
}

/* Fade in animation for content switching */
.panel-inner-fade {
  animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

.post-item {
  margin-bottom: 1.5rem;
}

.post-item h2 {
  margin-bottom: 0.3rem;
}

.post-meta {
  font-size: 0.85rem;
  color: var(--brand-subtle);
}

.post {
  padding: 2rem;
}

.post-header h1 {
  margin-bottom: 0.4rem;
}

.post-body p {
  line-height: 1.7;
  margin-bottom: 1rem;
}

@media (max-width: 640px) {
  .site-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .nav {
    margin-top: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .hero {
    padding-top: 3rem;
  }

  .hero h1 {
    font-size: 2rem;
  }
}