/* ==========================================================================
   ARTICLE (single TVFH post) — page-specific layout
   Short scenic hero (photo, no ghost text needed - back link + title +
   meta only) followed by an editorial world background with the article
   card floating on top. Depends on global.css, header.css, footer.css.
   ========================================================================== */

.article-hero{
  height:317px;min-height:317px;
  margin-top:var(--header-h);
  position:relative;
  display:flex;align-items:flex-end;
  overflow:hidden;isolation:isolate;
  border-bottom:1px solid rgba(211,162,46,.25);
}
.article-hero-bg{position:absolute;inset:0;z-index:-3}
.article-hero-bg img{width:100%;height:100%;object-fit:cover}
.article-hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:linear-gradient(0deg,rgba(17,17,15,.88) 0%,rgba(17,17,15,.46) 25%,rgba(17,17,15,.03) 62%,rgba(17,17,15,.02) 100%);
}
.article-head{
  width:min(1180px,calc(100% - 2*var(--page-pad)));
  margin:0 auto;
  padding-bottom:27px;
  position:relative;z-index:2;
}
.back-link{color:var(--gold);font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase}
.article-title{
  margin:11px 0 7px;
  font-family:var(--font-display);
  font-size:clamp(64px,6.4vw,102px);
  line-height:.82;letter-spacing:.035em;font-weight:400;
  text-transform:uppercase;
  text-shadow:0 4px 28px rgba(0,0,0,.38);
}
.article-meta{color:rgba(247,247,243,.72);font-size:10px;letter-spacing:.2em;text-transform:uppercase}

.article-world{
  position:relative;isolation:isolate;
  padding:64px var(--page-pad) 26px;
  overflow:hidden;
}
.article-world::before{
  content:"";position:absolute;inset:0;z-index:-3;
  background:url("assets/images/home/about-bg.jpg") center center / cover no-repeat;
  filter:grayscale(.16) saturate(.82) brightness(.84) contrast(1.02);
}
.article-world::after{
  content:"";position:absolute;inset:0;z-index:-2;
  background:linear-gradient(180deg,rgba(17,17,15,.58),rgba(17,17,15,.78));
}
.view-shell{max-width:1500px;margin:0 auto}

.article-body{
  max-width:860px;margin:0 auto;
  padding:clamp(44px,5vw,72px) clamp(32px,5vw,72px);
  background:rgba(31,31,31,.88);
  border:1px solid rgba(211,162,46,.25);
  box-shadow:0 24px 80px rgba(0,0,0,.16);
  color:rgba(247,247,243,.88);
  font-size:17px;line-height:1.92;
}
.article-body p{margin:0 0 27px}
.article-body .emphasis{
  margin:46px -18px;
  font-family:var(--font-display);
  font-size:clamp(46px,5vw,73px);
  line-height:.96;letter-spacing:.035em;
  color:var(--porcelain);
}
.article-body blockquote{
  margin:44px 0;
  padding:21px 0 21px 26px;
  border-left:2px solid var(--gold);
  font-family:"Playfair Display",Georgia,serif;
  font-size:23px;font-style:italic;line-height:1.5;
  color:var(--porcelain);
}
.inline-media{
  margin:50px -22px;
  min-height:310px;
  position:relative;
  display:grid;place-items:center;text-align:center;
  border:1px solid rgba(211,162,46,.32);
  background:
    linear-gradient(rgba(17,17,15,.4),rgba(17,17,15,.6)),
    url("assets/images/tvfh/camp-one-thumb.jpg") center 58% / cover no-repeat;
}
.inline-media h3{
  margin:15px 0 0;
  font-family:var(--font-display);
  font-size:43px;font-weight:400;letter-spacing:.04em;
  text-transform:uppercase;
}
.inline-media p{margin:6px 0 0!important;color:rgba(247,247,243,.62);font-size:10px;letter-spacing:.13em;text-transform:uppercase}
.play{
  width:50px;height:50px;
  display:grid;place-items:center;flex:none;
  margin:0 auto;
  border:1px solid rgba(211,162,46,.76);color:var(--gold);
}
.play::before{
  content:"";width:0;height:0;
  border-top:7px solid transparent;border-bottom:7px solid transparent;
  border-left:11px solid currentColor;margin-left:3px;
}
.article-ending{
  margin-top:48px;padding-top:25px;
  border-top:1px solid rgba(211,162,46,.35);
  color:var(--gold);
  font-family:var(--font-display);
  font-size:44px;letter-spacing:.04em;
}

.signup-strip{
  border:1px solid rgba(211,162,46,.34);
  background:linear-gradient(90deg,rgba(34,34,34,.92),rgba(17,17,17,.94));
  display:grid;
  grid-template-columns:auto minmax(300px,1fr) minmax(430px,.9fr);
  align-items:center;gap:28px;
  padding:22px clamp(24px,3vw,42px);
  margin:18px 0 40px;
}
.mail-icon{width:45px;height:36px;color:var(--gold);flex:none}
.mail-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5}
.signup-copy h2{
  margin:0;
  font-family:var(--font-display);
  font-size:31px;font-weight:400;letter-spacing:.055em;
  text-transform:uppercase;
}
.signup-copy p{margin:4px 0 0;color:rgba(247,247,243,.7);font-size:12px;line-height:1.55}
.signup-strip .signup-form{display:grid;grid-template-columns:1fr auto;gap:12px}

@media (max-width:980px){
  .signup-strip{grid-template-columns:auto 1fr}
  .signup-strip .signup-form{grid-column:1/-1}
}

@media (max-width:640px){
  .article-hero{height:250px;min-height:250px}
  .article-head{padding-bottom:20px}
  .article-title{font-size:58px}
  .back-link{font-size:9px}
  .article-world{padding:38px var(--page-pad-mobile) 22px}
  .article-body{font-size:16px;padding:38px 24px}
  .article-body .emphasis,
  .inline-media{margin-left:0;margin-right:0}
  .signup-strip{grid-template-columns:1fr;text-align:center;justify-items:center}
  .signup-strip .signup-form{width:100%;grid-template-columns:1fr}
}