/* Public website. One section per block below. Colours/fonts: see tokens.css */
/* ===== Header (menu bar) ===== */
.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 5%;
  background:var(--site-header-background);
  color:var(--site-header-color);
  position:sticky;
  top:0;
  z-index:5;
  flex-wrap:wrap;
}
.site-header__brand{
  font-family:var(--site-header-brand-font-family);
  font-size:var(--site-header-brand-font-size);
}
.site-header__menu{
  display:flex;
  gap:22px;
  font-size:var(--site-header-menu-font-size);
}
.site-header__link{
  text-decoration:none;
  opacity:.9;
}
.site-header__cta{
  background:var(--site-header-cta-background);
  color:var(--site-header-cta-color);
  border:var(--site-header-cta-border);
  padding:12px 22px;
  border-radius:6px;
  font-weight:600;
  text-decoration:none;
  display:inline-block;
}

/* ===== Hero (top banner) ===== */
.hero{
  position:relative;
  isolation:isolate;
  background:var(--hero-background);
  color:var(--hero-color);
  padding:70px 5%;
  min-height:clamp(540px,56vw,700px);
  display:grid;
  grid-template-columns:1fr;
  align-items:center;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:var(--hero-before-background);
}
.hero__content{
  max-width:620px;
}
.hero__label{
  letter-spacing:.14em;
  font-size:var(--hero-label-font-size);
}
.hero__title{
  font-family:var(--hero-title-font-family);
  font-size:var(--hero-title-font-size);
  line-height:1.08;
  margin:14px 0 18px;
}
.hero__divider{
  width:60px;
  border:var(--hero-divider-border);
  border-top:var(--hero-divider-border-top);
  margin:0 0 20px;
}
.hero__text{
  max-width:460px;
  line-height:1.6;
  opacity:.92;
}
.hero__actions{
  max-width:460px;
  line-height:1.6;
  opacity:.92;
  margin-top:26px;
}
.hero__button{
  background:var(--hero-button-background);
  color:var(--hero-button-color);
  border:var(--hero-button-border);
  padding:12px 22px;
  border-radius:6px;
  font-weight:600;
  text-decoration:none;
  display:inline-block;
}

/* ===== Icon strip (under hero) ===== */
.strip{
  background:var(--strip-background);
  color:var(--strip-color);
  display:grid;
  grid-template-columns:repeat(5,1fr);
  padding:26px 5%;
  text-align:center;
  gap:10px;
  border-top:var(--strip-border-top);
}
.strip__item{
  padding:6px;
  border-right:var(--strip-item-border-right);
}
.strip__item:last-child{
  border:var(--strip-item-last-child-border);
}
.strip__icon{
  width:40px;
  height:40px;
  display:block;
  margin:0 auto 10px;
  fill:var(--strip-icon-fill);
  stroke:var(--strip-icon-stroke);
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.strip__label{
  font-size:var(--strip-label-font-size);
}

/* ===== Belief section (A Quieter Question) ===== */
.section-belief{
  padding:70px 5%;
}
.belief__layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center;
}
.belief__tag{
  color:var(--belief-tag-color);
  font-size:var(--belief-tag-font-size);
}
.belief__title{
  font-family:var(--belief-title-font-family);
  font-size:var(--belief-title-font-size);
  margin:6px 0 20px;
}
.belief__lead{
  font-size:var(--belief-lead-font-size);
  line-height:1.4;
  max-width:520px;
  color:var(--belief-lead-color);
}
.belief__text{
  line-height:1.7;
  color:var(--belief-text-color);
  max-width:520px;
}
.belief__button{
  background:var(--belief-button-background);
  color:var(--belief-button-color);
  border:var(--belief-button-border);
  padding:12px 22px;
  border-radius:6px;
  font-weight:600;
  text-decoration:none;
  display:inline-block;
}
.belief__image{
  position:relative;
  overflow:hidden;
  border-radius:10px;
  min-height:340px;
  display:grid;
  place-items:center;
  color:var(--belief-image-color);
  font-family:var(--belief-image-font-family);
  font-size:var(--belief-image-font-size);
  text-align:center;
  padding:20px;
  line-height:1.9;
  background:var(--belief-image-background);
}
.belief__photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ===== Focus section (Beyond the Applause) ===== */
.section-focus{
  padding:70px 5%;
  background:var(--section-focus-background);
}
.focus__tag{
  color:var(--focus-tag-color);
  font-size:var(--focus-tag-font-size);
}
.focus__title{
  font-family:var(--focus-title-font-family);
  font-size:var(--focus-title-font-size);
  margin:6px 0 20px;
}
.focus__grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:14px;
}
.focus__item{
  background:var(--focus-item-background);
  padding:24px 10px;
  text-align:center;
  border-radius:8px;
  font-weight:500;
  border:var(--focus-item-border);
}
.focus__icon{
  width:42px;
  height:42px;
  display:block;
  margin:0 auto 12px;
  fill:var(--focus-icon-fill);
  stroke:var(--focus-icon-stroke);
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.focus__icon-accent{
  stroke:var(--focus-icon-accent-stroke);
}
.focus__label{
  font-size:var(--focus-label-font-size);
}

/* ===== Measure section (quote + photo) ===== */
.section-measure{
  padding:70px 5%;
}
.measure__layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center;
}
.measure__image{
  position:relative;
  overflow:hidden;
  border-radius:10px;
  min-height:340px;
  display:grid;
  place-items:center;
  color:var(--measure-image-color);
  font-family:var(--measure-image-font-family);
  font-size:var(--measure-image-font-size);
  text-align:center;
  padding:20px;
  line-height:1.9;
  background:var(--measure-image-background);
}
.measure__photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.measure__card{
  background:var(--measure-card-background);
  padding:40px;
  border-radius:10px;
  color:var(--measure-card-color);
}
.measure__tag{
  color:var(--measure-tag-color);
  font-size:var(--measure-tag-font-size);
}
.measure__quote{
  font-family:var(--measure-quote-font-family);
  font-size:var(--measure-quote-font-size);
  line-height:1.3;
  margin:10px 0;
}
.measure__text{
  line-height:1.7;
  color:var(--measure-text-color);
  max-width:520px;
}
.measure__button{
  background:var(--measure-button-background);
  color:var(--measure-button-color);
  border:var(--measure-button-border);
  padding:12px 22px;
  border-radius:6px;
  font-weight:600;
  text-decoration:none;
  display:inline-block;
}

