.hero.article-hero,
.section,
.article,
.photo-strip,
.callout,
.blog-photo-meta{
  box-sizing:border-box;
}
body{
  background:
    linear-gradient(180deg,#fbf8f1 0%,#f4efe5 48%,#fbf8f1 100%);
}
.hero.article-hero{
  position:relative;
  min-height:560px;
  display:grid;
  align-items:end;
  overflow:hidden;
  padding:0 24px;
  border:0;
  background:#171914;
  isolation:isolate;
}
.hero.article-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--hero-image) center/cover no-repeat;
  transform:scale(1.02);
  filter:saturate(.96) contrast(1.03);
  z-index:-2;
}
.hero.article-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(16,18,13,.88) 0%,rgba(16,18,13,.58) 45%,rgba(16,18,13,.16) 100%);
  z-index:-1;
}
.hero.article-hero .wrap{
  position:relative;
}
.hero.article-hero .wrap{
  width:min(1080px,100%);
  padding:110px 0 82px;
}
.hero.article-hero .narrow{
  max-width:920px;
}
.hero.article-hero .eyebrow{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  border:1px solid rgba(242,208,139,.34);
  border-radius:999px;
  background:rgba(10,12,10,.24);
  color:#f2d08b;
  padding:7px 11px;
  margin-bottom:18px;
}
.hero.article-hero h1{
  color:#fff;
  font-size:clamp(42px,6vw,76px);
  line-height:.98;
  max-width:900px;
}
.hero.article-hero .lead{
  color:rgba(255,255,255,.86);
  font-size:clamp(18px,2vw,22px);
  max-width:780px;
}
.section:has(.article){
  padding-top:0;
  margin-top:-42px;
  position:relative;
  z-index:2;
}
.article{
  position:relative;
  max-width:min(980px,calc(100vw - 48px));
  background:linear-gradient(180deg,#fffdf8 0%,#fff9ef 100%);
  border:1px solid rgba(54,45,35,.12);
  border-radius:8px;
  padding:clamp(22px,4vw,44px);
  box-shadow:0 26px 70px rgba(45,37,26,.11);
}
.article::before{
  content:"";
  position:absolute;
  inset:12px;
  border:1px solid rgba(196,149,106,.12);
  border-radius:6px;
  pointer-events:none;
}
.article > *{
  position:relative;
}
.article > p,
.article > ul,
.article > ol,
.article > h2,
.article > h3,
.article > .callout,
.article > .source-list{
  max-width:720px;
  margin-left:auto;
  margin-right:auto;
}
.article p,
.article li{
  color:#47473f;
}
.article ul,
.article ol{
  padding-left:0;
  list-style:none;
}
.article li{
  position:relative;
  padding-left:24px;
  margin-bottom:10px;
}
.article li::before{
  content:"";
  position:absolute;
  left:0;
  top:.75em;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#2f6f73;
  box-shadow:0 0 0 4px rgba(47,111,115,.12);
}
.article > p:first-of-type{
  font-size:clamp(19px,2vw,22px);
  line-height:1.72;
  color:#353932;
  margin-top:22px;
  margin-bottom:34px;
}
.article h2{
  color:#24251f;
  font-size:clamp(30px,4vw,42px);
  margin-top:46px;
  margin-bottom:16px;
  letter-spacing:0;
}
.article h2::after{
  content:"";
  display:block;
  width:56px;
  height:2px;
  background:#c4956a;
  margin-top:14px;
}
.article h3{
  color:#30322c;
}
.article a:not(.btn){
  color:var(--gold-dark,#8b5f38);
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:3px;
}
.photo-strip{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(160px,.75fr) minmax(160px,.75fr);
  gap:14px;
  align-items:stretch;
  margin:0 0 38px;
  padding:12px;
  border:1px solid rgba(54,45,35,.1);
  border-radius:8px;
  background:#fff;
  box-shadow:0 16px 40px rgba(45,37,26,.08);
}
.photo-strip figure,
.photo-strip > img{
  position:relative;
  min-height:230px;
  overflow:hidden;
  border-radius:8px;
  border:1px solid rgba(54,45,35,.1);
  background:#f2ece2;
  box-shadow:0 12px 28px rgba(45,37,26,.08);
}
.photo-strip figure:first-child,
.photo-strip > img:first-child{
  min-height:340px;
}
.photo-strip img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:8px;
  border:0;
  transform:scale(1.01);
  transition:transform .35s ease,filter .35s ease;
}
.photo-strip > img{
  min-height:230px;
}
.photo-strip > img:first-child{
  min-height:340px;
}
.photo-strip figure:hover img,
.photo-strip > img:hover{
  transform:scale(1.045);
  filter:saturate(1.04) contrast(1.02);
}
.photo-strip figcaption{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.blog-photo-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  max-width:720px;
  margin:-18px auto 34px;
}
.blog-photo-meta span{
  border:1px solid rgba(54,45,35,.1);
  border-radius:999px;
  background:#fff;
  color:#635b50;
  font-size:12px;
  font-weight:700;
  padding:7px 11px;
}
.blog-edit-toolbar{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:60;
  display:none;
  max-width:min(330px,calc(100vw - 36px));
  border:1px solid rgba(54,45,35,.14);
  border-radius:8px;
  background:#fffdf8;
  box-shadow:0 18px 44px rgba(45,37,26,.18);
  padding:12px;
}
.blog-edit-toolbar.is-visible{
  display:block;
}
.blog-edit-toolbar strong{
  display:block;
  font-size:13px;
  margin-bottom:3px;
}
.blog-edit-toolbar p{
  color:#665f55;
  font-size:12px;
  line-height:1.45;
  margin:0 0 10px;
}
.blog-edit-toolbar a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  border-radius:999px;
  background:var(--gold,#C4956A);
  color:#fff;
  font-size:13px;
  font-weight:800;
  padding:9px 14px;
  text-decoration:none;
}
.callout{
  border-radius:8px;
  background:linear-gradient(135deg,#f5efe3,#fffaf1);
  border:1px solid rgba(139,95,56,.18);
  box-shadow:0 12px 28px rgba(45,37,26,.06);
}
.callout h2{
  margin-top:0;
}
.btn{
  align-items:center;
  justify-content:center;
  min-height:46px;
  border-radius:999px;
  box-shadow:0 12px 26px rgba(75,49,27,.14);
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 30px rgba(75,49,27,.18);
}
@media(max-width:800px){
  .hero.article-hero{
    min-height:500px;
    padding:0 18px;
  }
  .hero.article-hero::after{
    background:linear-gradient(0deg,rgba(16,18,13,.9) 0%,rgba(16,18,13,.5) 62%,rgba(16,18,13,.16) 100%);
  }
  .hero.article-hero .wrap{
    padding:76px 0 54px;
  }
  .section:has(.article){
    padding:0 14px 58px;
    margin-top:-28px;
  }
  .article{
    max-width:100%;
    padding:22px 16px;
    font-size:17px;
  }
  .article::before{
    inset:8px;
  }
  .article > p:first-of-type{
    font-size:18px;
  }
  .article h2{
    font-size:29px;
  }
  .photo-strip{
    grid-template-columns:1fr;
    gap:12px;
    padding:10px;
  }
  .photo-strip figure,
  .photo-strip figure:first-child,
  .photo-strip > img,
  .photo-strip > img:first-child{
    min-height:auto;
    aspect-ratio:4/3;
  }
  .blog-edit-toolbar{
    right:12px;
    bottom:12px;
  }
}
