/* ==========================================================================
   THE VIEW FROM HERE — page-specific layout
   Depends on global.css, header.css, footer.css, responsive.css.
   ========================================================================== */

/* Shorter "content page" hero than the tall immersive .hero pattern.
   The ghost text IS the real page h1 here (not decorative) - the
   original design never had a separate visible title, so we don't
   invent one. Ghost is centered and bled full-width, matching the
   approved reference image exactly (not the bottom-right-bleed style
   used elsewhere - this page's ghost treatment is intentionally its
   own thing, matching the specific original asset it was built from). */
.view-hero{
  height:clamp(360px,34vw,470px);
  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,.2);
}
.view-background{position:absolute;inset:0;z-index:-3}
.view-background img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center 40%;
  filter:saturate(.82) brightness(.92) contrast(1.02);
}
.view-hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(0deg,rgba(17,17,15,.62) 0%,rgba(17,17,15,.14) 42%,rgba(17,17,15,.05) 70%,rgba(17,17,15,.3) 100%);
}
.view-hero-content{
  width:100%;
  position:relative;z-index:2;
  padding:0 var(--page-pad) clamp(28px,4vh,44px);
}
.view-ghost-title{
  position:absolute;
  left:calc(-1 * var(--page-pad));
  right:calc(-1 * var(--page-pad));
  bottom:100%;
  margin:0 0 -.08em;
  text-align:center;
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(64px,9vw,150px);
  line-height:.85;
  letter-spacing:.035em;
  color:rgba(247,247,243,.16);
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
}
.view-intro{
  margin:14px 0 0;
  max-width:650px;
  font-size:clamp(14px,1.1vw,16px);
  line-height:1.6;
  color:rgba(247,247,243,.88);
}

.tvfh-article-card{
  max-width:1672px;
  margin:0 auto;
  padding:48px var(--page-pad) 0;
}
.tvfh-card-inner{
  display:grid;
  grid-template-columns:minmax(280px,460px) 1fr;
  gap:48px;
  background:rgba(17,17,15,.55);
  border:1px solid rgba(211,162,46,.28);
  padding:40px;
}
.tvfh-card-image{
  display:block;
  overflow:hidden;
  aspect-ratio:16/9.4;
}
.tvfh-card-image img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .5s ease;
}
.tvfh-card-image:hover img{transform:scale(1.04)}

.tvfh-card-copy h2{
  font-size:clamp(32px,3vw,44px);
}
.tvfh-card-meta{
  margin-top:10px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold);
}
.tvfh-card-rule{margin:20px 0 22px}
.tvfh-card-copy .body-text + .body-text{margin-top:14px}
.tvfh-read-link{
  display:inline-block;
  margin-top:24px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold);
  transition:gap var(--ease-soft);
}
.tvfh-read-link span{display:inline-block;transition:transform var(--ease-soft)}
.tvfh-read-link:hover span{transform:translateX(4px)}

.tvfh-newsletter{
  max-width:1672px;
  margin:0 auto;
  padding:0 var(--page-pad) 64px;
}
.tvfh-newsletter-inner{
  display:flex;
  align-items:center;
  gap:28px;
  border:1px solid rgba(211,162,46,.28);
  padding:28px 40px;
  flex-wrap:wrap;
}
.tvfh-newsletter-icon{
  width:44px;height:44px;
  flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  color:var(--gold);
}
.tvfh-newsletter-icon svg{width:100%;height:100%}
.tvfh-newsletter-copy{flex:1 1 260px}
.tvfh-newsletter-copy h2{font-size:clamp(22px,2vw,28px)}
.tvfh-newsletter-copy p{margin-top:4px}
.tvfh-newsletter-form{
  display:flex;
  gap:14px;
  flex:1 1 420px;
  position:relative;
}
.tvfh-newsletter-form .field{flex:1 1 auto}
.tvfh-newsletter-form .button{flex:0 0 auto;white-space:nowrap}
.form-status{
  position:absolute;
  bottom:-26px;
  left:0;
  margin:0;
  font-size:12px;
  color:var(--silver);
}

/* ===== Tablet ===== */
@media (max-width:980px){
  .tvfh-card-inner{
    grid-template-columns:1fr;
  }
}

/* ===== Mobile ===== */
@media (max-width:640px){
  .view-hero{height:340px}
  .view-ghost-title{
    font-size:72px;
    line-height:.86;
    white-space:normal;
    overflow:visible;
    text-align:left;
    left:calc(-1 * var(--page-pad-mobile));
    right:calc(-1 * var(--page-pad-mobile));
  }
  .view-intro{font-size:12px;margin-top:10px}
  .tvfh-article-card{
    padding:34px var(--page-pad-mobile) 0;
  }
  .tvfh-card-inner{
    padding:24px;
    gap:24px;
  }
  .tvfh-newsletter{padding:0 var(--page-pad-mobile) 48px}
  .tvfh-newsletter-inner{
    flex-direction:column;
    align-items:flex-start;
    padding:24px;
  }
  .tvfh-newsletter-copy{flex:none}
  .tvfh-newsletter-form{
    flex-direction:column;
    flex:none;
    width:100%;
  }
  .tvfh-newsletter-form .button{width:100%}
  .form-status{position:static;margin-top:8px}
}