/* ===== Stats bar ===== */
.stats{
  background:var(--stats-background);
  color:var(--stats-color);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  text-align:center;
  padding:40px 5%;
  gap:10px;
}
.stats__item{
  padding:0;
}
.stats__value{
  font-family:var(--stats-value-font-family);
  font-size:var(--stats-value-font-size);
  display:block;
}
.stats__label{
  font-size:var(--stats-label-font-size);
  opacity:.85;
}

/* ===== Blog section (home page) ===== */
.section-blog{
  padding:70px 5%;
}
.blog__title{
  font-family:var(--blog-title-font-family);
  font-size:var(--blog-title-font-size);
  margin:6px 0 20px;
}
.blog__grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:18px;
}
.blog-card{
  background:var(--blog-card-background);
  border:var(--blog-card-border);
  border-radius:10px;
  padding:20px;
  cursor:pointer;
}
.blog-card__image{
  border-radius:8px;
  margin-bottom:8px;
}
.blog-card__tag{
  color:var(--blog-card-tag-color);
  font-size:var(--blog-card-tag-font-size);
}
.blog-card__title{
  margin:8px 0;
  font-family:var(--blog-card-title-font-family);
  font-size:var(--blog-card-title-font-size);
}
.blog-card__link{
  color:var(--blog-card-link-color);
  text-decoration:none;
}
.blog-card__excerpt{
  font-size:var(--blog-card-excerpt-font-size);
  margin:0;
  line-height:1.7;
  color:var(--blog-card-excerpt-color);
  max-width:520px;
}
.blog-card__skeleton-meta{
  height:12px;
  width:45%;
  border-radius:4px;
}
.blog-card__skeleton-title{
  height:18px;
  width:85%;
  margin:12px 0;
  border-radius:4px;
}
.blog-card__skeleton-text{
  height:12px;
  width:100%;
  border-radius:4px;
}

/* ===== Closing section (CTA) ===== */
.section-cta{
  background:var(--section-cta-background);
  color:var(--section-cta-color);
  padding:70px 5%;
}
.cta__title{
  max-width:700px;
}
.cta__text{
  color:var(--cta-text-color);
}
.cta__button{
  background:var(--cta-button-background);
  color:var(--cta-button-color);
  border:var(--cta-button-border);
  padding:12px 22px;
  border-radius:6px;
  font-weight:600;
  text-decoration:none;
  display:inline-block;
}

/* ===== Footer ===== */
.site-footer{
  background:var(--site-footer-background);
  color:var(--site-footer-color);
  padding:20px 5%;
  text-align:center;
  font-size:var(--site-footer-font-size);
}
.site-footer__link{
  color:var(--site-footer-link-color);
}

/* ===== Blog post page ===== */
.section-post{
  padding:70px 5%;
}
.post{
  max-width:760px;
  margin:auto;
}
.post__meta{
  color:var(--post-meta-color);
  font-size:var(--post-meta-font-size);
  line-height:1.7;
  max-width:520px;
}
.post__title{
  font-family:var(--post-title-font-family);
  font-size:var(--post-title-font-size);
  margin:8px 0;
}
.post__image{
  max-width:100%;
  height:auto;
  border-radius:10px;
  margin:14px 0;
}
.post__body{
  line-height:1.8;
}
.post__body p{
  line-height:1.7;
  color:var(--post-body-p-color);
  max-width:520px;
}
.post__tags{
  color:var(--post-tags-color);
  font-size:var(--post-tags-font-size);
  line-height:1.7;
  max-width:520px;
}
.post__related-title{
  font-family:var(--post-related-title-font-family);
  font-size:var(--post-related-title-font-size);
  margin:36px 0 20px;
}
.post__related-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:18px;
}
.post__back{
  margin-top:28px;
  line-height:1.7;
  color:var(--post-back-color);
  max-width:520px;
}
.post__back-link{
  color:var(--post-back-link-color);
}
.post__skeleton-title{
  height:28px;
  width:70%;
  border-radius:4px;
}
.post__skeleton-image{
  height:200px;
  margin-top:20px;
  border-radius:8px;
}

/* ===== Page not found (404) ===== */
.section-notfound{
  padding:70px 5%;
  text-align:center;
  min-height:50vh;
}
.notfound__title{
  font-family:var(--notfound-title-font-family);
}
.notfound__actions{
  margin:14px auto;
  line-height:1.7;
  color:var(--notfound-actions-color);
  max-width:520px;
}
.notfound__button{
  background:var(--notfound-button-background);
  color:var(--notfound-button-color);
  border:var(--notfound-button-border);
  padding:12px 22px;
  border-radius:6px;
  font-weight:600;
  text-decoration:none;
  display:inline-block;
}

/* ===== Loading shimmer (shared on purpose) ===== */
.skeleton{
  background:var(--skeleton-background);
  background-size:200% 100%;
  animation:shimmer 1.3s linear infinite;
}

@keyframes shimmer{to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.skeleton{animation:none}}