/* Shared brand tokens + base typography. Used by the homepage and every blog page.
   Section-specific styles still live inline in each page. */

:root{
  /* Backgrounds */
  --cream:        #f6efe3;
  --cream-2:      #efe6d5;
  --bone:         #ece2cf;
  --paper:        #f9f3e8;
  --parchment:    #fbf7ee;
  /* Accents */
  --terracotta:       #b85433;
  --terracotta-deep:  #9a4327;
  --bronze:           #8a6a3b;
  --bronze-light:     #a8895b;
  /* Surfaces & text */
  --walnut:        #2e2419;
  --walnut-soft:   #3d3024;
  --ink:           #1a1410;
  --sepia:         #6e5c46;
  /* Rules */
  --rule:       rgba(138,106,59,0.22);
  --rule-soft:  rgba(138,106,59,0.10);
  /* Type */
  --display: 'Cormorant Garamond', 'Times New Roman', serif;
  --serif:   'Fraunces', 'Georgia', serif;
  --sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*{ box-sizing: border-box; margin: 0; padding: 0; }
html{ scroll-behavior: smooth; }
body{
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--walnut);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a{ color: inherit; text-decoration: none; }
img{ display: block; max-width: 100%; }
button{ font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

.container{
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
}

.eyebrow{
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--terracotta-deep);
}
.h-display{
  font-family: var(--display);
  font-weight: 400;
  color: var(--walnut);
  line-height: 1.05;
  letter-spacing: -0.005em;
}
.h-display em{
  font-style: italic;
  color: var(--terracotta-deep);
}

/* Shared mini-nav for sub-pages (blog index, articles). */
.subnav{
  position: sticky; top: 0; z-index: 100;
  background: rgba(246,239,227,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule);
}
.subnav-inner{
  max-width: 1440px; margin: 0 auto;
  padding: 18px 48px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}
.subnav-brand{
  display: flex; align-items: center; gap: 14px;
  color: var(--walnut);
}
.subnav-brand img{ height: 40px; width: auto; }
.subnav-brand-name{
  font-family: var(--display);
  font-size: 20px;
  letter-spacing: 0.04em;
  font-weight: 500;
}
.subnav-back{
  font-family: var(--sans);
  font-size: 12px; letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sepia);
  transition: color .2s;
}
.subnav-back:hover{ color: var(--terracotta-deep); }

/* Article breadcrumb (Home › Blog › Article). */
.article-breadcrumb{
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 20px 0;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--sepia);
}
.article-breadcrumb a{
  color: var(--bronze);
  border-bottom: 1px solid transparent;
  transition: color .2s;
}
.article-breadcrumb a:hover{ color: var(--terracotta-deep); }
.article-breadcrumb .sep{ margin: 0 8px; color: var(--rule); }
.article-breadcrumb [aria-current]{ color: var(--walnut); }

/* Shared simple footer for sub-pages. */
.simple-footer{
  margin-top: 100px;
  padding: 40px 48px;
  border-top: 1px solid var(--rule);
  background: var(--cream);
  font-family: var(--sans);
  font-size: 12px;
  color: var(--sepia);
  letter-spacing: 0.04em;
  text-align: center;
}
.simple-footer a{ color: var(--terracotta-deep); }
.simple-footer a:hover{ text-decoration: underline; }

@media (max-width: 720px){
  .container{ padding: 0 20px; }
  .subnav-inner{ padding: 14px 20px; }
  .subnav-brand img{ height: 34px; }
  .subnav-brand-name{ font-size: 18px; }
}